1# Keyframe Animation (keyframeAnimateTo) 2 3The [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext) provides the **keyframeAnimateTo** API to specify several keyframes to implement segment-based animation. In an animation that involves width and height changes, as in a property animation, a component's content (such as text, [canvas](ts-components-canvas-canvas.md) content, and [linear gradient](ts-universal-attributes-gradient-color.md)) is changed straight to the final state. To enable the content to change with the width and height during the animation process, you can use the [renderFit](ts-universal-attributes-renderfit.md) attribute. 4 5> **NOTE** 6> 7> This feature is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> This API is a member function of the [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext) class and needs to be called through a **UIContext** instance. 10 11keyframeAnimateTo(param: KeyframeAnimateParam, keyframes: Array<KeyframeState>): void 12 13**Parameters** 14 15| Name | Type | Mandatory| Description | 16| ------------ | ---------------------------------------------------- | ------- | ---------------------------- | 17| param | [KeyframeAnimateParam](#keyframeanimateparam) | Yes | Global parameters of the keyframe animation. | 18| keyframes | Array<[KeyframeState](#keyframestate)> | Yes | Array of keyframes. | 19 20## KeyframeAnimateParam 21| Name | Type | Mandatory| Description | 22| ---------- | ---------- | ------- | ------------------------------------- | 23| delay | number | No | Delay of animation playback, in ms.<br>Default value: **0**, indicating that the playback is not delayed.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A value greater than 0 means to begin the animation after the specified amount of time has elapsed.<br>A value less than 0 means to begin the animation in advance. If the absolute value of **delay** is less than the actual animation duration, the animation starts its first frame from the state at the absolute value. If the absolute value of **delay** is greater than or equal to the actual animation duration, the animation starts its first frame from the end state. The actual animation duration is equal to the duration of a single animation multiplied by the number of animation playback times.| 24| iterations | number | No | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. The value **0** indicates that there is no animation.<br>Default value: **1**<br>Value range: [-1, +∞)| 25| onFinish | () => void | No | Callback invoked when the animation playback is complete. This API is called after the keyframe animation has played for the specified number of times.| 26 27## KeyframeState 28 29| Name | Type | Mandatory| Description | 30| ---------- | ------------------------------------ | ------- | ---------------------------------------- | 31| duration | number | Yes | Duration of the keyframe animation, in ms.<br>Value range: [0, +∞)<br>**NOTE**<br>- If this parameter is set to a value less than 0, the value **0** is used.<br>- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.| 32| curve | [Curve](ts-appendix-enums.md#curve)\| string \| [ICurve](../apis/js-apis-curve.md#icurve) | No | Animation curve used by the keyframe.<br>Default value: **Curve.EaseInOut**<br>**NOTE**<br>Because the [springMotion](../apis/js-apis-curve.md#curvesspringmotion9), [responsiveSpringMotion](../apis/js-apis-curve.md#curvesresponsivespringmotion9) and [interpolatingSpring](../apis/js-apis-curve.md#curvesinterpolatingspring10) curves do not have effective duration settings, they are not supported.| 33| event | () => void | Yes | Closure function of the state at the time of the keyframe, that is, the state to be reached at the time of the keyframe.| 34 35## Example 36 37```ts 38// xxx.ets 39import { UIContext } from '@ohos.arkui.UIContext'; 40@Entry 41@Component 42struct KeyframeDemo { 43 @State myScale: number = 1.0; 44 uiContext: UIContext | undefined = undefined; 45 46 aboutToAppear() { 47 this.uiContext = this.getUIContext?.(); 48 } 49 50 build() { 51 Column() { 52 Circle() 53 .width(100) 54 .height(100) 55 .fill("#46B1E3") 56 .margin(100) 57 .scale({ x: this.myScale, y: this.myScale }) 58 .onClick(() => { 59 if (!this.uiContext) { 60 console.info("no uiContext, keyframe failed"); 61 return; 62 } 63 this.myScale = 1; 64 // Set the keyframe animation to play three times. 65 this.uiContext.keyframeAnimateTo({ iterations: 3 }, [ 66 { 67 // The first keyframe animation lasts for 800 ms, during which the scale attribute changes from 1 to 1.5. 68 duration: 800, 69 event: () => { 70 this.myScale = 1.5; 71 } 72 }, 73 { 74 // The second keyframe animation lasts for 500 ms, during which the scale attribute changes from 1.5 to 1. 75 duration: 500, 76 event: () => { 77 this.myScale = 1; 78 } 79 } 80 ]); 81 }) 82 }.width('100%').margin({ top: 5 }) 83 } 84} 85``` 86 87 88
