首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >HarmonyNext动画大全02-显式动画

HarmonyNext动画大全02-显式动画

作者头像
万少
修改于 2025-02-10 09:30:11
修改于 2025-02-10 09:30:11
9200
代码可运行
举报
运行总次数:0
代码可运行

HarmonyNext动画大全02-显式动画

前言

上一篇文章我们介绍过属性动画animation的使用方法,那么本文就来学习和了解一下显示动画animateTo

animateTo

我们称之为显式动画,它本身是一个全局函数,通过调用函数的形式实现动画效果。显式动画animateTo和之前的属性动画

animation最大的区别在于 显式动画可以利用本身函数的特性实现多个显式动画连续调用,从而实现连贯性的动画。

基本语法

animateTo(value: AnimateParam, event: () => void): void

参数

类型

是否必填

描述

value

AnimateParam

设置动画效果相关参数。

event

() => void

指定动效的闭包函数

解释:

  1. AnimateParam 动画属性,在上一篇文章**《HarmonyNext动画大全01-属性动画》**内有详细介绍过 名称描述示例duration动画执行时间,单位毫秒1000tempo动画执行速度,默认是1,最小是01curve动画曲线 比如匀速、先快后慢等Curve.lineardelay延迟时间 单位毫秒1000iterations动画执行次数,-1 为无限1playMode动画播放模式 如播放两次时,每次都是从头开始播放PlayMode.NormalonFinish动画结束的回调函数 其中,onFinish 是我们实现连续动画的关键
  2. event 指定动效的闭包函数

基本示例

1
1
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Entry
@Component
struct Index {
  @State
  scaleXY: number = 1

  build() {
    Column() {
      Button("点我就变大啦")
        .scale({ x: this.scaleXY, y: this.scaleXY })
        .onClick(() => {
          //   显式动画
          animateTo({
            // 1 指定动画参数
            duration: 1000
          }, () => {
            // 2 指定动效的闭包函数
            this.scaleXY = 2
          })
        })
    }
    .width("100%")
    .height("100%")
    .padding(40)
  }
}

代码解释

  1. 可以看到 animateTo就是一个全局函数,可以直接调用
  2. duration: 1000 表示动画参数,动画的持续时间为1s
  3. this.scaleXY = 2 放在 animateTo的第二个参数上,回调函数,也是在这里指定要具体执行的动画效果

至此,我们发现 显式动画 animateTo 和 之前的属性动画 animation 没有太大区别。 对的,因为他们两个最大的区别就在于 animateTo 可以比较方便实现连续多个动画效果

连续多个动画效果

如下图:

2
2

可以看到以上动画其实是有多个动画效果组合在一起的。如

  1. 左上角 -> 右上角
  2. 右上角 -> 右下角
  3. 右下角 -> 左下角
  4. 左下角 -> 左上角

我们思考:该如何实现呢?

答案是:onFinishonFinish 是动画参数中的一个属性,表示动画执行完毕。

onFinish

当动画执行完毕时,便会自动触发 onFinish里面的逻辑

3
3
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Entry
@Component
struct Index {
  @State
  x: number = 0
  @State
  y: number = 0

  build() {
    Column() {
      Row()
        .width(100)
        .height(100)
        .backgroundColor("#499C54")// tips: translate 表示设置位移
        .translate({
          x: this.x,
          y: this.y
        })
        .onClick(() => {
          animateTo({
            // 动画执行完毕触发
            onFinish: () => {
              AlertDialog.show({ message: "动画执行完毕" })
            }
          }, () => {
            this.x = 100
            this.y = 0
          })
        })
    }
    .width("100%")
    .height("100%")
    .alignItems(HorizontalAlign.Start)

  }
}

因此,当我们想要实现连续执行多个动画时,就不断往onFinish里面套娃即可

2
2
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Entry
@Component
struct Index {
  @State
  x: number = 0
  @State
  y: number = 0

