1# 显式动画立即下发 (animateToImmediately) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9animateToImmediately接口用来提供[显式动画](ts-explicit-animation.md)立即下发功能。同时加载多个属性动画的情况下，使用该接口可以立即执行闭包代码中状态变化导致的过渡动效。 10 11与[animateTo](../arkts-apis-uicontext-uicontext.md#animateto)相比，animateToImmediately能即时将生成的动画指令发送至渲染层执行，无需等待vsync信号，从而在视觉效果上实现部分动画的优先呈现。当应用的主线程存在耗时操作，且需提前更新部分用户界面时，此接口可有效缩短应用的响应延迟。值得注意的是，animateToImmediately仅支持渲染层上的属性动画提前执行，而无法使UI侧的逐帧属性动画提前。 12 13此外，animateToImmediately会将调用前的状态与animateToImmediately产生的动画一并发送至渲染层，这意味着渲染可能依据调用时的状态进行。因此，务必确保调用时的状态完整无缺，能够支持当前状态下的渲染，否则动画初始阶段可能因部分状态设置不当，导致前几帧显示异常。 14 15通常情况下，不建议开发者采用animateToImmediately接口，而应选择[animateTo](../arkts-apis-uicontext-uicontext.md#animateto)，以防止干扰框架的显示时序，避免在动画启动时因状态设置不完整而导致的显示错误。 16 17> **说明：** 18> 19> 从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 20> 21 22## 接口 23 24## animateToImmediately 25 26animateToImmediately(value: AnimateParam , event: () => void): void 27 28提供显式动画立即下发功能。 29 30**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 31 32**系统能力：** SystemCapability.ArkUI.ArkUI.Full 33 34**参数：** 35 36| 参数名 | 类型 | 必填 | 说明 | 37| ------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | 38| value | [AnimateParam](ts-explicit-animation.md#animateparam对象说明) | 是 | 设置动画效果相关参数。 | 39| event | () => void | 是 | 指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。 | 40 41## 示例 42 43该示例主要演示通过animateToImmediately接口来实现显式动画立即下发。 44 45```ts 46// xxx.ets 47@Entry 48@Component 49struct AnimateToImmediatelyExample { 50 @State widthSize: number = 250; 51 @State heightSize: number = 100; 52 @State opacitySize: number = 0; 53 private flag: boolean = true; 54 55 build() { 56 Column() { 57 Column() 58 .width(this.widthSize) 59 .height(this.heightSize) 60 .backgroundColor(Color.Green) 61 .opacity(this.opacitySize) 62 Button('change size') 63 .margin(30) 64 .onClick(() => { 65 if (this.flag) { 66 animateToImmediately({ 67 delay: 0, 68 duration: 1000 69 }, () => { 70 this.opacitySize = 1; 71 }) 72 this.getUIContext()?.animateTo({ 73 delay: 1000, 74 duration: 1000 75 }, () => { 76 this.widthSize = 150; 77 this.heightSize = 60; 78 }) 79 } else { 80 animateToImmediately({ 81 delay: 0, 82 duration: 1000 83 }, () => { 84 this.widthSize = 250; 85 this.heightSize = 100; 86 }) 87 this.getUIContext()?.animateTo({ 88 delay: 1000, 89 duration: 1000 90 }, () => { 91 this.opacitySize = 0; 92 }) 93 } 94 this.flag = !this.flag; 95 }) 96 }.width('100%').margin({ top: 5 }) 97 } 98} 99``` 100 101 102
