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'
​
@Entry
@Component
struct 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%')
  }
}