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.opacityValue0.2})})Button(淡入).onClick((){animateTo({duration:500,curve:Curve.EaseInOut},(){this.opacityValue1})})点击淡出时opacityValue从 1 渐变到 0.2持续 500ms使用EaseInOut曲线先慢后快再慢。位移动画Button(右移).onClick((){animateTo({duration:600,curve:Curve.EaseOut},(){this.offsetX60})})方块向右平移 60vpEaseOut曲线让运动先快后慢有减速感。组合复位Button(复位).onClick((){animateTo({duration:500,curve:Curve.FastOutLinearIn},(){this.opacityValue1this.offsetX0})})一个animateTo调用里同时修改多个状态变量透明度和位移会同时做过渡动画。FastOutLinearIn曲线快速开始然后线性减速。代码详解完整状态管理EntryComponentstruct BasicPropertyAnimation{StateopacityValue:number1StateoffsetX:number0// ...}只需要两个状态变量一个控制透明度一个控制水平偏移。动画目标组件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平滑过渡常见问题QanimateTo 的回调里能写异步操作吗不能。回调里只应该写状态变量的赋值操作。异步操作放在animateTo外面。Q动画还没结束又触发了新动画新动画会打断旧动画从当前值开始过渡到新目标值。不会叠加。Q怎么知道动画结束了animateTo的第一个参数支持onFinish回调animateTo({duration:500,curve:Curve.EaseInOut,onFinish:(){console.info(动画完成)}},(){this.opacityValue0.2})animateTo的回调函数里不要写非状态修改的代码比如网络请求、日志打印。它的作用是告诉框架哪些状态变量需要做动画不是通用的回调。进阶技巧链式动画在onFinish里触发下一个animateTo形成动画序列。不同属性不同时长如果需要透明度和位移用不同的动画时长可以分两次animateTo调用。延迟启动用setTimeout包裹animateTo实现延迟动画或者用animateTo的delay参数。写在最后animateTo是 ArkUI 动画系统的手动模式给你精确的触发控制。配合Curve曲线和duration时长能做出各种节奏感不同的动画效果。今天用透明度和位移入了门后面的文章会在这个基础上扩展到缩放、旋转、颜色变化等更多属性。