  build() {
    Column() {
      Row()
        .width(100)
        .height(100)
        .backgroundColor("#499C54")
        .translate({
          x: this.x,
          y: this.y
        })
        .onClick(() => {
          // 1 左上角 -> 右上角
          animateTo({
            onFinish: () => {
              // 2 右上角 -> 右下角
              animateTo({
                onFinish: () => {
                  // 3 右下角 -> 左下角
                  animateTo({
                    onFinish: () => {
                      // 4 左下角 -> 左上角
                      animateTo({}, () => {
                        this.x = 0
                        this.y = 0
                      })
                    }
                  }, () => {
                    this.x = 0
                    this.y = 100
                  })
                }
              }, () => {
                this.x = 100
                this.y = 100
              })
            }
          }, () => {
            this.x = 100
            this.y = 0
          })
        })
    }
    .width("100%")
    .height("100%")
    .alignItems(HorizontalAlign.Start)

  }
}

以上这个代码,就可以实现连续动画了。

回调函数地狱


但是,这个代码结构,妈妈看到了很难不夸你写得好

image-20240816011629339
image-20240816011629339

以上结构已经形成了一个回调函数地狱了,小伙伴们~😂

解决回调函数地狱

有开发经验的小伙们应该可以马上想到解决方法

  1. promise
  2. asyncawait

对的,回调函数地狱可以靠这两个老哥来解决。

先拿 animateToPromise 做一个封装

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const animateToPromise = (option: AnimateParam, fn: Function) => {
  const promise: Promise<undefined> = new Promise((resolve: Function) => {
    option.onFinish = () => {
      resolve()
    }
    animateTo(option, () => {
      fn()
    })
  })
  return promise
}

最后再来看解决后的版本

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  Row() {

  }
  .width(100)
  .height(100)
  .backgroundColor("#499C54")
  .translate({ x: this.x, y: this.y })
  .onClick(async () => {
    // 1 左上角 -> 右上角
    await animateToPromise({}, () => {
      this.x = 100
      this.y = 0
    })
    // 2 右上角 -> 右下角
    await animateToPromise({}, () => {
      this.x = 100
      this.y = 100
    })
    // 3 右下角 -> 左下角
    await animateToPromise({}, () => {
      this.x = 0
      this.y = 100
    })
    // 4 左下角 -> 左上角
    await animateToPromise({}, () => {
      this.x = 0
      this.y = 0
    })
  })

可以看到,封装后的代码,要简洁不少

image-20240816012146982
image-20240816012146982

小结

  1. animateTo 适合用在连续多个动画效果上
  2. animateTo 可以搭配promiseasyncawait 解决回调地狱的问题
  3. 由于篇幅问题,这里没有直接介绍promise和async。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-02-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Harmony Next 动画大全01-属性动画
