实现代码

/**
 * 组件显隐动画
 */
@Component
struct AnimationDemo {
  [@State](/user/State) visible: boolean = false;
  
  build() {
    Column({ space: 20 }) {
      Button('切换显示')
        .onClick(() => {
          animateTo({
            duration: 300,
            curve: Curve.EaseInOut
          }, () => {
            this.visible = !this.visible;
          })
        })
      
      if (this.visible) {
        Column() {
          Text('动画内容')
            .fontSize(18)
        }
        .width(200)
        .height(100)
        .backgroundColor('#ff6b6b')
        .borderRadius(12)
        .transition({
          type: TransitionType.Insert,
          opacity: 0,
          translate: { y: -50 }
        })
        .transition({
          type: TransitionType.Delete,
          opacity: 0,
          translate: { y: 50 }
        })
      }
    }
    .padding(20)
  }
}

/**
 * 数字变化动画
 */
@Component
struct NumberAnimationDemo {
  [@State](/user/State) number: number = 0;
  [@State](/user/State) displayNumber: number = 0;
  private timer: number = -1;
  
  animateNumber(target: number) {
    const start = this.displayNumber;
    const diff = target - start;
    const duration = 1000;
    const steps = 60;
    const stepValue = diff / steps;
    let currentStep = 0;
    
    if (this.timer >= 0) {
      clearInterval(this.timer);
    }
    
    this.timer = setInterval(() => {
      currentStep++;
      if (currentStep >= steps) {
        this.displayNumber = target;
        clearInterval(this.timer);
        this.timer = -1;
      } else {
        this.displayNumber = start + stepValue * currentStep;
      }
    }, duration / steps);
  }
  
  aboutToDisappear() {
    if (this.timer >= 0) {
      clearInterval(this.timer);
    }
  }
  
  build() {
    Column({ space: 20 }) {
      Text(`¥${this.displayNumber.toFixed(2)}`)
        .fontSize(48)
        .fontWeight(FontWeight.Bold)
        .fontColor('#ff6b6b')
      
      Row({ space: 12 }) {
        Button('增加1000')
          .onClick(() => {
            this.number += 1000;
            this.animateNumber(this.number);
          })
        
        Button('减少500')
          .onClick(() => {
            this.number -= 500;
            this.animateNumber(this.number);
          })
      }
    }
    .padding(20)
  }
}

/**
 * 列表项动画
 */
@Component
struct ListItemAnimation {
  [@State](/user/State) items: string[] = ['项目1', '项目2', '项目3'];
  
  build() {
    Column({ space: 12 }) {
      Button('添加项目')
        .onClick(() => {
          animateTo({ duration: 300 }, () => {
            this.items.push(`项目${this.items.length + 1}`);
          })
        })
      
      List({ space: 8 }) {
        ForEach(this.items, (item: string, index: number) => {
          ListItem() {
            Row() {
              Text(item)
                .fontSize(16)
                .layoutWeight(1)
              
              Button('删除')
                .fontSize(14)
                .backgroundColor('#ff6b6b')
                .onClick(() => {
                  animateTo({ duration: 300 }, () => {
                    this.items.splice(index, 1);
                  })
                })
            }
            .width('100%')
            .padding(16)
            .backgroundColor(Color.White)
            .borderRadius(8)
          }
          .transition({
            type: TransitionType.All,
            opacity: 0,
            translate: { x: -100 }
          })
        })
      }
      .layoutWeight(1)
    }
    .padding(16)
    .width('100%')
    .height('100%')
  }
}

/**
 * 旋转加载动画
 */
@Component
struct RotateAnimation {
  [@State](/user/State) angle: number = 0;
  private timer: number = -1;
  
  startRotate() {
    this.timer = setInterval(() => {
      animateTo({ duration: 1000, curve: Curve.Linear }, () => {
        this.angle += 360;
      })
    }, 1000);
  }
  
  stopRotate() {
    if (this.timer >= 0) {
      clearInterval(this.timer);
      this.timer = -1;
    }
  }
  
  aboutToAppear() {
    this.startRotate();
  }
  
  aboutToDisappear() {
    this.stopRotate();
  }
  
  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(50)
        .height(50)
        .rotate({ angle: this.angle })
    }
  }
}

使用示例

// 使用组件动画
animateTo({ duration: 300, curve: Curve.EaseInOut }, () => {
  this.visible = !this.visible;
});

// 使用数字动画
this.animateNumber(5000);

// 列表添加动画
animateTo({ duration: 300 }, () => {
  this.items.push('新项目');
});

原理解析

1. animateTo闭包动画

animateTo({ duration: 300, curve: Curve.EaseInOut }, () => {
  this.visible = !this.visible; // 状态变化会触发动画
})

• 闭包内的状态变化会产生动画
• duration指定动画时长(毫秒)
• curve指定动画曲线

2. transition转场

.transition({
  type: TransitionType.Insert,
  opacity: 0,
  translate: { y: -50 }
})

• Insert:组件插入时的动画
• Delete:组件删除时的动画
• All:插入和删除都使用相同动画

3. 数字动画原理

• 使用setInterval逐帧更新数字
• 计算每帧的增量(目标值-当前值)/帧数
• 达到目标值后清除定时器
• 组件销毁时必须清除定时器

4. 常用动画曲线

• Curve.Linear:线性,匀速
• Curve.EaseInOut:先加速后减速,最自然
• Curve.Friction:摩擦力,有弹性
• Curve.Sharp:快速开始和结束

最佳实践

1. 动画时长: 通常使用300ms,过长会显得拖沓
2. 动画曲线: EaseInOut最自然,Friction有弹性效果
3. 性能: 避免同时执行大量动画
4. 状态管理: 动画相关状态用@State
5. 清理资源: 组件销毁时清除定时器

避坑指南

1. 忘记animateTo: 直接修改状态不会有动画
2. transition位置: transition要放在组件上,不是容器
3. 定时器泄漏: 忘记clearInterval导致内存泄漏
4. 动画冲突: 同一属性不要同时执行多个动画
5. 性能问题: 列表项过多时避免使用transition