ArkUI中的显式动画

在任何系统的UI框架中，动画实现的原理都是相同的，即：在一段时间内，快速地多次改变UI外观；由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画，这和电影的原理是一样的。换言之，动画是“画出来的动”，关键不在于“画”的来源，而在于“动”的来源，如果这种动是记录了现实中发生过的运动，那它就是电影，如果这种动在现实中不曾存在，那它就是动画。

这一节带大家来了解动画相关的内容

• 显式动画

  
  

显式动画

显示动画由全局方法 animateTo 实现，我们来看一下他的数学

• value：设置动画的具体配置参数，AnimateParam 说明如下：

  • duration：设置动画的执行时长，单位为毫秒，默认为 1000 毫秒。

  • tempo：设置动画的播放速度，值越大动画播放越快，值越小播放越慢，默认值为 1 ，为 0 时无动画效果。

  • curve：设置动画曲线，默认值为 Linear 。

  • delay：设置动画的延迟执行时间，单位为毫秒，默认值为 0 不延迟。

  • iterations：设置动画的执行次数，默认值为 1 次，设置为 -1 时无限循环。

  • playMode：设置动画播放模式，默认播放完成后重头开始播放。

  • onFinish：动画播放完成的回调。

• event：指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

下面是演示

源代码如下：

import router from '@system.router'​@[email protected] Index {  @State message: string = 'OpenHarmony之旅'  @State btnWidth: number = 330;  @State btnHeight: number = 80;  @State btnAnim: boolean = true;​  build() {    Row() {      Column() {​        Button(this.message)          .size({ width: this.btnWidth, height: this.btnHeight })          .fontSize(20)          .backgroundColor(Color.Orange)          .fontStyle(FontStyle.Italic)          .fontWeight(FontWeight.Bold)          .onClick(() => {            if (this.btnAnim) {              animateTo({​                onFinish: () => {                  console.log("动画已完成")​                }              }, () => {                this.btnWidth = 159;                this.btnHeight = 50;              });            } else {              animateTo({​                onFinish: () => {​                }              }, () => {                this.btnWidth = 200;                this.btnHeight = 60;              });            }            this.btnAnim = !this.btnAnim;          })​​      }      .width('100%')​    }    .height('100%')  }}