HarmonyOS讲解并演示 animateTo 动画效果

news2024/9/27 5:52:48

本文我们一起看一看动画

首先 harmonyos中的东西其实就是通过改变响应式数据的值以及配合动画参数即可完成

我们先来看布局更新动画中的显示动画
简单说触发事件改变组件的位置信息

我们先编写代码如下

@Entry
@Component
struct Index {

  @State itemAlign: HorizontalAlign = HorizontalAlign.Start

  build() {
    Column({space: 30}) {
      Text("点击修改布局位置")
        .fontSize(38)
        .margin({top:188})
      Column({space: 18 }) {
        Button("按钮1")
          .width(100)
          .height(58)
         Button("按钮2")
           .width(100)
           .height(58)
      }
      .margin(20)
      .borderWidth(2)
      .width("90%")
      .height(400)
      .justifyContent(FlexAlign.Center)
      .alignItems(this.itemAlign)

      Button("执行").onClick((event: ClickEvent) => {
        
      })
  }
    .width('100%')
    .height('100%')
  }
}

在这里插入图片描述
主容器下 Text 文本展示内容
Column 组件下两个 button组件
justifyContent 因为是 Column 组件主轴是垂直方向 FlexAlign.Center 居中对齐简单说垂直方向居中对齐
alignItems 设置侧轴就是我们的水平方向用了组件中的 itemAlign属性值是 HorizontalAlign.Start 由左至右

那么这就很简单了想改变它的位置改 itemAlign 显然就可以了
我们在下面按钮上设置的点击事件中加入代码

this.itemAlign = HorizontalAlign.End;

将它设置末尾对齐
在这里插入图片描述
我们点击后它会立刻跑到末尾的位置但可能会显得太快了一下就跳过去了

我们将点击事件的代码改成这样

animateTo({
  duration: 3000,
},() => {
  this.itemAlign = HorizontalAlign.End;
})

在这里插入图片描述
这里我们调用 animateTo 动画效果然后第一个参数是一个json 里面放动画参数我们这里的参数是 duration 动画时长毫秒单位三千毫秒等于三秒
然后第二个参数是一个箭头函数里面写动画要做的事我们将改变对齐方式的代码放进来

此时我们再次点击它就有一个慢慢移动过去的效果了
在这里插入图片描述
它默认的这种速率大家会感受到刚开始快然后慢了最后又开始快了

我们在 animateTo 第一个参数JSON中写

curve: Curve.

它就会弹出很多提示
在这里插入图片描述
Linear 表示匀速
Ease 慢
EaseIn 慢慢的进入动画后面加快
EaseIn0ut 开头结尾相对慢一些中间比较快
这个大家可以自己查官方文档 Curve中的内容
这里我们先用 Linear 均匀的速度走完整个动画

我们点击后就会均匀的按duration时间慢慢位移过去
在这里插入图片描述
然后还有 delay 延迟属性
如下图箭头指向位置我们让他延迟两秒就是它触发动画会先停两秒然后才执行

还有很多属性大家可以自己去找 animateTo

onFinish 动画结束之后执行的函数

animateTo({
	duration: 3000,
	curve: Curve.Linear,
	delay: 2000,
	onFinish: (()=>{
	    console.log("动画结束");
	})
},() => {
   this.itemAlign = HorizontalAlign.End;
})

此时我们点击动画结束后控制台就会执行 onFinish输出
在这里插入图片描述
iterations 可以控制动画播放的次数
这里我们将 delay 延迟去掉不然太浪费时间了
下面 iterations 3 让它执行三次

点击后他就会执行三次才结束

iterations 给个 -1 即是一直重复

playMode 设置播放的模式
我们输入