HarmonyOS 通过 animateTo讲解角度动画效果

本文我们依旧来说动画
这次我们来说角度

我们先写一个这样的代码模板

@Entry
@Component
struct Index {

  build() {
    Column({space: 30}) {
      Text("修改元素尺寸")
        .fontSize(38)
        .margin({top:188})
      Image("https://img2.baidu.com/it/u=1814561676,2470063876&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500")
        .width(200)
        .height(150)

      Button("执行").onClick((event: ClickEvent) => {
        animateTo({
          duration: 3000,
          curve: Curve.Linear,
          //delay: 2000,
          iterations: 3,
          playMode: PlayMode.Alternate,
          onFinish: (()=>{
            console.log("动画结束");
          })
        },() => {
        })
      })
  }
    .width('100%')
    .height('100%')
  }
}

这里我们放了一个 Image 图片组件里面是个网图地址
然后我们还是用按钮定义了一个点击事假里面用了 animateTo 动画不过目前没有写动画是要干嘛的
在这里插入图片描述
这里我们就可以在点击事件中修改角度属性

我们先给 Image 组件加上属性rotate

Image("https://img2.baidu.com/it/u=1814561676,2470063876&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500")
.width(200)
.height(150)
.rotate({
    angle: 30,
})

rotate 就是设置元素旋转的属性
angle 设置中心点偏转的角度我们给 30
可以看到我们的图片中心就转了一个幅度
在这里插入图片描述
然后我们将他打 rotate 改成

.rotate({
	angle: 30,
	x: 1
})

这里我们给 x 1的意思是我们要按x轴去偏转

这样我们图片偏转的角度明显就变了
在这里插入图片描述
x轴为面对我们这个上下正方向 90度为一个半圆那么我们来一个 80度
我们整个图片也成了快躺平的一个状态

180度整个圆它就整个反过来了

我们改成y轴

rotate({
	angle: 40,
	 y: 1
})

在这里插入图片描述
然后是 z轴她就说我们最开始看到的这个平面旋转的效果

那么这里其实我们控制 angle 就OK了

这里还有个点例如我们x y z都打开
那它是三轴都发生旋转
在这里插入图片描述
如果你不想让某个轴转给0就好了
例如

rotate({
    angle: 40,
	x: 0,
	y: 0,
	z: 1
})

这样就只有为1的z轴转了
在这里插入图片描述
代码最上面我们写一个状态变量 number 数字类型
来控制 angle 角度属性然后默认给0

@State rotateAngle:number = 0;

然后用 rotateAngle 绑定旋转角度属性

rotate({
	angle: this.rotateAngle,
	 x: 0,
	 y: 0,
	 z: 1
})

在这里插入图片描述
然后我们将下面 Button按钮的代码修改如下

Button("执行").onClick((event: ClickEvent) => {
	animateTo({
	 duration: 3000,
	 curve: Curve.Linear,
	 //delay: 2000,
	 iterations: 3,
	 playMode: PlayMode.Alternate,
	 onFinish: (()=>{
	   console.log("动画结束");
	 })
	},() => {
	 this.rotateAngle = 180
	})
})