文章目录属性动画.animation核心1. 动画定义2. 适用场景3. 核心配置项代码逐模块解析1 状态变量定义2 动画 1宽高尺寸动画change size3 动画 2旋转角度动画change rotate angle运行效果完整代码总结属性动画.animation核心1. 动画定义属性动画是 ArkUI 内置的隐式动画能力通过.animation()方法绑定到组件上。当组件绑定的状态变量发生变化时宽、高、角度、颜色等系统自动完成过渡动画无需手动控制帧刷新。2. 适用场景组件宽高、尺寸变化旋转、位移、缩放、透明度背景色、字体大小等 UI 属性变化点击、长按、页面切换等交互过渡3. 核心配置项参数说明duration动画时长单位毫秒curve动画曲线速度变化规律delay动画延迟执行时间iterations动画播放次数-1表示无限循环playMode动画播放模式正播/倒播/交替expectedFrameRateRange期望帧率范围优化流畅度代码逐模块解析1 状态变量定义StatewidthSize:number250StateheightSize:number100StaterotateAngle:number0Stateflag:booleantrueState装饰的变量为响应式状态变量变化 → 触发 UI 更新 → 自动触发.animation动画是属性动画的核心驱动源2 动画 1宽高尺寸动画change sizeButton(change size).onClick((){if(this.flag){this.widthSize150this.heightSize60}else{this.widthSize250this.heightSize100}this.flag!this.flag}).width(this.widthSize).height(this.heightSize).animation({duration:2000,curve:Curve.EaseOut,iterations:3,playMode:PlayMode.Normal})3 动画 2旋转角度动画change rotate angleButton(change rotate angle).onClick((){this.rotateAngle90}).rotate({angle:this.rotateAngle}).animation({duration:1200,curve:Curve.Friction,delay:500,iterations:-1,playMode:PlayMode.Alternate,expectedFrameRateRange:{min:20,max:120,expected:90,}})运行效果点击 change size按钮在 150×60 和 250×100 之间切换平滑过渡播放 3 次后停止点击 change rotate angle延迟 500ms 开始旋转在 0° ~ 90° 之间无限来回旋转动画流畅高帧率优化完整代码// xxx.etsEntryComponentstruct AttrAnimationExample{StatewidthSize:number250StateheightSize:number100StaterotateAngle:number0Stateflag:booleantruebuild(){Column(){Button(change size).onClick((){if(this.flag){this.widthSize150this.heightSize60}else{this.widthSize250this.heightSize100}this.flag!this.flag}).margin(30).width(this.widthSize).height(this.heightSize).animation({duration:2000,curve:Curve.EaseOut,iterations:3,playMode:PlayMode.Normal})Button(change rotate angle).onClick((){this.rotateAngle90}).margin(50).rotate({angle:this.rotateAngle}).animation({duration:1200,curve:Curve.Friction,delay:500,iterations:-1,// 设置-1表示动画无限循环playMode:PlayMode.Alternate,expectedFrameRateRange:{min:20,max:120,expected:90,}})}.width(100%).margin({top:20})}}总结.animation() 必须绑定在组件上动画作用于当前组件不影响兄弟/父组件。只有 State 变量变化才能触发动画普通变量修改不会驱动动画执行。iterations: -1 代表无限循环是官方推荐的常驻动画用法。playMode: Alternate 实现往返动画无需手动反向设置属性系统自动完成。expectedFrameRateRange 为高级优化项用于提升动画流畅度降低性能消耗。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力