Links and animation changes
This commit is contained in:
@@ -60,15 +60,19 @@ export default defineConfig({
|
|||||||
|
|
||||||
sidebar: {
|
sidebar: {
|
||||||
'/guides/': [
|
'/guides/': [
|
||||||
{ text: 'Getting started', link: '/guides/getting-started' },
|
{ text: 'General', link: '/guides/getting-started', items: [
|
||||||
{ text: 'Download', link: '/guides/download' },
|
{ text: 'Getting started', link: '/guides/getting-started' },
|
||||||
{ text: 'Annotations', link: '/guides/annotations' },
|
{ text: 'Download', link: '/guides/download' },
|
||||||
{ text: 'Animations', link: '/guides/animations' },
|
{ text: 'Annotations', link: '/guides/annotations' },
|
||||||
{ text: 'Benchmark', link: '/guides/benchmarks' },
|
{ text: 'FAQ', link: '/guides/faq' },
|
||||||
{ text: 'Properties', link: '/guides/properties' },
|
]},
|
||||||
{ text: 'States', link: '/guides/states' },
|
{ text: 'Plugins', link: '/guides/animations', items: [
|
||||||
{ text: 'XML', link: '/guides/xml' },
|
{ text: 'Animations', link: '/guides/animations' },
|
||||||
{ text: 'FAQ', link: '/guides/faq' },
|
{ text: 'Benchmark', link: '/guides/benchmarks' },
|
||||||
|
{ text: 'Properties', link: '/guides/properties' },
|
||||||
|
{ text: 'States', link: '/guides/states' },
|
||||||
|
{ text: 'XML', link: '/guides/xml' },
|
||||||
|
]},
|
||||||
],
|
],
|
||||||
|
|
||||||
'/references/':[
|
'/references/':[
|
||||||
|
|||||||
@@ -14,17 +14,19 @@ Animations in Basalt work with:
|
|||||||
### Core Animation Methods
|
### Core Animation Methods
|
||||||
```lua
|
```lua
|
||||||
element:animate()
|
element:animate()
|
||||||
:offset(x, y, duration) -- Animate offset
|
:move(x, y, duration) -- Animate move
|
||||||
:size(w, h, duration) -- Animate size
|
:moveOffset(x, y, duration) -- Animate offset
|
||||||
:position(x, y, duration) -- Animate position
|
:size(w, h, duration) -- Animate size
|
||||||
:textColor(color, duration) -- Animate text color
|
:morphText(property, targetText, duration) -- Animate text
|
||||||
:background(color, duration) -- Animate background color
|
:typewrite(property, targetText, duration) -- Animate text
|
||||||
|
:fadeText(property, targetText, duration) -- Animate text
|
||||||
|
:scrollText(property, targetText, duration) -- Animate text
|
||||||
```
|
```
|
||||||
|
|
||||||
### Animation Control
|
### Animation Control
|
||||||
```lua
|
```lua
|
||||||
local anim = element:animate()
|
local anim = element:animate()
|
||||||
:offset(5, 0, 1)
|
:moveOffset(5, 0, 1)
|
||||||
:start() -- Start the animation
|
:start() -- Start the animation
|
||||||
|
|
||||||
anim:pause() -- Pause animation
|
anim:pause() -- Pause animation
|
||||||
@@ -40,18 +42,18 @@ Sequences allow you to create complex animations by controlling when each animat
|
|||||||
```lua
|
```lua
|
||||||
-- Without sequences (animations play at the same time):
|
-- Without sequences (animations play at the same time):
|
||||||
element:animate()
|
element:animate()
|
||||||
:position(10, 5, 1) -- These three animations
|
:move(10, 5, 1) -- These three animations
|
||||||
:size(5, 5, 1) -- all start and play
|
:size(5, 5, 1) -- all start and play
|
||||||
:background(colors.red, 1) -- simultaneously
|
:morphText("text", "newText" 1) -- simultaneously
|
||||||
:start()
|
:start()
|
||||||
|
|
||||||
-- With sequences (animations play one after another):
|
-- With sequences (animations play one after another):
|
||||||
element:animate()
|
element:animate()
|
||||||
:position(10, 5, 1) -- Plays first
|
:move(10, 5, 1) -- Plays first
|
||||||
:sequence()
|
:sequence()
|
||||||
:size(5, 5, 1) -- Starts after position completes
|
:size(5, 5, 1) -- Starts after position completes
|
||||||
:sequence()
|
:sequence()
|
||||||
:background(colors.red, 1) -- Starts after size completes
|
:morphText("text", "newText" 1) -- simultaneously
|
||||||
:start()
|
:start()
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -59,13 +61,13 @@ element:animate()
|
|||||||
```lua
|
```lua
|
||||||
-- Complex movement pattern
|
-- Complex movement pattern
|
||||||
element:animate()
|
element:animate()
|
||||||
:position(10, 5, 0.5) -- Move right
|
:move(10, 5, 0.5) -- Move right
|
||||||
:sequence()
|
:sequence()
|
||||||
:position(10, 10, 0.5) -- Then down
|
:move(10, 10, 0.5) -- Then down
|
||||||
:sequence()
|
:sequence()
|
||||||
:position(5, 10, 0.5) -- Then left
|
:move(5, 10, 0.5) -- Then left
|
||||||
:sequence()
|
:sequence()
|
||||||
:position(5, 5, 0.5) -- Then up
|
:move(5, 5, 0.5) -- Then up
|
||||||
:onDone(function()
|
:onDone(function()
|
||||||
-- Called when entire sequence completes
|
-- Called when entire sequence completes
|
||||||
end)
|
end)
|
||||||
@@ -74,19 +76,19 @@ element:animate()
|
|||||||
-- Mixing simultaneous and sequential animations
|
-- Mixing simultaneous and sequential animations
|
||||||
element:animate()
|
element:animate()
|
||||||
-- These two happen together
|
-- These two happen together
|
||||||
:position(10, 5, 1)
|
:move(10, 5, 1)
|
||||||
:background(colors.blue, 1)
|
:morphText("text", "newText" 1) -- simultaneously
|
||||||
:sequence()
|
:sequence()
|
||||||
-- These two also happen together, but after the first group
|
-- These two also happen together, but after the first group
|
||||||
:position(5, 5, 1)
|
:move(5, 5, 1)
|
||||||
:background(colors.red, 1)
|
:morphText("text", "anotherText" 1) -- simultaneously
|
||||||
:start()
|
:start()
|
||||||
```
|
```
|
||||||
|
|
||||||
### Callbacks
|
### Callbacks
|
||||||
```lua
|
```lua
|
||||||
element:animate()
|
element:animate()
|
||||||
:offset(5, 0, 1)
|
:moveOffset(5, 0, 1)
|
||||||
:onStart(function() end) -- When animation starts
|
:onStart(function() end) -- When animation starts
|
||||||
:onDone(function() end) -- When animation completes
|
:onDone(function() end) -- When animation completes
|
||||||
:onStep(function() end) -- Every animation step
|
:onStep(function() end) -- Every animation step
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
# Welcome to The Basalt Wiki
|
# Welcome to The Basalt Wiki
|
||||||
|
|
||||||
Welcome to Basalt 2, a complete reimagining of the Basalt UI framework for ComputerCraft. After maintaining the original Basalt, i identified several areas that needed fundamental improvements. This led to the decision to rebuild Basalt from the ground up, focusing on three key aspects:
|
Welcome to Basalt 2, a complete reimagining of the Basalt UI framework for ComputerCraft. After maintaining the original Basalt, i identified several areas that needed fundamental improvements. This led to the decision to rebuild Basalt from the ground up, focusing on these key aspects:
|
||||||
|
|
||||||
- Improved error handling to help developers quickly identify and resolve issues
|
- Improved error handling to help developers quickly identify and resolve issues
|
||||||
- Auto-generated documentation that stays in sync with the codebase
|
- Auto-generated documentation that stays in sync with the codebase
|
||||||
|
|||||||
Reference in New Issue
Block a user