鸿蒙 HarmonyOs 动画效果 快速入门_鸿蒙旋转动画

一、理论

1.1 animation属性

1.2 组件转场效果

二、实操

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