1# Property Animation (animation) 2 3With property animations, you can animate changes to certain component properties, such as [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) and [translate](ts-universal-attributes-transformation.md#translate). In a property animation that involves width and height changes, a component's content (such as text and [canvas](ts-components-canvas-canvas.md#canvas) content) is changed straight to the final state. To enable the content to change with the width and height during the animation process, use the [renderFit](ts-universal-attributes-renderfit.md#renderfit) attribute. 4 5> **NOTE** 6> 7> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> **Widget capability**: This API can be used in ArkTS widgets since API version 9. 10 11## APIs 12 13animation(value:AnimateParam) 14 15**Atomic service API**: This API can be used in atomic services since API version 11. 16 17**Parameters** 18| Name | Type | Mandatory| Description | 19| ----- | --------------------------------- | ---- | ------------------------------------- | 20| value | [AnimateParam](ts-explicit-animation.md#animateparam) | Yes | Animation settings. | 21 22Property animations only affect attributes that are specified before the **animation** API and do not affect properties of the component constructor. 23 ``` 24@State widthSize: number = 250; 25@State heightSize: number = 100; 26@State rotateAngle: number = 0; 27@State flag: boolean = true; 28@State space: number = 10; 29// ... 30Column({ space: this.space }) // Changing space in the Column constructor will not be animated. 31 .onClick(() => { 32 if (this.flag) { 33 this.widthSize = 150; 34 this.heightSize = 60; 35 this.space = 20; // Changing this.space will not be animated. 36 } else { 37 this.widthSize = 250; 38 this.heightSize = 100;; 39 this.space = 10; // Changing this.space will not be animated. 40 } 41 this.flag = !this.flag; 42 }) 43 .margin(30) 44 .width(this.widthSize) // Only effective if specified before the animation API. 45 .height(this.heightSize) // Only effective if specified before the animation API. 46 .animation({ 47 duration: 2000, 48 curve: Curve.EaseOut, 49 iterations: 3, 50 playMode: PlayMode.Normal 51 }) 52 // .width(this.widthSize) // The animation API does not take effect here. 53 // .height(this.heightSize) // The animation API does not take effect here. 54``` 55 56## Example 57 58This example demonstrates property animations using the animation API. 59 60```ts 61// xxx.ets 62@Entry 63@Component 64struct AttrAnimationExample { 65 @State widthSize: number = 250 66 @State heightSize: number = 100 67 @State rotateAngle: number = 0 68 @State flag: boolean = true 69 70 build() { 71 Column() { 72 Button('change size') 73 .onClick(() => { 74 if (this.flag) { 75 this.widthSize = 150 76 this.heightSize = 60 77 } else { 78 this.widthSize = 250 79 this.heightSize = 100 80 } 81 this.flag = !this.flag 82 }) 83 .margin(30) 84 .width(this.widthSize) 85 .height(this.heightSize) 86 .animation({ 87 duration: 2000, 88 curve: Curve.EaseOut, 89 iterations: 3, 90 playMode: PlayMode.Normal 91 }) 92 Button('change rotate angle') 93 .onClick(() => { 94 this.rotateAngle = 90 95 }) 96 .margin(50) 97 .rotate({ angle: this.rotateAngle }) 98 .animation({ 99 duration: 1200, 100 curve: Curve.Friction, 101 delay: 500, 102 iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times. 103 playMode: PlayMode.Alternate, 104 expectedFrameRateRange: { 105 min: 20, 106 max: 120, 107 expected: 90, 108 } 109 }) 110 }.width('100%').margin({ top: 20 }) 111 } 112} 113``` 114 115 116
