鸿蒙 DevEcoStudio:简单实现动画效果

简单实现动画旋转，动画过渡
在src/main/ets/pages目录下创建文件page1.ets

import curves from '@ohos.curves'
@Entry
@Component
struct Page1 {
  @State message: string = 'Hello World'
  @State x:number=0
  @State y:number=0
  @State z:number=0
  build() {
    Row() {
       Text("QAQ")
         .position({
           x:this.x,  //x轴 从左上角向右
           y:this.y  //y轴 从左上角向下
         })
         .rotate({//旋转
           angle:this.z
         })
         // .animation({//监控前边的旋转，实现渐变过渡效果
         //   duration:6000,  //设置动画时长 1000毫秒
         //   curve:Curve.FastOutSlowIn, //设置播放时前段快速播放
         //   delay:2000, //设置动画延迟执行的时长
         //   // iterations:2, //设置播放次数
         //   onFinish:()=>{
         //     console.log("播放完毕")
         //   }
         // })
         .fontColor('red')
       Button('单击')
         .onClick(()=>{
           animateTo({//显式调用animateTo函数触发动画
             //实现按需实现动画
               duration:6000,
               curve:Curve.FastOutSlowIn,
               delay:2000,
               onFinish:()=>{
                 console.log("播放完毕")
               }
           },
             ()=>{
               this.x+=30
               this.z+=150
             })
         })
    }
    .width('100%')
    .height('100%')
  }
}

预览效果：(通过点击右侧Previewer实现效果预览)