1# 显式动画立即下发 (animateToImmediately)
2
3animateToImmediately接口用来提供[显式动画](ts-explicit-animation.md)立即下发功能。同时加载多个属性动画的情况下，使用该接口可以立即执行闭包代码中状态变化导致的过渡动效。
4
5与[animateTo](../js-apis-arkui-UIContext.md#animateto)相比，animateToImmediately能即时将生成的动画指令发送至渲染层执行，无需等待vsync信号，从而在视觉效果上实现部分动画的优先呈现。当应用的主线程存在耗时操作，且需提前更新部分用户界面时，此接口可有效缩短应用的响应延迟。值得注意的是，animateToImmediately仅支持渲染层上的属性动画提前执行，而无法使UI侧的逐帧属性动画提前。
6
7此外，animateToImmediately会将调用前的状态与animateToImmediately产生的动画一并发送至渲染层，这意味着渲染可能依据调用时的状态进行。因此，务必确保调用时的状态完整无缺，能够支持当前状态下的渲染，否则动画初始阶段可能因部分状态设置不当，导致前几帧显示异常。
8
9通常情况下，不建议开发者采用animateToImmediately接口，而应选择[animateTo](../js-apis-arkui-UIContext.md#animateto)，以防止干扰框架的显示时序，避免在动画启动时因状态设置不完整而导致的显示错误。
10
11> **说明：**
12>
13> 从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
14>
15
16## 接口
17
18## animateToImmediately
19
20animateToImmediately(value: AnimateParam , event: () => void): void
21
22提供显式动画立即下发功能。
23
24**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
25
26**系统能力：** SystemCapability.ArkUI.ArkUI.Full
27
28**参数：**
29
30| 参数名 | 类型                                                         | 是否必填 | 描述                                                         |
31| ------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
32| value  | [AnimateParam](ts-explicit-animation.md#animateparam对象说明) | 是       | 设置动画效果相关参数。                                       |
33| event  | () => void                                                   | 是       | 指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
34
35## 示例
36
37该示例主要演示通过animateToImmediately接口来实现显式动画立即下发。
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![animation1](figures/animateToImmediately1.gif)
96