文章目录前言为什么需要动画animateTo 基本用法5 个实战动画1. 缩放动画——按钮点击反馈2. 旋转动画——刷新指示器3. 渐变动画——淡入淡出4. 位移动画——滑入卡片5. 组合动画——点赞特效动画曲线对比性能提示写在最后前言你有没有这种感觉——写出来的 App 功能都有但就是看着土按钮点了没反应页面切换硬邦邦像 2010 年的网页。问题不在功能在动画。HarmonyOS7 给了animateTo这个神器加一行代码就能让 UI 活起来。今天我从零讲起5 种实战动画一次搞定。为什么需要动画别觉得动画是花架子。心理学研究早就证明了微交互动画能显著提升用户对产品的信任感。点击按钮有个缩放反馈用户就知道我点到了加载时有个渐变用户就知道正在处理。没有动画的界面就像没有表情的人——功能上没问题但就是让人不舒服。HarmonyOS7 提供两种动画方式方式特点适用场景animateTo显式动画精确控制点击反馈、一次性过渡animation隐式动画跟随属性变化状态驱动的持续动画这篇重点讲animateTo因为它更灵活、更好控。animateTo 基本用法先看最简单的例子——点击按钮让它变宽StateboxWidth:number100Button(点我变宽).width(this.boxWidth).height(40).onClick((){animateTo({duration:300},(){this.boxWidth200})})就这么简单。animateTo接收两个参数参数一动画配置对象参数类型默认值说明durationnumber1000动画时长mscurveCurveLinear缓动曲线delaynumber0延迟执行msiterationsnumber1重复次数-1 无限playModePlayModeNormal播放模式onFinish() void-完成回调参数二状态修改闭包在闭包里修改State变量系统会自动把变化过程做成动画。不在闭包里改的变量不会动画这是新手最容易犯的错。5 个实战动画1. 缩放动画——按钮点击反馈点击时缩到 0.9 再弹回来手感贼好StatebtnScale:number1Button(确认提交).scale({x:this.btnScale,y:this.btnScale}).onClick((){animateTo({duration:100,curve:Curve.Sharp},(){this.btnScale0.9})animateTo({duration:200,curve:Curve.Sharp,delay:100},(){this.btnScale1})})敲黑板两个animateTo叠加实现按下弹回效果。第一个 100ms 缩小第二个 delay 100ms 后弹回来。Curve.Sharp曲线让弹回有弹性感。2. 旋转动画——刷新指示器手动触发旋转适合下拉刷新这类场景StaterotateAngle:number0Image($r(app.media.refresh_icon)).width(24).height(24).rotate({angle:this.rotateAngle}).onClick((){animateTo({duration:600,curve:Curve.Linear},(){this.rotateAngle360})})每次点击累加 360 度Linear曲线保证匀速旋转。别直接赋 360那样第二次点击不会转——因为值没变动画不触发。3. 渐变动画——淡入淡出页面切换、弹窗出现最经典的效果StateopacityVal:number0Column(){Text(这段文字会淡入).fontSize(18).opacity(this.opacityVal)}.onAppear((){animateTo({duration:800,curve:Curve.EaseOut},(){this.opacityVal1})})onAppear里触发组件一显示就淡入。EaseOut曲线让开头快、结尾慢视觉上更自然。4. 位移动画——滑入卡片卡片从屏幕右边滑入StatetranslateX:number300Column(){Text(卡片内容)}.width(200).height(100).backgroundColor(#FFF3E0).translate({x:this.translateX}).onAppear((){animateTo({duration:400,curve:Curve.FastOutSlowIn},(){this.translateX0})})FastOutSlowIn就是 Material Design 标准的减速曲线开头猛后面稳手机上看着特别舒服。5. 组合动画——点赞特效缩放 旋转 渐变一起上点赞时心脏跳动感StateheartScale:number1StateheartAngle:number0StateheartOpacity:number1Image($r(app.media.heart)).width(40).height(40).scale({x:this.heartScale,y:this.heartScale}).rotate({angle:this.heartAngle}).opacity(this.heartOpacity).onClick((){animateTo({duration:150,curve:Curve.Sharp},(){this.heartScale1.3this.heartAngle15})animateTo({duration:300,curve:Curve.Sharp,delay:150},(){this.heartScale1this.heartAngle0})})闭包里同时改多个属性它们会同步动画。这就是animateTo的牛逼之处——不用管几个属性一个闭包全搞定。动画曲线对比曲线选对了动画才对味。HarmonyOS7 内置的常用曲线曲线名效果适合场景Linear匀速无加减速旋转、进度条Ease慢→快→慢通用过渡EaseIn慢→快驶出屏幕EaseOut快→慢淡入、滑入FastOutSlowIn极快→慢Material 标准卡片入场Sharp快→快中间减速按钮反馈、弹跳Friction阻尼减速滚动回弹说人话按钮反馈用Sharp入场动画用FastOutSlowIn通用场景用Ease旋转用Linear。别什么都Linear那跟没动画差不多。性能提示动画写爽了也别忘了性能只动画transform类属性scale、rotate、translate、opacity这些走 GPU 渲染60fps 无压力别动画width/height/margin——这些触发重新布局CPU 算卡如果非要做尺寸动画用scale替代width/height改变视觉效果一样但性能好 10 倍iterations: -1无限循环慎用一定要在组件销毁时停掉否则后台一直吃 CPU还有个冷知识animateTo的闭包里只改 State 变量才能触发动画。普通变量改了也不会动——别问我怎么知道的。写在最后animateTo真的好用一行代码就能让 UI 从能用变成好用。5 种实战动画覆盖了日常 90% 的场景照着抄就行。记住核心原则按钮要缩放入场要滑入转场要渐变曲线别用 Linear。想把动画玩得更深可以研究animation属性和transition转场动画搭配animateTo效果更炸。下次聊手势识别——捏合缩放、长按拖拽交互体验全靠它。
