TMUI4x(鸿蒙Next)

Appearance

广告位招租意向联系我
TMUI4x2025-12-02
1101
4.4m

ICanvas - 动画系统 ​

Tween 动画类 ​

Tween是画布动画系统的核心类，提供强大的补间动画功能，支持动画队列、缓动函数、循环播放等高级特性。

属性 ​

Tween类内部管理动画状态，开发者无需直接访问这些属性。

方法 ​

构造函数 ​

constructor(target: Shape, canvas: ICanvas) ​

创建Tween动画实例

  • target: 要执行动画的图形对象
  • canvas: 画布实例

动画控制方法 ​

to(props: UTSJSONObject, duration: number = 1000): Tween ​

设置动画目标属性值

  • props: 目标属性对象
  • duration: 动画持续时间（毫秒）
  • 返回值: 当前Tween实例

addTo(props: UTSJSONObject, duration: number = 1000, easing: EasingFunction = this.easing): Tween ​

添加动画到队列

  • props: 目标属性对象
  • duration: 动画持续时间（毫秒）
  • easing: 缓动函数
  • 返回值: 当前Tween实例

delay(ms: number): Tween ​

添加延时到动画队列

  • ms: 延时时间（毫秒）
  • 返回值: 当前Tween实例

start(): Tween ​

开始播放动画

  • 返回值: 当前Tween实例

stop(): Tween ​

停止播放动画

  • 返回值: 当前Tween实例

clearAnimations(): Tween ​

清除所有动画和队列

  • 返回值: 当前Tween实例

配置方法 ​

setEasing(easingFunction: EasingFunction): Tween ​

设置缓动函数

  • easingFunction: 缓动函数
  • 返回值: 当前Tween实例

setLoop(count: number): Tween ​

设置循环次数

  • count: 循环次数（0=不循环，-1=无限循环）
  • 返回值: 当前Tween实例

setYoyo(value: boolean): Tween ​

设置是否往返播放

  • value: 是否往返播放
  • 返回值: 当前Tween实例

回调方法 ​

onUpdate(callback: (progress: number) => void): Tween ​

设置动画更新回调

  • callback: 更新回调函数
  • 返回值: 当前Tween实例

onComplete(callback: () => void): Tween ​

设置动画完成回调

  • callback: 完成回调函数
  • 返回值: 当前Tween实例

销毁方法 ​

destroy(): void ​

销毁动画实例，清理所有资源

缓动函数 (Easing) ​

内置的缓动函数库，提供多种动画效果：

函数名说明效果
Easing.linear线性缓动匀速变化
Easing.easeInQuad二次方缓入慢开始
Easing.easeOutQuad二次方缓出慢结束
Easing.easeInOutQuad二次方缓入缓出慢开始和结束
Easing.easeInCubic三次方缓入更慢开始
Easing.easeOutCubic三次方缓出更慢结束
Easing.easeInOutCubic三次方缓入缓出更慢开始和结束
Easing.easeInElastic弹性缓入弹性效果开始
Easing.easeOutElastic弹性缓出弹性效果结束
Easing.easeInOutElastic弹性缓入缓出弹性效果开始和结束

使用示例 ​

基础动画 ​

typescript
// 创建图形
const circle = new ICircle({
    x: 100,
    y: 100,
    radius: 50,
    fill: '#ff0000'
}, canvas);

// 创建动画
const tween = new Tween(circle, canvas);

// 移动到新位置
tween.to({ x: 200, y: 200 }, 1000)
    .start();

动画队列 ​

typescript
// 创建复杂的动画序列
tween.to({ x: 200 }, 500)           // 向右移动
    .to({ y: 200 }, 500)            // 向下移动
    .delay(200)                     // 延时200ms
    .to({ rotation: 360 }, 1000)    // 旋转360度
    .to({ scaleX: 2, scaleY: 2 }, 500)  // 放大2倍
    .start();

缓动函数 ​

typescript
// 使用不同的缓动效果
tween.to({ x: 300 }, 1000)
    .setEasing(Easing.easeOutElastic)  // 弹性效果
    .start();

// 或者链式调用
tween.to({ y: 300 }, 1000, Easing.easeInOutCubic)
    .start();

循环和往返 ​

typescript
// 无限循环
tween.to({ rotation: 360 }, 1000)
    .setLoop(-1)        // 无限循环
    .start();

// 往返播放
tween.to({ x: 200 }, 1000)
    .setLoop(3)         // 循环3次
    .setYoyo(true)      // 往返播放
    .start();

回调函数 ​

typescript
tween.to({ x: 200 }, 1000)
    .onUpdate((progress) => {
        console.log('动画进度:', progress);
    })
    .onComplete(() => {
        console.log('动画完成!');
    })
    .start();

复杂动画组合 ​

typescript
// 创建一个复杂的动画序列
const complexTween = new Tween(shape, canvas);

complexTween.to({ x: 100 }, 500, Easing.easeOutQuad)
    .to({ y: 100 }, 500, Easing.easeInQuad)
    .delay(300)
    .to({ rotation: 180, scaleX: 1.5 }, 800, Easing.easeInOutElastic)
    .to({ opacity: 0.5 }, 400)
    .setLoop(2)
    .setYoyo(true)
    .onUpdate((progress) => {
        console.log(`动画进度: ${(progress * 100).toFixed(1)}%`);
    })
    .onComplete(() => {
        console.log('复杂动画完成!');
    })
    .start();

动画队列机制 ​

Tween支持动画队列，可以按顺序执行多个动画：

  1. 顺序执行: 动画按添加顺序依次执行
  2. 延时支持: 可以在队列中插入延时
  3. 循环播放: 整个队列可以循环播放
  4. 往返播放: 支持往返播放效果

注意事项 ​

  1. 动画会自动处理图形属性的插值计算
  2. 只有数字类型的属性才能进行动画
  3. 动画队列会按顺序执行，支持延时
  4. 循环和往返功能会影响整个动画队列
  5. 记得在组件销毁时调用destroy()清理资源
  6. 缓动函数可以自定义，只需实现(t: number) => number接口
  7. 动画会自动更新画布，无需手动调用渲染方法
最近更新