Links and animation changes

This commit is contained in:
Robert Jelic
2025-03-18 02:47:35 +01:00
parent ca49c5534f
commit 9bde0ddb33
3 changed files with 35 additions and 29 deletions

View File

@@ -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/':[

View File

@@ -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

View File

@@ -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