[鸿蒙2025领航者闯关] ArkUI动画实战

问题描述

如何在 HarmonyOS 中实现流畅且性能优良的动画效果?开发者常遇到:

• 动画卡顿,帧率不稳定
• 不知道用 animateTo 还是 transition
• 列表动画性能差
• 深色模式切换没有过渡效果

关键字:ArkUI 动画 、animateTo 、transition 、性能优化

解决方案

1. 动画核心原理

ArkUI动画系统:
┌─────────────────────────────────┐
│ animateTo (显式动画)            │
│ - 通过改变状态触发动画          │
│ - 适用于交互动画                │
└─────────────────────────────────┘
​
┌─────────────────────────────────┐
│ transition (转场动画)           │
│ - 组件出现/消失时的动画         │
│ - 适用于列表项、弹窗            │
└─────────────────────────────────┘
​
┌─────────────────────────────────┐
│ animation (属性动画)            │
│ - 绑定到特定属性                │
│ - 适用于简单动画                │
└─────────────────────────────────┘

2. 完整实现代码

案例 1: 卡片点击缩放动画

@Component
struct AnimatedCard {
  @State isPressed: boolean = false;
  
  build() {
    Column() {
      Text('点击我')
        .fontSize(16)
        .fontColor(Color.White);
    }
    .width(200)
    .height(100)
    .backgroundColor('#FF6B3D')
    .borderRadius(12)
    // ✅ 使用scale实现缩放
    .scale(this.isPressed ? { x: 0.95, y: 0.95 } : { x: 1, y: 1 })
    // ✅ 绑定动画属性
    .animation({
      duration: 200,
      curve: Curve.EaseOut
    })
    // ✅ 点击事件
    .onTouch((event: TouchEvent) => {
      if (event.type === TouchType.Down) {
        this.isPressed = true;
      } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
        this.isPressed = false;
      }
    })
  }
}

效果: 点击时卡片缩小到 95%,松开恢复,有弹性感

案例 2: 列表项出现动画

@Component
struct AnimatedList {
  @State items: string[] = ['项目1', '项目2', '项目3'];
  
  build() {
    List({ space: 12 }) {
      ForEach(this.items, (item: string, index: number) => {
        ListItem() {
          this.buildListItemContent(item);
        }
        // ✅ 添加transition实现出现动画
        .transition(TransitionEffect.OPACITY
          .animation({ duration: 300, delay: index * 100 })  // 错开延迟
          .combine(TransitionEffect.translate({ y: 50 }))
        )
      })
    }
    .width('100%')
  }
  
  @Builder
  buildListItemContent(item: string) {
    Row() {
      Text(item)
        .fontSize(16)
        .fontColor('#333333');
    }
    .width('100%')
    .padding(16)
    .backgroundColor(Color.White)
    .borderRadius(12)
  }
  
  // 添加新项目
  addItem(): void {
    this.items.push(`项目${this.items.length + 1}`);
  }
}

效果: 新增列表项从下方淡入滑入,多个项目错开出现

案例 3: 主题切换过渡动画

@Entry
@Component
struct ThemeSwitchDemo {
  @State isDark: boolean = false;
  
  build() {
    Column({ space: 20 }) {
      // 标题栏
      Row() {
        Text('主题切换演示')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          // ✅ 文字颜色动画
          .fontColor(this.isDark ? '#F0F0F0' : '#2D1F15')
          .animation({
            duration: 300,
            curve: Curve.EaseInOut
          })
      }
      .width('100%')
      .height(56)
      .padding({ left: 16, right: 16 })
      // ✅ 背景色动画
      .backgroundColor(this.isDark ? '#2C2C2C' : '#FFFFFF')
      .animation({
        duration: 300,
        curve: Curve.EaseInOut
      })
      
      // 内容区域
      Column({ space: 12 }) {
        this.buildCard('卡片1');
        this.buildCard('卡片2');
        this.buildCard('卡片3');
      }
      .width('100%')
      .layoutWeight(1)
      .padding(16)
      
      // 切换按钮
      Button(this.isDark ? '☀️ 浅色模式' : '🌙 深色模式')
        .width('90%')
        .height(48)
        .fontSize(16)
        .backgroundColor('#FF6B3D')
        .onClick(() => {
          // ✅ 使用animateTo包裹状态变化
          animateTo({
            duration: 300,
            curve: Curve.EaseInOut
          }, () => {
            this.isDark = !this.isDark;
          });
        })
    }
    .width('100%')
    .height('100%')
    // ✅ 主背景动画
    .backgroundColor(this.isDark ? '#1A1A1A' : '#F5F5F5')
    .animation({
      duration: 300,
      curve: Curve.EaseInOut
    })
  }
  