动画,指的是我们应用中的元素,在发生位置、大小、颜色、形状等属性变化时,可以产出一个缓慢变化的效果。让用户的焦点一直跟随
万少
2025/02/09
1300
Harmony Next 动画大全01-属性动画
鸿蒙Next显示动画animateTo介绍
组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。 本文介绍一下以上几个属性各动画的执行效果,并且实现一个简单的点赞功能,看一下演示效果:
用户4773577
2025/06/28
590
Java实现坦克大战3.0
文章和代码已经归档至【Github仓库:https://github.com/timerring/java-tutorial 】。 IO 流-应用到坦克大战 坦克大战0.5版 增加功能 防止敌人坦克重叠运动 记录玩家的总成绩(累积击毁敌方坦克数),存盘退出【io流】 记泉退出游戏时敌人坦克坐标/方向,存盘退出【io流】 玩游戏时,可以选择是开新游戏还是继续上局游戏 package com.hspedu.tankgame5; /** * 炸弹 */ public class Bomb {
timerring
2023/05/09
1.7K0
Java实现坦克大战3.0
老Java程序员花一天时间写了个飞机大战,很舒服![通俗易懂]
前两天我发现CSDN上有两篇飞机大战的文章异常火爆,各种指标都很高(阅读、点赞、评论、收藏等),但都是python写的,竟然不是我大Java,说实话作为老java选手,我心里是有那么一些失落的,难道我大java打飞机不行?就算大java打飞机不行,那我用单身30年的打飞机手速,我肯定行(反正我的代码我做主,就是玩!),于是我决定一展伸手,用java写了一个飞机大战。我就问你们我打飞机行不行,我媳妇都说行,你们呢?欢迎我亲爱的大Java选手们 点赞+评论+收藏!给我冲、冲、冲。。。
全栈程序员站长
2022/07/23
5360
老Java程序员花一天时间写了个飞机大战,很舒服![通俗易懂]
鸿蒙开发:了解显式动画animateTo
上篇文章,我们简单了解了属性动画,知道了属性动画有两种实现方式,一种是animation,另一种是animateTo,上篇的案例基本上也都是使用animation来实现的,其实在案例中,大家也都发现了,animation是组件的通用属性,也就是说是和组件进行绑定的,如果想让多个组件进行动画播放,那么就需要绑定多个组件。有没有一种方式,执行起来,可以适用于多个可动画属性配置相同动画参数的动画呢,答案是必须有的,这就是animateTo。
程序员一鸣
2024/12/30
1890
鸿蒙开发:了解显式动画animateTo
斋藤康毅《深度学习入门》中的一点小错误
最近在看GAN(生成对抗网络,深度学习三巨头之一的杨立昆称GAN为“机器学习领域近20年来最酷的想法”。非常有意思的一个领域)相关的东西,复习了一下大神斋藤康毅的《深度学习入门》的第七章--卷积神经网络,发现了一点小错误,记录之。(这个错误只是这本优秀著作的一个小小的瑕疵,瑕不掩瑜,它还是我读过的最好的深度学习入门图书)‍‍
阿波张
2023/09/01
8430
斋藤康毅《深度学习入门》中的一点小错误
详解:22 border-radius
核心:记住,如果只写一个的话,代表四个角都变化 记住:如果写两个的话。代表左上角与右下角一样,右上角与左下角一样 记住:如果三个值的话,代表左上角 右上角 左下角 如果四个值的话,代表顺时针,从左上角----右上角—右下角—左下角 记住:border-top-left-radius: 80px 40px;这样的,都是上下然后左右的写的时候勒,80px是水平,然后是40px垂直
贵哥的编程之路
2020/10/28
6960
剑指offer | 04. 二维数组中的查找
针对一个二维数组,最简单的方式就是2层for循环逐一查找,这种方式时间复杂度O(M*N)。
孟君
2023/02/23
2860
剑指offer | 04. 二维数组中的查找
纯CSS实现水波纹的电池充电动画特效
animation 、 transform 和 filter 这三个就不多做介绍了,基本上所有的动画都会用到这两个属性。
老K博客
2024/01/05
5300
纯CSS实现水波纹的电池充电动画特效
【算法】打印算法题总结
本文记录了我对打印算法题的总结。先说说什么事打印算法题,就是按照一定的规则打印二维矩阵。例如:旋转正方形矩阵:
MapleYe
2020/03/28
7110
【CSS3】CSS3 动画 ② ( 动画序列 | 使用 from 和 to 定义动画序列 | 定义多个动画节点 | 代码示例 )
定义动画时 , 需要设置动画序列 , 下面的 0% 和 100% 设置的是 动画 在 运行到某个 百分比节点时 的 标签元素样式状态 ;
韩曙亮
2023/10/15
4200
【CSS3】CSS3 动画 ② ( 动画序列 | 使用 from 和 to 定义动画序列 | 定义多个动画节点 | 代码示例 )
利用径向渐变radial-gradient封装stylus、sass函数制作半圆透明切角效果
最开始的版本,只通过一个 bottom 或 top 的参数来封装调用,只能满足上下四个角半圆切角的效果,满足的场景有限:
人人都是码农
2023/11/17
2070
HarmonyOS:ArkTS 显式动画 animateTo 自学指南
在最近的项目开发工作中,我频繁需要为界面元素添加过渡动画效果,以提升用户体验。在这个过程中,我接触到了 ArkTS 提供的 ​​animateTo​​​ 全局显式动画接口。它为由于闭包代码导致的状态变化插入过渡动效提供了便捷的方式,能让布局类的宽高变化以及内容呈现出流畅的动画效果。然而,这个接口的使用细节和相关参数较多,文档虽然详细但较为零散,对于初学者来说理解和掌握起来有一定难度。因此,我决定撰写这篇博客,将自己的学习经验和理解整理成一份自学指南,希望能帮助其他开发者更快速、深入地掌握 ​​animateTo​​ 接口的使用。
李游Leo
2025/03/27
1600
HarmonyOS:ArkTS 显式动画 animateTo 自学指南
LeetCode题组:第836题-矩形叠加
矩形以列表 [x1, y1, x2, y2] 的形式表示,其中 (x1, y1) 为左下角的坐标,(x2, y2) 是右上角的坐标。如果相交的面积为正,则称两矩形重叠。需要明确的是,只在角或边接触的两个矩形不构成重叠。给出两个矩形,判断它们是否重叠并返回结果。
K同学啊
2020/04/10
6620
我用Zdog画了一个Canvas
什么是canvas,简单来说就是一个画布,利用js在画布上绘制图案,这个东西是我在逛好友@豆豆 的博客看到的,他画的是他的头像,感觉比较个性,作为追求个性的我就去尝试画了一下,刚开始摸索不是很熟,以至于我折腾了一下午!介绍一下折腾过程~
若志奕鑫
2021/12/23
7000
我用Zdog画了一个Canvas
iOS利用锚点实现定点缩放弹窗
demo下载地址:https://download.csdn.net/download/u011018979/16092830
公众号iOS逆向
2021/07/29
1.8K0
详解:24 圆角的变化,对你的加深margin理解可能会有可能
核心:margin:100px auto;核心在于有两个参数,第一个为上下,第二个为左右,,上下代表上下都为100哈, 问题?为什么下也为100px呢,因为你看哈
贵哥的编程之路
2020/10/28
3710
详解:24   圆角的变化,对你的加深margin理解可能会有可能
iOS动画小知识:定点缩放弹窗(利用锚点anchorPoint进行实现)包含完整demo
每一个UIView内部都默认关联着一个CALayer, UIView有frame、bounds和center三个属性,CALayer也有类似的属性,分别为frame、bounds、position、anchorPoint。
公众号iOS逆向
2022/08/22
2.2K0
iOS动画小知识:定点缩放弹窗(利用锚点anchorPoint进行实现)包含完整demo
鸿蒙特效教程09-深入学习animateTo动画
通过两个常见的按钮动画效果,深入学习 HarmonyOS Next 的 animateTo 动画,以及探索最佳实践。
苏杰豪
2025/03/26
1590
鸿蒙特效教程09-深入学习animateTo动画
OpenHarmony动画详解
动画是组件的基础特性之一,精心设计的动画使 UI 变化更直观,平滑的动画效果能够很好地增强差异性功能的过渡,有助于改进应用程序的外观并改善用户体验。
小帅聊鸿蒙
2024/07/28
2510
OpenHarmony动画详解
推荐阅读
相关推荐
Harmony Next 动画大全01-属性动画
更多 >
交个朋友
加入架构与运维学习入门群
系统架构设计入门 运维体系构建指南
加入架构与运维工作实战群
高并发系统设计 运维自动化实践
加入[架构及运维] 腾讯云技术交流站
云架构设计 云运维最佳实践
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验