文章目录
- 属性动画（.animation）核心
- 1. 动画定义
- 2. 适用场景
- 3. 核心配置项
- 代码逐模块解析
- 1 状态变量定义
- 2 动画 1：宽高尺寸动画（change size）
- 3 动画 2：旋转角度动画（change rotate angle）
- 运行效果
- 完整代码
- 总结
属性动画（.animation）核心
1. 动画定义
属性动画是 ArkUI 内置的隐式动画能力，通过.animation()方法绑定到组件上。
当组件绑定的状态变量发生变化时（宽、高、角度、颜色等），系统自动完成过渡动画，无需手动控制帧刷新。
2. 适用场景
- 组件宽高、尺寸变化
- 旋转、位移、缩放、透明度
- 背景色、字体大小等 UI 属性变化
- 点击、长按、页面切换等交互过渡
3. 核心配置项
| 参数 | 说明 |
|---|---|
duration | 动画时长，单位：毫秒 |
curve | 动画曲线（速度变化规律） |
delay | 动画延迟执行时间 |
iterations | 动画播放次数，-1表示无限循环 |
playMode | 动画播放模式（正播/倒播/交替） |
expectedFrameRateRange | 期望帧率范围，优化流畅度 |
代码逐模块解析
1 状态变量定义
@StatewidthSize:number=250@StateheightSize:number=100@StaterotateAngle:number=0@Stateflag:boolean=true@State装饰的变量为响应式状态- 变量变化 → 触发 UI 更新 → 自动触发
.animation动画 - 是属性动画的核心驱动源
2 动画 1：宽高尺寸动画（change size）
Button('change size').onClick(()=>{if(this.flag){this.widthSize=150this.heightSize=60}else{this.widthSize=250this.heightSize=100}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 angle）
Button('change rotate angle').onClick(()=>{this.rotateAngle=90}).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.ets@Entry@Componentstruct AttrAnimationExample{@StatewidthSize:number=250@StateheightSize:number=100@StaterotateAngle:number=0@Stateflag:boolean=truebuild(){Column(){Button('change size').onClick(()=>{if(this.flag){this.widthSize=150this.heightSize=60}else{this.widthSize=250this.heightSize=100}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.rotateAngle=90}).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 为高级优化项
用于提升动画流畅度，降低性能消耗。
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力
