十九、显示动画-位置改变、尺寸改变、角度变化

1.位置改变

ArkUI中，产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画的时长、变化规律（即曲线）等参数，当属性值发生变化后，按照动画参数，从原来的状态过渡到新的状态，即形成一个动画。

AnimateParam对象说明

名称	类型	描述
duration	number	动画持续时间，单位为毫秒。 默认值：1000 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： - 在ArkTS卡片上最大动画持续时间为1000毫秒。 - 设置浮点类型的值时，向下取整。例如：设置值为1.2，按照1处理。
tempo	number	动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果 默认值：1.0
cure	Curve | ICure | string	动画曲线。 默认值：Curve.EaseInOut 从API version 9开始，该接口支持在ArkTS卡片中使用。
delay	number	单位为ms（毫秒），默认不延时播放。 默认值：0 说明： - 设置浮点类型的值时，向下取整。例如：设置值为1.2，按照1处理。
iterations	number	默认播放一次，设置为-1时标识无限此播放。 默认值：1
playMode	PlayMode	设置动画播放模式，默认播放完成后重头开始播放。 默认值：PlayMode.Normal 从API version 9 开始，该接口支持在ArkTS卡片中使用。 相关使用约束请参考PlayMode说明。
onFinish	（）=>void	动效播放完成回调。 从API version 9开始，该接口支持在ArkTS卡片中使用。

案例代码：

@Entry
@Component
struct AnimateTo1 {
  @State itemAlign:HorizontalAlign = HorizontalAlign.Start;

  build() {
   Column({space:30}){
     Text('点击修改布局位置')
       .fontSize(30)
       .margin({top:20})
     Column({space:10}){
       Button('帝心').width(100).height(50)
       Button('庄生').width(100).height(50)
       Button('周道').width(100).height(50)
     }
     .margin(20)
     .borderWidth(2)
     .width('90%')
     .height(400)
     .justifyContent(FlexAlign.Center)
     .alignItems(this.itemAlign)

     Button('click')
       .onClick(() => {
         //动画函数
          animateTo({
            duration:1000,
            curve:Curve.Linear,
            //delay:2000, //延迟动画
            //iterations:-1,//无限动画循环
            playMode:PlayMode.Alternate,
            onFinish: () => {
                //动画结束的回调函数
            }
          }, () => {
            //1.修改位置属性值
            this.itemAlign = HorizontalAlign.End

          })
       })
       .fontSize(30)
   }
    .width('100%')
    .height('100%')
  }
}

2.尺寸改变

案例代码：

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 * 显示动画-尺寸变化
 */
@Entry
@Component
struct AnimateTo2 {
  @State myWidth:number = 100
  @State myHeight:number = 50
  @State flag:boolean = false
  build() {
    Column({space:10}) {
      Button('change:尺寸')
        .type(ButtonType.Normal)
        .width(this.myWidth)
        .height(this.myHeight)
        .margin(20)
      Button(this.flag ? '小小小' : '大大大')
        .fontSize(40)
        .margin(20)
        .onClick(() => {
          // 调用显示动画方法
          animateTo({
            duration:1000,
            curve:Curve.Ease
          }, () => {
            if(this.flag){
              this.myWidth = 100
              this.myHeight = 50
            }else{
              this.myWidth = 300
              this.myHeight = 150
            }
            this.flag = !this.flag
          })
        })
    }
  }
}

3.角度变化

案例代码：

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 * 显示动画-角度改变
 */
@Entry
@Component
struct AnimateTo3 {
  @State message: string = '角度改变动画'
  @State rotateAngle:number = 0
  @State flag:boolean = false
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Image($r('app.media.icon'))
          .width(300)
          .height(300)
          .borderRadius(150)
          //角度
          .rotate({
            x:1,//X轴旋转（左手法则）
            y:1,
            z:1,
            angle:this.rotateAngle
          })
          .onClick(() => {
            animateTo({
              duration:2000,
              curve:Curve.Friction
            }, () => {
              if (this.flag) {
                this.rotateAngle = 0
              }else {
                this.rotateAngle = 625
              }
            })
            this.flag = !this.flag
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}