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

本文我们依旧来说动画

这次我们来说角度

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

typescript 复制代码

@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

typescript 复制代码

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 改成

typescript 复制代码

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

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

这样我们图片偏转的角度明显就变了

x轴为面对我们这个上下正方向 90度为一个半圆那么我们来一个 80度

我们整个图片也成了快躺平的一个状态

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

我们改成y轴

typescript 复制代码

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

然后是 z轴她就说我们最开始看到的这个平面旋转的效果

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

这里还有个点例如我们x y z都打开

那它是三轴都发生旋转

如果你不想让某个轴转给0就好了

例如

typescript 复制代码

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

这样就只有为1的z轴转了

代码最上面我们写一个状态变量 number 数字类型

来控制 angle 角度属性然后默认给0

typescript 复制代码

@State rotateAngle:number = 0;

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

typescript 复制代码

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

然后我们将下面 Button按钮的代码修改如下

typescript 复制代码

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

只需要在箭头函数中修改 rotateAngle 的值之前的第一参数配置都是一样的

然后我们点击按钮整个动画他就转起来了