动画教程

一、步骤

1. 创建动画对象

--@param property AnimProperty  AnimProperty动画属性枚举
--@param target View 动画view
--ObjectAnimation(property, target)
anim = ObjectAnimation(AnimProperty.Scale, self)

2. 设置动画属性

--如设置动画时长2s
anim.duration(2)

3. 播放动画

anim.start()

二、命令式写法

ui {
   Label("点我开始Scale动画")
    .padding(10, 30, 10, 30)
    .bgColor(Color(0xaaaaaa))
    .onClick(function()
        --构造方法，绑定view
        --@param property AnimProperty  AnimProperty动画属性枚举
        --@param target View 动画view
        --ObjectAnimation(property, target)
        anim = ObjectAnimation(AnimProperty.Scale, self)
        --设置动画属性
        anim.duration(2).from(1.5, 1.5).to(0.8, 0.8)
        --Spring动画配置 弹簧效果
        anim.timing(Timing.Spring, { Bounciness = 15, Speed = 2 })
        --开始动画
        anim.start()
    end)
}

三 、声明式写法

model(userData)
--初始化动画属性（`key = value` 写法）
positionXAnim() {
    type = PositionX,
    from = 200,
    to = 10,
    repeatCount = 3,
    duration = 2,
    delay = 0,
    timing = Spring,
    spring = { Bounciness = 15 },
    start = userData.animStatus.start,
    pause = userData.animStatus.pause,
    resume = userData.animStatus.resume,
    stop = userData.animStatus.stop,
}

---
--- UI
ui {
    Label("positionX动画")
    .top(50)
    .height(100)
    .bgColor(Color(0xafaff0))
    ---为view添加动画
    .animation(positionXAnim())
    ,
    Label("点我开始positionX动画")
    .top(20)
    .padding(10, 30, 10, 30)
    .bgColor(Color(0xaaaaaa))
    .onClick(function()
        ---修改start为true，开始播放动画
        userData.animStatus.start = true
    end)
    ,
    Label("点我暂停positionX动画")
    .top(20)
    .padding(10, 30, 10, 30)
    .bgColor(Color(0xaaaaaa))
    .onClick(function()
        userData.animStatus.start = false
        userData.animStatus.pause = true
    end)
}.safeArea(SafeArea.TOP)

---
--- preview
local function preview()

    userData.animStatus = {
        start = false,
        pause = false,
        resume = false,
        stop = false }

end