HarmonyOS7 属性动画基础：animateTo 驱动透明度与位移动画
文章目录
- 前言
- 基础概念
- animateTo vs .animation()
- 从简到繁
- 透明度动画
- 位移动画
- 组合复位
- 代码详解
- 完整状态管理
- 动画目标组件
- 按钮控制面板
- 实时数值显示
- Curve 曲线对比
- 常见问题
- 进阶技巧
- 写在最后
前言
ArkUI 有两种动画模式：声明式动画（.animation()）和显式动画（animateTo）。前者适合"状态变化自动过渡"的场景，后者适合"在特定时刻触发动画"的场景。今天聊animateTo的基础用法，用透明度和位移两个属性来入门。
基础概念
animateTo vs .animation()
| 特性 | .animation() | animateTo |
|---|---|---|
| 触发方式 | 状态变化自动触发 | 手动调用触发 |
| 代码位置 | 组件属性 | 事件回调中 |
| 适用场景 | 属性跟随状态变化 | 点击按钮触发动画 |
| 多次触发 | 每次值变化都触发 | 只在调用时触发 |
animateTo的函数签名：
animateTo({duration:500,curve:Curve.EaseInOut},()=>{// 在这里修改状态变量，修改会走动画})第一个参数是动画配置，第二个是回调函数。回调里修改的状态变量会以动画方式过渡到新值。
从简到繁
透明度动画
Button('淡出').onClick(()=>{animateTo({duration:500,curve:Curve.EaseInOut},()=>{this.opacityValue=0.2})})Button('淡入').onClick(()=>{animateTo({duration:500,curve:Curve.EaseInOut},()=>{this.opacityValue=1})})点击"淡出"时，opacityValue从 1 渐变到 0.2，持续 500ms，使用EaseInOut曲线（先慢后快再慢）。
位移动画
Button('右移').onClick(()=>{animateTo({duration:600,curve:Curve.EaseOut},()=>{this.offsetX=60})})方块向右平移 60vp，EaseOut曲线让运动"先快后慢"，有减速感。
组合复位
Button('复位').onClick(()=>{animateTo({duration:500,curve:Curve.FastOutLinearIn},()=>{this.opacityValue=1this.offsetX=0})})一个animateTo调用里同时修改多个状态变量，透明度和位移会同时做过渡动画。FastOutLinearIn曲线快速开始然后线性减速。
代码详解
完整状态管理
@Entry@Componentstruct BasicPropertyAnimation{@StateopacityValue:number=1@StateoffsetX:number=0// ...}只需要两个状态变量，一个控制透明度，一个控制水平偏移。
动画目标组件
Column().width(80).height(80).backgroundColor('#6BCB77').borderRadius(12).opacity(this.opacityValue).translate({x:this.offsetX}).opacity()和.translate()都是可动画属性——框架知道怎么在两个值之间做插值。
按钮控制面板
Row({space:12}){Button('淡出').onClick(()=>{/* ... */})Button('淡入').onClick(()=>{/* ... */})Button('右移').onClick(()=>{/* ... */})Button('复位').onClick(()=>{/* ... */})}.width('100%').justifyContent(FlexAlign.SpaceEvenly).margin({top:12})四个按钮一字排开，用Row({ space: 12 })设置间距，SpaceEvenly均匀分布。
实时数值显示
Text(`当前透明度:${this.opacityValue.toFixed(1)}| 偏移:${this.offsetX}vp`).fontSize(12).fontColor('#999999').margin({top:12})动画过程中，数值是连续变化的。toFixed(1)保留一位小数，显示更整洁。
Curve 曲线对比
这个案例用到了三种曲线，对比一下：
| Curve | 运动特点 | 视觉效果 |
|---|---|---|
EaseInOut | 先慢后快再慢 | 最自然，适合大多数过渡 |
EaseOut | 先快后慢 | 有减速感，适合"停下来" |
FastOutLinearIn | 快速启动，线性减速 | 有点"冲"的感觉 |
选曲线的原则：
- 入场/出现：用
EaseOut（快速出现，慢慢停稳） - 出场/消失：用
EaseIn（慢慢开始，快速消失） - 状态切换：用
EaseInOut（平滑过渡）
常见问题
Q：animateTo 的回调里能写异步操作吗？
不能。回调里只应该写状态变量的赋值操作。异步操作放在animateTo外面。
Q：动画还没结束又触发了新动画？
新动画会"打断"旧动画，从当前值开始过渡到新目标值。不会叠加。
Q：怎么知道动画结束了？
animateTo的第一个参数支持onFinish回调：
animateTo({duration:500,curve:Curve.EaseInOut,onFinish:()=>{console.info('动画完成')}},()=>{this.opacityValue=0.2})
animateTo的回调函数里不要写非状态修改的代码（比如网络请求、日志打印）。它的作用是"告诉框架哪些状态变量需要做动画"，不是通用的回调。
进阶技巧
链式动画：在
onFinish里触发下一个animateTo，形成动画序列。不同属性不同时长：如果需要透明度和位移用不同的动画时长，可以分两次
animateTo调用。延迟启动：用
setTimeout包裹animateTo实现延迟动画，或者用animateTo的delay参数。
写在最后
animateTo是 ArkUI 动画系统的"手动模式"，给你精确的触发控制。配合Curve曲线和duration时长，能做出各种节奏感不同的动画效果。今天用透明度和位移入了门，后面的文章会在这个基础上扩展到缩放、旋转、颜色变化等更多属性。