  @Builder
  buildCard(title: string) {
    Column() {
      Text(title)
        .fontSize(16)
        .fontColor(this.isDark ? '#F0F0F0' : '#2D1F15')
        .animation({
          duration: 300,
          curve: Curve.EaseInOut
        })
    }
    .width('100%')
    .height(80)
    .justifyContent(FlexAlign.Center)
    .backgroundColor(this.isDark ? '#2C2C2C' : '#FFFFFF')
    .borderRadius(12)
    .animation({
      duration: 300,
      curve: Curve.EaseInOut
    })
  }
}

效果: 点击按钮后,背景、卡片、文字颜色平滑过渡,无闪烁

案例 4: 浮动按钮展开动画

@Component
struct FloatingActionButton {
  @State isExpanded: boolean = false;
  
  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      // 展开的子按钮
      if (this.isExpanded) {
        Column({ space: 16 }) {
          this.buildSubButton('📝', '记录', 2);
          this.buildSubButton('📊', '统计', 1);
          this.buildSubButton('⚙️', '设置', 0);
        }
        .position({ x: 0, y: -180 })
        // ✅ 展开动画
        .transition(TransitionEffect.OPACITY
          .animation({ duration: 200 })
          .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }))
        )
      }
      
      // 主按钮
      Column() {
        Text(this.isExpanded ? '✕' : '+')
          .fontSize(32)
          .fontColor(Color.White)
          // ✅ 图标旋转动画
          .rotate({ angle: this.isExpanded ? 45 : 0 })
          .animation({
            duration: 300,
            curve: Curve.EaseInOut
          })
      }
      .width(56)
      .height(56)
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#FF6B3D')
      .borderRadius(28)
      // ✅ 阴影动画
      .shadow({
        radius: this.isExpanded ? 12 : 8,
        color: 'rgba(255, 107, 61, 0.4)',
        offsetY: this.isExpanded ? 6 : 4
      })
      .animation({
        duration: 300,
        curve: Curve.EaseOut
      })
      .onClick(() => {
        animateTo({
          duration: 300,
          curve: Curve.EaseInOut
        }, () => {
          this.isExpanded = !this.isExpanded;
        });
      })
    }
    .width('100%')
    .height('100%')
    .padding({ right: 24, bottom: 24 })
  }
  
  @Builder
  buildSubButton(icon: string, label: string, index: number) {
    Row({ space: 12 }) {
      Text(label)
        .fontSize(14)
        .fontColor('#333333')
        .padding({ left: 12, right: 12, top: 8, bottom: 8 })
        .backgroundColor(Color.White)
        .borderRadius(8)
        .shadow({
          radius: 4,
          color: 'rgba(0, 0, 0, 0.1)',
          offsetY: 2
        })
      
      Column() {
        Text(icon).fontSize(24);
      }
      .width(48)
      .height(48)
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.White)
      .borderRadius(24)
      .shadow({
        radius: 6,
        color: 'rgba(0, 0, 0, 0.15)',
        offsetY: 3
      })
    }
    .justifyContent(FlexAlign.End)
    // ✅ 子按钮错开出现
    .transition(TransitionEffect.OPACITY
      .animation({ duration: 200, delay: index * 50 })
      .combine(TransitionEffect.translate({ x: 50 }))
    )
  }
}

效果: 点击主按钮,子按钮从右侧淡入滑入,错开出现

案例 5: 数据加载骨架屏动画

@Component
struct SkeletonLoading {
  @State isLoading: boolean = true;
  @State shimmerOffset: number = 0;
  private timerId: number = -1;
  
  aboutToAppear(): void {
    // ✅ 启动闪烁动画
    this.startShimmer();
  }
  
  aboutToDisappear(): void {
    // 清理定时器
    if (this.timerId >= 0) {
      clearInterval(this.timerId);
    }
  }
  
  /**
   * 启动闪烁动画
   */
  private startShimmer(): void {
    this.timerId = setInterval(() => {
      animateTo({
        duration: 1500,
        curve: Curve.Linear
      }, () => {
        this.shimmerOffset = (this.shimmerOffset + 1) % 100;
      });
    }, 1500);
  }
  
  build() {
    Column({ space: 16 }) {
      ForEach([1, 2, 3], (index: number) => {
        this.buildSkeletonCard();
      })
    }
    .width('100%')
    .padding(16)
  }
  
  @Builder
  buildSkeletonCard() {
    Column({ space: 12 }) {
      // 标题骨架
      Row()
        .width('60%')
        .height(20)
        .backgroundColor('#E0E0E0')
        .borderRadius(4)
        .linearGradient({
          angle: 90,
          colors: [
            [0xE0E0E0, 0.0],
            [0xF0F0F0, 0.5],
            [0xE0E0E0, 1.0]
          ]
        })
        // ✅ 闪烁动画
        .animation({
          duration: 1500,
          iterations: -1,
          playMode: PlayMode.Alternate
        })
      
      // 内容骨架
      Row()
        .width('100%')
        .height(16)
        .backgroundColor('#E0E0E0')
        .borderRadius(4)
        .linearGradient({
          angle: 90,
          colors: [
            [0xE0E0E0, 0.0],
            [0xF0F0F0, 0.5],
            [0xE0E0E0, 1.0]
          ]
        })
        .animation({
          duration: 1500,
          iterations: -1,
          playMode: PlayMode.Alternate
        })
      
      Row()
        .width('80%')
        .height(16)
        .backgroundColor('#E0E0E0')
        .borderRadius(4)
        .linearGradient({
          angle: 90,
          colors: [
            [0xE0E0E0, 0.0],
            [0xF0F0F0, 0.5],
            [0xE0E0E0, 1.0]
          ]
        })
        .animation({
          duration: 1500,
          iterations: -1,
          playMode: PlayMode.Alternate
        })
    }
    .width('100%')
    .padding(16)
    .backgroundColor(Color.White)
    .borderRadius(12)
  }
}

