HarmonyOS 通过 animateTo讲解尺寸动画效果

上文 HarmonyOS讲解并演示 animateTo 动画效果我们已经做出了基本的动画效果

也对 animateTo 的使用比较熟悉了

第一个参数是配置动画参数的json 第二个参数则是改变我们元素属性值的事件

但属性值远远不止位置属性

本文我们来说通过尺寸变化完成动画效果

如果你有看过我的上文

其实我说的这个你应该会觉得非常简单的

只需要在第二个参数中的箭头函数中去改变元素宽高属性就OK了

我们可以直接将代码写成这样

typescript 复制代码

@Entry
@Component
struct Index {

  @State ymWidth: number = 100;
  @State ymHeight: number = 50;

  build() {
    Column({space: 30}) {
      Text("修改元素尺寸")
        .fontSize(38)
        .margin({top:188})
      Button()
        .width(this.ymWidth)
        .height(this.ymHeight)

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

这里我们直接定义了 ymWidth 和 ymHeight 都是 number 数值类型

然后写了一个 button 用 ymWidth 和 ymHeight 控制它的高度和宽度

然后下面按钮点击事件调用 animateTo

第二个参数中将 ymWidth 和 ymHeight 都加大

然后我们第一个参数 json中和上文说的都是一样的

duration 动画总用时控制在 3000毫秒就是三秒

curve 用 Linear 整个动画匀速进行

iterations 动画重复 3次

playMode 模式设置 Alternate 就是会执行完动画再折返一次例如我们上文中是动画到最右侧然后还会从最右侧回到最左侧

这里我们的效果就是放大之后还会缩小回来

我们运行代码

点击执行文案的按钮后中心的button 就会放大然后因为PlayMode.Alternate, 每次放到最大还会瘦小回去直到最后一次动画执行完他就不会瘦小回去了