HarmonyOS-ArkUI: animateTo 显式动画

什么是显式动画

啊， 尽管有点糙，但还是表明一下吧， 显式动画内里的“显式”二字， 是步伐员在代码调用的时间，就再三告诫，明明白白调用动画API而创建的动画。 这个API的名字就是： animateTo。这就是显式动画。说白了您可以大致明白为，显式动画，就是调用animateTo来完成的动画。

animateTo API概述

animateTo是common文件中的一个方法，其声明为：
declare function animateTo(value: AnimateParam, event: () => void): void;

好，接下来我们梳理一下这个方法！

animateTo用法

animateTo由于是一个common的方法，且其声明中并没有指定要改什么组件，那么它是怎么改动相干组件界面的呢？答案是，通过改动状态变量而联动界面变化。改动位置就是animateTo的第二个参数。
declare function animateTo(value: AnimateParam, event: () => void): void;
这个函数内里的event参数。 代表的是一套动画终极的值要酿成的样子。哪个组件和这个值有关联，哪个组件的界面就会变。
如下文中的案例：

1. @Entry
2. @Component
3. struct AnimateToTest1 {
4.   @State widthSize:number = 250
5.   @State heightSize: number = 100
6.   @State rotateAngle: number = 0
7.   private flag: boolean = true
8.   build() {
9.     Column() {
10.       Button('Change Size')
11.         .width(this.widthSize)
12.         .height(this.heightSize)
13.         .margin(30)
14.         .onClick(()=>{
15.           if (this.flag) {
16.             this.getUIContext().animateTo({
17.               duration: 200, //2000毫秒
18.               curve: Curve.EaseOut, //快速开始,逐渐减速到终点
19.               iterations: 1, //重复1次
20.               playMode: PlayMode.Normal, //正常播放从头到尾
21.               onFinish:()=>{
22.                 console.log('play end')
23.               }
24.             },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。