效果: 加载时显示闪烁的骨架屏,提升用户体验

关键要点

1. 动画性能优化

✅ 优先使用 transform 属性:

// ✅ 性能好 - GPU加速
.scale({ x: 0.95, y: 0.95 })
.translate({ x: 10, y: 10 })
.rotate({ angle: 45 })
.opacity(0.5)
​
// ❌ 性能差 - 触发重排
.width(200)  // 不要用于动画
.height(100)  // 不要用于动画

2. 曲线选择

// 常用动画曲线
Curve.EaseOut      // 淡出效果,适合出现动画
Curve.EaseIn       // 淡入效果,适合消失动画
Curve.EaseInOut    // 平滑过渡,适合状态切换
Curve.Linear       // 线性,适合循环动画
Curve.Sharp        // 锐利,适合点击反馈

3. 避免过度动画

❌ 不要这样做:

// 每个属性都加动画,性能差
.width(this.w).animation({ duration: 300 })
.height(this.h).animation({ duration: 300 })
.backgroundColor(this.bg).animation({ duration: 300 })
.fontColor(this.color).animation({ duration: 300 })

✅ 推荐做法:

// 只对关键属性添加动画
.backgroundColor(this.bg)
.fontColor(this.color)
.animation({  // 统一动画配置
  duration: 300,
  curve: Curve.EaseInOut
})

4. 列表动画优化

// ✅ 使用cachedCount提升性能
List({ space: 12 }) {
  ForEach(this.items, (item: Item) => {
    ListItem() {
      this.buildListItem(item);
    }
    .transition(TransitionEffect.OPACITY)
  })
}
.cachedCount(5)  // 缓存5个列表项

最佳实践

1. animateTo vs animation

animateTo:

• 用于复杂交互动画

• 可以同时控制多个属性

• 适合用户操作触发的动画

  Button('点击')
  .onClick(() => {
  animateTo({ duration: 300 }, () => {
  this.size = 100;
  this.color = Color.Red;
  this.rotation = 45;
  });
  })

animation:

• 用于简单属性动画

• 绑定到单个组件

• 适合状态变化时自动播放

  Text('文字')
  .fontSize(this.size)
  .animation({ duration: 300 })

2. 组合动画

// ✅ 使用combine组合多个效果
.transition(
  TransitionEffect.OPACITY
    .animation({ duration: 300 })
    .combine(TransitionEffect.translate({ y: 50 }))
    .combine(TransitionEffect.scale({ x: 0.8, y: 0.8 }))
)

3. 错开动画

// ✅ 使用delay制造错开效果
ForEach(this.items, (item: Item, index: number) => {
  ListItem() {
    // ...
  }
  .transition(TransitionEffect.OPACITY
    .animation({ 
      duration: 300,
      delay: index * 100  // 每个延迟100ms
    })
  )
})

常见问题

Q1: 动画卡顿怎么办?

检查:

1. 是否改变了 width/height 等布局属性
2. 是否在动画中执行复杂计算
3. 列表项是否过多

解决:

// ✅ 使用transform代替width/height
.scale({ x: 1.2, y: 1.2 })  // 不触发重排

// ✅ 使用cachedCount
.cachedCount(10)

// ✅ 使用renderGroup
.renderGroup(true)

Q2: 列表动画性能差?

// ✅ 优化方案
List() {
  LazyForEach(this.dataSource, (item: Item) => {
    ListItem() {
      // 简化动画
      this.buildListItem(item);
    }
    // 只在插入/删除时播放动画
    .transition(TransitionEffect.OPACITY
      .animation({ duration: 200 })  // 缩短时长
    )
  })
}
.cachedCount(10)  // 增加缓存
.renderGroup(true)  // 开启渲染组

总结

✅ 性能优先 : 使用 transform 属性 ✅ 合理选择 : animateTo vs animation ✅ 曲线优化 : 根据场景选择曲线 ✅ 组合动画 : combine 制造复杂效果 ✅ 错开播放 : delay 制造层次感 ✅ 列表优化: cachedCount + renderGroup

参考资料

• ArkUI 动画开发指南
• 显式动画 animateTo
• 转场动画 TransitionEffect