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

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

AnimateParam对象说明

案例代码：

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