鸿蒙开发之动画

一、概述

鸿蒙开发中动画按照基础能力分，可以分成三种：属性动画、显示动画、转场动画。

使用属性动画产生布局更新动画 显式动画(animateTo）和属性动画(animation）是ArkUI提供的最基础和常用的动画功能。在布局属性（如尺寸属性、位置属性）发生变化时，可以通过属性动画或显式动画，按照动画参数过渡到新的布局参数状态。

二、缩放动画

animateTo({
              duration:2000, //动画时长
              curve:Curve.Linear, //动画匀速
              iterations:3, //动画次数
              delay:1000, //延时时间执行
              playMode:PlayMode.Alternate, //来回交替
              onFinish: () => { //动画完成的回调
                this.message = '动画完成'
              }

            },() => {
              //想要执行的动画效果
              this.textWidth = 360;
              this.textHeight = 120
            })

我们使用了动画来设置Text的宽度和高度属性，就达到了这个效果。

三、平移动画

同理，我们可以通过设置Column的交叉轴的方向来达到平移动画。

  //定义一个变量来改变组件的排列方式
  @State alignParam: HorizontalAlign = HorizontalAlign.Start


 Column({space:20}) {
        Text(this.message)
          .width(this.textWidth)
          .height(this.textHeight)
          .backgroundColor(Color.Blue)
          .fontSize(20)
          .fontColor(Color.White)
          .fontWeight(FontWeight.Bold)
          .margin({top:30})
          .onClick(() => {

            animateTo({
              duration:2000, //动画时长
              curve:Curve.Linear, //动画匀速
              iterations:3, //动画次数
              delay:1000, //延时时间执行
              playMode:PlayMode.Alternate, //来回交替
              onFinish: () => { //动画完成的回调
                this.message = '动画完成'
              }

            },() => {
               //利用三目运算改变排列方式
              this.alignParam = this.alignParam === HorizontalAlign.End ? HorizontalAlign.Start : HorizontalAlign.End
            })
          })
      }
        //设置交叉轴上的排列方式
      .alignItems(this.alignParam)
      .width('100%')
      .height('100%')
  

四、翻转动画

旋转动画需要依赖组件的rotate属性，这个属性可以设置旋转的坐标系是x轴、y轴、z轴。并且需要一个必须参数angle角度。

//设置一个变量作为旋转角度
@State angle: number = 0

   Column({space:20}) {
        Text(this.message)
          .width(this.textWidth)
          .height(this.textHeight)
          .backgroundColor(Color.Blue)
          .fontSize(20)
          .fontColor(Color.White)
          .fontWeight(FontWeight.Bold)
          .margin({top:30})
          .rotate({ //旋转属性
            z:1,
            angle:this.angle
          })
          .onClick(() => {

            animateTo({
              duration:2000, //动画时长
              curve:Curve.Linear, //动画匀速
              iterations:3, //动画次数
              delay:1000, //延时时间执行
              playMode:PlayMode.Alternate, //来回交替
              onFinish: () => { //动画完成的回调
                this.message = '动画完成'
              }

            },() => {
              //设置旋转的角度是360度
              this.angle = 360
            })
          })
      }
      .alignItems(this.alignParam)
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')

五、属性动画

属性动画是不需要单独调用animateTo方法的，只需要在组件通过点语法调用animation属性。

  @State textWidth: number = 120
  @State textHeight: number = 40

     Column({space:20}) {
        Text(this.message)
          .width(this.textWidth)
          .height(this.textHeight)
          //直接调用属性即可，内部也可以传递动画的属性
          .animation({})
          .backgroundColor(Color.Blue)
          .fontSize(20)
          .fontColor(Color.White)
          .fontWeight(FontWeight.Bold)
          .margin({top:30})
          .onClick(() => {
              this.textWidth = 360;
              this.textHeight = 120
          })
      }
      .alignItems(this.alignParam)
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')

注意：animation()属性调用要在width、height之后，不然不会生效。