HarmonyOS-ArkUI：关键帧动画 keyFrameAnimateTo-CSDN博客

HarmonyOS-ArkUI: animateTo 显式动画-CSDN博客

至今为止，已经讲了两个动画了(显式动画，关键帧动画如链接所示)，这个属性动画是第三个。鸿蒙的属性动画，和Android中的属性动画，迥异，也就是名字不同罢了。所以之前的经验不能完全带入。而且通过前两篇的学习，我认为鸿蒙对动画的优化，与安卓有很大不同。有时间从绘制渲染的角度研究下底层原理。目前我们先要会用，用好为主。

显式动画VS属性动画区别

在了解这个animation之前，我们先看看下面两端代码的对比图。代码很简单。不用了解api也能看出个七八。图中重点在于逻辑上的书写结构！

以上代码是一个非常简单的显式动画写法和属性动画写法的对比。我们暂且抛去二者实现原理，只看写法会发现

• 显式动画的调用，是调用的UIContext中的animateTo方法。 并且其第一个参数描述动画是什么样子的，第二个参数是一个函数，里面的逻辑是最终我们关联的状态变量要改的值。
• 属性动画，是调用的组件顶级类的animation方法，（因为animation方法所处文件位置，其实所有的组件都具备这个方法，都可以调用的）。 但是！ 这个函数仅仅有对动画的参数描述。 而改值是由别的逻辑触发的！

这就稍微有些难以理解了。怎么不知道一个状态变量的终值，却依然可以有动画呢？

原因是： 属性动画会对组件内设置的属性变化进行监测，发生变化后，就会按照设置进去的animation参数，搞插值计算，使得属性平稳变化，完成动画。

显式动画和属性动画处理流程上的区别是：

• 属性动画，主动监测变量，发现组件内变量发生变化了，就会拿出来设置好的动画参数走插值计算，进而使得渲染平滑过渡的效果。这样的话，无论您在哪块逻辑里修改这个状态变量，只要监测到，就能有动画效果！
• 显式动画，不监测变量。所以您得自己写触发代码。如像上图中在onclick中写animateTo方法，第一个参数用来说明用什么动画参数， 然后特地在第二个函数参数中实现您最终要将什么变量变成什么值。如果您在animateTo函数之外的逻辑改动状态变量，那就没有动画！所以想要变量出现动画，那您得在 animateTo 第二个参数 event函数中改动变量！

animation函数API

下图为animation函数的API及函数参数讲解：

代码示例

@Entry
@Component
struct AnimationTest1 {
  @State widthSize:number = 250
  @State heightSize:number = 100
  @State rotateAngle:number = 0
  @State space: number = 0

  build() {
    Column() {
      Column({space: this.space}){
        Button('改变大小')
          .width(this.widthSize)
          .height(this.heightSize)
          .animation({
            duration: 2000, //时长为2秒
            curve: Curve.EaseOut, //快速开启, 缓慢退出
            iterations: -1, //无限播放
            playMode: PlayMode.Normal //从头到尾播放
          })
          .onClick(()=>{
              this.widthSize = 150
              this.heightSize = 60
              this.space = 20
          })

        Button('点击旋转')
          .width(200)
          .margin({top: 150})
          .rotate({angle: this.rotateAngle})
          .animation({
            duration: 1200,
            curve: Curve.Friction, //阻尼,模拟摩擦力
            iterations: -1, //无限循环
            delay: 500,
            playMode: PlayMode.Alternate, // 正反正反呼吸灯效果
            expectedFrameRateRange:{
              min: 20,
              max: 120,
              expected: 90
            }
          })
          .onClick(()=>{
            this.rotateAngle = 90
          })
      }
      .margin({top: 50})
    }
    .height('100%')
    .width('100%')
  }
}

真机效果

其他点

animation是组价中的通用方法，也就意味着组件是可以自行托管期生命周期的。属性动画的创建销毁不用我们自己维护，它自定管理，在状态变量被检测到变化的时候会触发，当组件进入aboutToDisappear周期的时候，所有关联动画，包括无限循环动画都被被系统终止。不需手动处理