input, adding back examples
This commit is contained in:
Michael Freno
247
examples/05_animations.lua
Normal file
247
examples/05_animations.lua
Normal file
@@ -0,0 +1,247 @@
|
||||
--[[
|
||||
FlexLove Example 05: Animations
|
||||
|
||||
This example demonstrates animation system in FlexLove:
|
||||
- Fade animations
|
||||
- Scale animations
|
||||
- Custom animations with different easing functions
|
||||
- Animation timing and interpolation
|
||||
|
||||
Run with: love /path/to/libs/examples/05_animations.lua
|
||||
]]
|
||||
|
||||
local Lv = love
|
||||
|
||||
local FlexLove = require("../FlexLove")
|
||||
local Gui = FlexLove.Gui
|
||||
local Color = FlexLove.Color
|
||||
local Animation = FlexLove.Animation
|
||||
local enums = FlexLove.enums
|
||||
|
||||
-- Animation control variables
|
||||
local fadeBox, scaleBox, easingBoxes
|
||||
|
||||
function Lv.load()
|
||||
Gui.init({
|
||||
baseScale = { width = 1920, height = 1080 }
|
||||
})
|
||||
|
||||
-- Title
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "2vh",
|
||||
width = "96vw",
|
||||
height = "6vh",
|
||||
text = "FlexLove Example 05: Animations",
|
||||
textSize = "4vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 1: Fade Animation
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "10vh",
|
||||
width = "46vw",
|
||||
height = "3vh",
|
||||
text = "Fade Animation - Click to trigger",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
fadeBox = Gui.new({
|
||||
x = "2vw",
|
||||
y = "14vh",
|
||||
width = "46vw",
|
||||
height = "20vh",
|
||||
backgroundColor = Color.new(0.3, 0.6, 0.9, 1),
|
||||
text = "Click me to fade out and back in",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 10,
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
-- Fade out then fade in
|
||||
local fadeOut = Animation.fade(1.0, 1.0, 0.0)
|
||||
fadeOut.easing = function(t) return t * t end -- easeInQuad
|
||||
element.animation = fadeOut
|
||||
|
||||
-- Queue fade in after fade out completes
|
||||
local startTime = Lv.timer.getTime()
|
||||
element._fadeCallback = function(el, dt)
|
||||
if Lv.timer.getTime() - startTime >= 1.0 then
|
||||
local fadeIn = Animation.fade(1.0, 0.0, 1.0)
|
||||
fadeIn.easing = function(t) return t * (2 - t) end -- easeOutQuad
|
||||
el.animation = fadeIn
|
||||
el._fadeCallback = nil
|
||||
end
|
||||
end
|
||||
end
|
||||
end,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 2: Scale Animation
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "50vw",
|
||||
y = "10vh",
|
||||
width = "48vw",
|
||||
height = "3vh",
|
||||
text = "Scale Animation - Click to trigger",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
scaleBox = Gui.new({
|
||||
x = "50vw",
|
||||
y = "14vh",
|
||||
width = 400,
|
||||
height = 200,
|
||||
backgroundColor = Color.new(0.9, 0.4, 0.4, 1),
|
||||
text = "Click me to scale up",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 10,
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
-- Scale up
|
||||
local scaleUp = Animation.scale(
|
||||
0.5,
|
||||
{ width = element.width, height = element.height },
|
||||
{ width = element.width * 1.5, height = element.height * 1.5 }
|
||||
)
|
||||
scaleUp.easing = function(t) return t < 0.5 and 2 * t * t or -1 + (4 - 2 * t) * t end -- easeInOutQuad
|
||||
element.animation = scaleUp
|
||||
|
||||
-- Queue scale down
|
||||
local startTime = Lv.timer.getTime()
|
||||
element._scaleCallback = function(el, dt)
|
||||
if Lv.timer.getTime() - startTime >= 0.5 then
|
||||
local scaleDown = Animation.scale(
|
||||
0.5,
|
||||
{ width = el.width, height = el.height },
|
||||
{ width = 400, height = 200 }
|
||||
)
|
||||
scaleDown.easing = function(t) return t < 0.5 and 2 * t * t or -1 + (4 - 2 * t) * t end
|
||||
el.animation = scaleDown
|
||||
el._scaleCallback = nil
|
||||
end
|
||||
end
|
||||
end
|
||||
end,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 3: Easing Functions Comparison
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "36vh",
|
||||
width = "96vw",
|
||||
height = "3vh",
|
||||
text = "Easing Functions - Click any box to see different easing",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
local easingContainer = Gui.new({
|
||||
x = "2vw",
|
||||
y = "40vh",
|
||||
width = "96vw",
|
||||
height = "56vh",
|
||||
positioning = enums.Positioning.GRID,
|
||||
gridRows = 3,
|
||||
gridColumns = 3,
|
||||
rowGap = "2vh",
|
||||
columnGap = "2vw",
|
||||
backgroundColor = Color.new(0.08, 0.08, 0.12, 1),
|
||||
border = { top = true, right = true, bottom = true, left = true },
|
||||
borderColor = Color.new(0.25, 0.25, 0.35, 1),
|
||||
padding = { top = 20, right = 20, bottom = 20, left = 20 },
|
||||
})
|
||||
|
||||
-- Different easing functions
|
||||
local easings = {
|
||||
{ name = "Linear", func = function(t) return t end },
|
||||
{ name = "EaseInQuad", func = function(t) return t * t end },
|
||||
{ name = "EaseOutQuad", func = function(t) return t * (2 - t) end },
|
||||
{ name = "EaseInOutQuad", func = function(t) return t < 0.5 and 2 * t * t or -1 + (4 - 2 * t) * t end },
|
||||
{ name = "EaseInCubic", func = function(t) return t * t * t end },
|
||||
{ name = "EaseOutCubic", func = function(t) local t1 = t - 1; return t1 * t1 * t1 + 1 end },
|
||||
{ name = "EaseInQuart", func = function(t) return t * t * t * t end },
|
||||
{ name = "EaseOutQuart", func = function(t) local t1 = t - 1; return 1 - t1 * t1 * t1 * t1 end },
|
||||
{ name = "EaseInExpo", func = function(t) return t == 0 and 0 or math.pow(2, 10 * (t - 1)) end },
|
||||
}
|
||||
|
||||
easingBoxes = {}
|
||||
|
||||
for i, easing in ipairs(easings) do
|
||||
local hue = (i - 1) / 8
|
||||
local box = Gui.new({
|
||||
parent = easingContainer,
|
||||
backgroundColor = Color.new(0.2 + hue * 0.6, 0.4 + math.sin(hue * 3.14) * 0.4, 0.8 - hue * 0.4, 1),
|
||||
text = easing.name,
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 8,
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
-- Fade out and in with this easing
|
||||
local fadeOut = Animation.fade(0.8, 1.0, 0.2)
|
||||
fadeOut.easing = easing.func
|
||||
element.animation = fadeOut
|
||||
|
||||
local startTime = Lv.timer.getTime()
|
||||
element._easingCallback = function(el, dt)
|
||||
if Lv.timer.getTime() - startTime >= 0.8 then
|
||||
local fadeIn = Animation.fade(0.8, 0.2, 1.0)
|
||||
fadeIn.easing = easing.func
|
||||
el.animation = fadeIn
|
||||
el._easingCallback = nil
|
||||
end
|
||||
end
|
||||
end
|
||||
end,
|
||||
})
|
||||
table.insert(easingBoxes, box)
|
||||
end
|
||||
end
|
||||
|
||||
function Lv.update(dt)
|
||||
-- Handle fade callback
|
||||
if fadeBox and fadeBox._fadeCallback then
|
||||
fadeBox._fadeCallback(fadeBox, dt)
|
||||
end
|
||||
|
||||
-- Handle scale callback
|
||||
if scaleBox and scaleBox._scaleCallback then
|
||||
scaleBox._scaleCallback(scaleBox, dt)
|
||||
end
|
||||
|
||||
-- Handle easing callbacks
|
||||
for _, box in ipairs(easingBoxes) do
|
||||
if box._easingCallback then
|
||||
box._easingCallback(box, dt)
|
||||
end
|
||||
end
|
||||
|
||||
Gui.update(dt)
|
||||
end
|
||||
|
||||
function Lv.draw()
|
||||
Lv.graphics.clear(0.05, 0.05, 0.08, 1)
|
||||
Gui.draw()
|
||||
end
|
||||
|
||||
function Lv.resize(w, h)
|
||||
Gui.resize(w, h)
|
||||
end
|
||||
Reference in New Issue
Block a user