鸿蒙 HarmonyOs 动画效果快速入门

一、理论

1.1 animation属性

名称	参数类型	必填	描述
duration	number	否	设置动画时长，默认值：1000，单位：毫秒
tempo	number	否	动画播放速度。数值越大，速度越快，默认为1
curve	string \| Curve	否	设置动画曲线。默认值：Curve.EaseInOut,平滑开始和结束
delay	number	否	设置动画延迟执行的时长。默认值为0，毫秒
iterations	number	否	设置播放次数。默认值：1，取值范围：[-1, +∞] 设置为 -1 表示无限次播放。
playMode	PlayMode	否	设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal
onFinish	()=>void	否	状态回调，动画播放完成时触发

1.2 组件转场效果

参数名	参数类型	必填	描述
type	TransitionType	否	类型，默认组件爱你新增和删除，默认为ALL
opacity	number	否	不透明度，为插入时起点和删除时终点的值。默认值为1，取值范围为[0,1]
translate	{ x?:number \| string, y?:number \| string, z?:number \| string }	否	平移效果，为插入时起点和删除时终点的值。 -x:横向的平移距离。 -y:纵向的平移距离。 -z:竖向的平移距离。
scale	{ x?:number, y?:number, z?:number, centerX?:number \| string, centerY?:number \| string }	否	缩放效果，为插入时起点和删除时终点的值。 -x:横向的缩放倍数 -y:纵向的缩放倍数 -z:为当前的二维显示，该参数无效 -centerX：centerY指缩放中心点，centerX和centerY默认值是"50%" -中心点为0时，默认是组件的左上角
rotate	{ x?:number, y?:number, z?:number, angle:number \| string, centerX?:number \| string, centerY?:number \| string }	否	旋转效果： angle是旋转角度

二、实操

2.1 示例：旋转图片

示例代码：

@Entry
@Component
struct Index {

  @State angle:number = 0
  build(){
    Column(){
      //显示图片
      Image($r('app.media.one'))
        .width(120)
        .rotate({
          angle:this.angle,
          centerX:'50%',
          centerY:'50%'
        })
        .animation({
          duration:1000,
          onFinish:()=>{

            console.log('结束时：'+this.angle)

          }
        })

      Button('动画开始')
        .onClick(()=>{
          this.angle += 360
        })
    }
    .width('100%')
    .height('100%')
  }
}

2.2 示例：平移、旋转、缩放

其中scale的值为缩放比例，所以1为初始值，2则表示原有的1倍

其中rotate的值为1则表示以该轴旋转，0则不以该轴旋转

示例效果：

示例代码：

@Entry
@Component
struct Index {

  @State angle:number = 0
  @State rotateX:number = 0
  @State rotateY:number = 0
  @State rotateZ:number = 0

  @State translateX:number = 0
  @State translateY:number = 0
  @State scaleX:number =  1
  @State scaleY:number =  1
  build(){
    Column(){
      //显示图片
      Image($r('app.media.one'))
        .width(120)
        .rotate({
          angle:this.angle,
          x:this.rotateX,
          y:this.rotateY,
          z:this.rotateZ,
          centerX:'50%',
          centerY: '50%',
        })
        .animation({
          duration:1000,
          onFinish:()=>{

            console.log('结束时：'+this.angle)
          }
        })
        .translate({
          x:this.translateX,
          y:this.translateY
        })
        .scale({
          x:this.scaleX,
          y:this.scaleY,
          centerX:'50%',
          centerY: '50%',
        })

      Blank()
      Row(){
        Column(){

          Image($r('app.media.ic_public_arrow_up_0'))
            .width(40)
            .backgroundColor(Color.White)
            .borderRadius(20)
            .onClick(()=>{
              this.translateY -= 50
            })

          Row(){
            Image($r('app.media.ic_public_arrow_left'))
              .width(40)
              .backgroundColor(Color.White)
              .borderRadius(20)
              .onClick(()=>{
                this.translateX -= 50
              })

            Image($r('app.media.ic_public_arrow_right'))
              .width(40)
              .backgroundColor(Color.White)
              .borderRadius(20)
              .onClick(()=>{
                this.translateX += 50
              })

          }.width(130)
          .justifyContent(FlexAlign.SpaceBetween)


          Image($r('app.media.ic_public_arrow_down_0'))
            .width(40)
            .backgroundColor(Color.White)
            .borderRadius(20)
            .onClick(()=>{
              this.translateY += 50
            })

        }.width(200)

        Column({space:20}){


          Button('旋转一圈动画开始')
            .onClick(()=>{
              this.rotateZ = 1
              this.angle += 360
            })

          Button('放大一倍')
            .onClick(()=>{
              this.scaleX *= 2
              this.scaleY *= 2
            })

          Button('缩小一倍')
            .onClick(()=>{
              this.scaleX /= 2
              this.scaleY /= 2
            })


        }.padding(10)




      }.width('100%')
      .backgroundColor(Color.Gray)




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

2.3 示例：简单摇骰子效果

示例效果：

示例代码：

@Entry
@Component
struct Index {

  @State dice:Resource[] = [
    $r('app.media.one'),
    $r('app.media.two'),
    $r('app.media.three'),
    $r('app.media.four'),
    $r('app.media.five'),
    $r('app.media.six')
  ]

  @State currentDice:Resource = this.dice[0]
  @State angle:number = 0
  @State rotateX:number = 0
  @State rotateY:number = 1
  @State rotateZ:number = 0
  @State opacityNumber:number = 1
  @State runState:boolean = false
  build(){
    Column(){
      //显示图片
      Image(this.currentDice)
        .width(120)
        .rotate({
          angle:this.angle,
          x:this.rotateX,
          y:this.rotateY,
          z:this.rotateZ,
          centerX:'50%',
          centerY: '50%',
        })
        .animation({
          duration:1000,
          curve:Curve.EaseInOut,
          onFinish:()=>{
            this.opacityNumber = 1
            console.log('结束时：'+this.angle)
          },

        })
        .opacity(this.opacityNumber)



      Button('摇骰子')
        .width(200)
        .onClick(()=>{

          this.opacityNumber = 0.8
          this.angle += 360

          setTimeout(()=>{
            this.currentDice = this.dice[Math.floor(Math.random() * this.dice.length)];
          },1000)
          
        })
      
    }
    .width('100%')
    .height('100%')
  }
}