十九、显示动画-位置改变-526互联

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%')
  }
}