1# Immediate Delivery of Explicit Animation (animateToImmediately) 2 3The **animateToImmediately** API implements immediate delivery for [explicit animations](ts-explicit-animation.md). When multiple property animations are loaded at once, you can call this API to immediately execute the transition animation for state changes caused by the specified closure function. 4 5Unlike [animateTo](../js-apis-arkui-UIContext.md#animateto), which waits for the VSync signal, **animateToImmediately** instantly sends animation commands to the rendering layer for execution. This is particularly useful in scenarios where you need to prioritize certain animations or update part of the UI in advance, especially when your application's main thread is occupied with time-consuming operations. However, it is important to note that **animateToImmediately** is limited to property animations on the rendering layer and does not affect frame-by-frame animations on the UI side. 6 7In addition, **animateToImmediately** captures the current state at the time of the call and sends it alongside the animation to the rendering layer. This means that the rendering output will reflect the state at the time of the call. Therefore, before calling this API, ensure that the current state is complete and correctly configured, to prevent rendering issues due to incorrect initial frames. 8 9In general cases, using **animateToImmediately** is not advised. Opt for [animateTo](../js-apis-arkui-UIContext.md#animateto) to avoid disrupting the display timing of the framework and to prevent potential display issues caused by incomplete state settings at the start of the animation. 10 11> **NOTE** 12> 13> This feature is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 14> 15 16## APIs 17 18## animateToImmediately 19 20animateToImmediately(value: AnimateParam , event: () => void): void 21 22Delivers an explicit animation immediately. 23 24**Atomic service API**: This API can be used in atomic services since API version 12. 25 26**System capability**: SystemCapability.ArkUI.ArkUI.Full 27 28**Parameters** 29 30| Name| Type | Mandatory| Description | 31| ------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | 32| value | [AnimateParam](ts-explicit-animation.md#animateparam) | Yes | Animation settings. | 33| event | () => void | Yes | Closure function that displays the animation. The system automatically inserts a transition animation for state changes caused by the closure function.| 34 35## Example 36 37This example demonstrates how to use the **animateToImmediately** API to deliver an explicit animation immediately. 38 39```ts 40// xxx.ets 41@Entry 42@Component 43struct AnimateToImmediatelyExample { 44 @State widthSize: number = 250 45 @State heightSize: number = 100 46 @State opacitySize: number = 0 47 private flag: boolean = true 48 49 build() { 50 Column() { 51 Column() 52 .width(this.widthSize) 53 .height(this.heightSize) 54 .backgroundColor(Color.Green) 55 .opacity(this.opacitySize) 56 Button('change size') 57 .margin(30) 58 .onClick(() => { 59 if (this.flag) { 60 animateToImmediately({ 61 delay: 0, 62 duration: 1000 63 }, () => { 64 this.opacitySize = 1 65 }) 66 animateTo({ 67 delay: 1000, 68 duration: 1000 69 }, () => { 70 this.widthSize = 150 71 this.heightSize = 60 72 }) 73 } else { 74 animateToImmediately({ 75 delay: 0, 76 duration: 1000 77 }, () => { 78 this.widthSize = 250 79 this.heightSize = 100 80 }) 81 animateTo({ 82 delay: 1000, 83 duration: 1000 84 }, () => { 85 this.opacitySize = 0 86 }) 87 } 88 this.flag = !this.flag 89 }) 90 }.width('100%').margin({ top: 5 }) 91 } 92} 93``` 94 95 96
