1# 显式动画 2 3> **说明：** 4> 5> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 6 7 8| 接口名称 | 功能描述 | 9| ---------------------------------------- | ---------------------------------------- | 10| animateTo(value: [AnimationOptions](#animationoptions对象说明), event: ()=> void) : void | 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。<br/>event指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。 | 11 12 13## AnimationOptions对象说明 14 15| 名称 | 类型 | 必填 | 默认值 | 描述 | 16| ---------- | ------------------------- | ----- | ------ | ----------------------------------- | 17| duration | number | 否 | 1000 | 动画持续时间，单位为毫秒。 | 18| tempo | number | 否 | 1.0 | 动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。 | 19| curve | Curve \| Curves | 否 | Curve.Linear | 动画曲线。 | 20| delay | number | 否 | 0 | 单位为ms(毫秒)，默认不延时播放。 | 21| iterations | number | 否 | 1 | 默认播放一次，设置为-1时表示无限次播放。 | 22| playMode | [PlayMode](ts-appendix-enums.md#playmode)| 否 | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 | 23| onFinish | () => void | 否 | - | 动效播放完成回调。 | 24 25## 示例 26 27```ts 28// xxx.ets 29@Entry 30@Component 31struct AnimateToExample { 32 @State widthSize: number = 200 33 @State heightSize: number = 100 34 private flag: boolean = true 35 36 build() { 37 Column() { 38 Button('click me') 39 .width(this.widthSize) 40 .height(this.heightSize) 41 .backgroundColor(0x317aff) 42 .onClick((event: ClickEvent) => { 43 // 对Button组件的宽高属性进行动画配置 44 if (this.flag) { 45 animateTo({ 46 duration: 1000, // 动画时长 47 tempo: 0.5, // 播放速率 48 curve: Curve.EaseInOut, // 动画曲线 49 delay: 200, // 动画延迟 50 iterations: 1, // 播放次数 51 playMode: PlayMode.Normal, // 动画模式 52 onFinish: () => { 53 console.info('play end') 54 } 55 }, () => { 56 this.widthSize = 100 57 this.heightSize = 50 58 }) 59 } else { 60 animateTo({ 61 duration: 200, // 动画时长 62 curve: Curve.Ease, // 动画曲线 63 delay: 200, // 动画延迟 64 iterations: 1, // 播放次数 65 playMode: PlayMode.Normal, // 动画模式 66 onFinish: () => { 67 console.info('play end') 68 } 69 }, () => { 70 this.widthSize = 200 71 this.heightSize = 100 72 }) 73 } 74 this.flag = !this.flag 75 }) 76 Button('change rotate angle') 77 .margin(50) 78 .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }) 79 .onClick(() => { 80 animateTo({ 81 duration: 1200, 82 curve: Curve.Friction, 83 delay: 500, 84 iterations: -1, // 设置-1表示动画无限循环 85 playMode: PlayMode.AlternateReverse, 86 onFinish: () => { 87 console.info('play end') 88 } 89 }, () => { 90 this.rotateAngle = 90 91 }) 92 }) 93 }.width('100%').margin({ top: 5 }) 94 } 95} 96``` 97 98 99
