📚 鸿蒙进阶专栏 · 第 17 篇 / 共 20 篇（进阶篇 11-20）
上一篇：项目分层架构 ｜ 下一篇：权限管理：相机、定位、通知的正确申请

目录

动效入门：属性动画、显式动画与转场

一、属性动画 animation：最省事

二、显式动画 animateTo：精确控制

三、转场 transition：出现与消失

四、曲线怎么选

五、下一篇预告

---

 

动效入门：属性动画、显式动画与转场

同样是列表页，有动效的 App 高级感直接翻倍。这篇讲鸿蒙动效的三种武器，每种都配能直接跑的例子。

一、属性动画 animation：最省事

给组件加 .animation()，当它的属性变化时自动平滑过渡：

@Entry
@Component
struct HeartDemo {
  @State big: boolean = false

  build() {
    Column({ space: 20 }) {
      Text('❤')
        .fontSize(this.big ? 80 : 40)
        .fontColor(this.big ? '#D93026' : '#999')
        .animation({ duration: 300, curve: Curve.EaseInOut })  // 挂在属性后
        .onClick(() => { this.big = !this.big })   // 只改状态
    }
  }
}

二、显式动画 animateTo：精确控制

想让「变化」本身被动画包裹（包括布局变化），用 animateTo：

@State expanded: boolean = false

Button(expanded ? '收起' : '展开')
  .onClick(() => {
    animateTo({ duration: 350, curve: Curve.Friction }, () => {
      this.expanded = !this.expanded    // 闭包内的所有变化都会被动画
    })
  })

// 高度跟随 expanded，展开时平滑长高
Column() { ... }
  .height(this.expanded ? 300 : 0)
  .opacity(this.expanded ? 1 : 0)

三、转场 transition：出现与消失

配合 if 条件渲染，组件插入/移除时的进出场动画：

@State show: boolean = false

if (this.show) {
  Text('我是弹出的内容')
    .transition(TransitionEffect.OPACITY
      .combine(TransitionEffect.translate({ y: 60 })))
}

Button(show ? '关闭' : '打开')
  .onClick(() => { this.show = !this.show })

四、曲线怎么选

曲线	感觉	场景
Curve.EaseInOut	缓进缓出，克制	通用默认
Curve.Friction	带一点弹，活泼	展开/抽屉
Curve.Linear	匀速	循环动画、进度
springMotion	物理弹簧，跟手	拖拽、跟手感

⚠️ 动效守则：200–400ms；一屏同时最多 1–2 个动画在跑；列表项增删务必加转场，否则会「跳」。动效不是越多越好。

五、下一篇预告

界面漂亮了，能力也要跟上：调用相机、定位、通知，都绕不开权限申请。下一篇讲对。

---

进阶系列持续更新中，点赞 + 收藏 + 关注不迷路。
遇到问题评论区贴报错信息 + 关键代码，看到都会回。也欢迎留言点播你想看的进阶主题。