1# 属性动画 (animation) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括[width](ts-universal-attributes-size.md#width)、[height](ts-universal-attributes-size.md#height)、[backgroundColor](ts-universal-attributes-background.md#backgroundcolor)、[opacity](ts-universal-attributes-opacity.md#opacity)、[scale](ts-universal-attributes-transformation.md#scale)、[rotate](ts-universal-attributes-transformation.md#rotate)、[translate](ts-universal-attributes-transformation.md#translate)等。布局类改变宽高的动画，内容都是直接到终点状态，例如文字、[Canvas](ts-components-canvas-canvas.md)的内容等，如果要内容跟随宽高变化，可以使用[renderFit](ts-universal-attributes-renderfit.md#renderfit)属性配置。 10 11> **说明：** 12> 13> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## animation 16 17animation(value:AnimateParam): T 18 19设置组件的属性动画。 20 21> **说明：** 22> 23> 在单一页面上存在大量应用动效的组件时，可以使用renderGroup方法来解决卡顿问题，从而提升动画性能。最佳实践请参考[动画使用指导-使用renderGroup](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-fair-use-animation#section1223162922415)。 24 25**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 26 27**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31**参数：** 32| 参数名 | 类型 | 必填 | 说明 | 33| ----- | --------------------------------- | ---- | ------------------------------------- | 34| value | [AnimateParam](ts-explicit-animation.md#animateparam对象说明) | 是 | 设置动画效果相关参数。 | 35 36**返回值：** 37 38| 类型 | 说明 | 39| -------- | -------- | 40| T | 返回当前组件。 | 41 42属性动画只对写在animation前面的属性生效，且对组件构造器的属性不生效。 43``` 44@Entry 45@Component 46struct AnimationExample { 47 @State widthSize: number = 250; 48 @State heightSize: number = 100; 49 @State rotateAngle: number = 0; 50 @State flag: boolean = true; 51 @State space: number = 10; 52 53 build() { 54 Column() { 55 Column({ space: this.space }) // 改变Column构造器中的space动画不生效 56 .onClick(() => { 57 if (this.flag) { 58 this.widthSize = 150; 59 this.heightSize = 60; 60 this.space = 20; // 改变this.space动画不生效 61 } else { 62 this.widthSize = 250; 63 this.heightSize = 100; 64 this.space = 10; // 改变this.space动画不生效 65 } 66 this.flag = !this.flag; 67 }) 68 .backgroundColor(Color.Black) 69 .margin(30) 70 .width(this.widthSize) // 只有写在animation前面才生效 71 .height(this.heightSize) // 只有写在animation前面才生效 72 .animation({ 73 duration: 2000, 74 curve: Curve.EaseOut, 75 iterations: 3, 76 playMode: PlayMode.Normal 77 }) 78 // .width(this.widthSize) // 动画不生效 79 // .height(this.heightSize) // 动画不生效 80 } 81 } 82} 83``` 84 85## 示例 86 87该示例通过animation实现了组件的属性动画。 88 89```ts 90// xxx.ets 91@Entry 92@Component 93struct AttrAnimationExample { 94 @State widthSize: number = 250 95 @State heightSize: number = 100 96 @State rotateAngle: number = 0 97 @State flag: boolean = true 98 99 build() { 100 Column() { 101 Button('change size') 102 .onClick(() => { 103 if (this.flag) { 104 this.widthSize = 150 105 this.heightSize = 60 106 } else { 107 this.widthSize = 250 108 this.heightSize = 100 109 } 110 this.flag = !this.flag 111 }) 112 .margin(30) 113 .width(this.widthSize) 114 .height(this.heightSize) 115 .animation({ 116 duration: 2000, 117 curve: Curve.EaseOut, 118 iterations: 3, 119 playMode: PlayMode.Normal 120 }) 121 Button('change rotate angle') 122 .onClick(() => { 123 this.rotateAngle = 90 124 }) 125 .margin(50) 126 .rotate({ angle: this.rotateAngle }) 127 .animation({ 128 duration: 1200, 129 curve: Curve.Friction, 130 delay: 500, 131 iterations: -1, // 设置-1表示动画无限循环 132 playMode: PlayMode.Alternate, 133 expectedFrameRateRange: { 134 min: 20, 135 max: 120, 136 expected: 90, 137 } 138 }) 139 }.width('100%').margin({ top: 20 }) 140 } 141} 142``` 143 144
