OpenHarmony实战开发-如何实现逐帧动画

最新推荐文章于 2024-07-25 20:17:04 发布
最新推荐文章于 2024-07-25 20:17:04 发布
阅读量714 收藏 19
点赞数 14
分类专栏： 鸿蒙 HarmonyOS OpenHarmony 文章标签： OpenHarmony 鸿蒙零基础 HarmonyOS harmonyos 鸿蒙开发 鸿蒙 鸿蒙应用开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70749039/article/details/139130585
版权
鸿蒙 同时被 3 个专栏收录
661 篇文章 4 订阅
订阅专栏
HarmonyOS
654 篇文章 4 订阅
订阅专栏
OpenHarmony
648 篇文章 6 订阅
订阅专栏

场景说明

逐帧动画是常见的一种动画呈现形式，本例就为大家介绍如何通过translate()，setInterval()，clearAllInterval()等方法实现逐帧动画。

效果呈现

本例最终效果如下：

  • 点击“run”按钮，火柴人开始走动。
  • 点击“stop”按钮，火柴人停止走动。

在这里插入图片描述

运行环境

  • IDE：DevEco Studio 3.1 Beta1
  • SDK：Ohos_sdk_public 3.2.11.9 (API Version9 Release)

实现思路

本例的实现有两个关键点：

  • 将连续走动的火柴人拆分为多帧静态图像，在固定的时间间隔内逐帧将图像移动到动画窗口，间隔时间要小于肉眼可察觉的时间。循环上述动作，就可以实现火柴人的走动动画。火柴人静态图像如下：

man

  • 将背景图片以固定速度相对于火柴人走动方向反方向移动，从而实现火柴人向前走动的效果。 背景图如下：
    在这里插入图片描述

本例使用translate()控制火柴人的移动，用backgroundImagePosition()控制背景图的移动。另外，通过setInterval()设置火柴人移动的时间间隔，通过clearAllInterval()清除移动。

开发步骤

1.搭建UI框架。

使用两个Row组件分别呈现背景图和火柴人，第二个Row组件作为第一个Row组件的子组件，父Row组件的背景设置为背景图，子Row组件中添加Image组件用来呈现火柴人单帧图像。

@Entry
@Component
export default struct frameAnimation {
  build() {
    Column() {
      // 父Row组件
      Row() {
        // 子Row组件
        Row() {
          // 通过Image组件显示火柴人图像
          Image($r("app.media.man")).height(60).width(545.16)
        }.width(100)
        .justifyContent(FlexAlign.Start)
        .alignItems(VerticalAlign.Top)
        // 截取显示与背景同等大小的区域，控制单个火柴人显示在画面中
        .clip(true)
      }
      // 添加背景图像
      .backgroundImage($r("app.media.background"))
      // 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
      .backgroundImageSize(ImageSize.Cover)
      .width('100%')
      .height(130)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Bottom)
      Row() {
        // 添加跑动按钮
        Button('run')
          .margin({ right: 10 })
          .type(ButtonType.Normal)
          .width(75)
          .borderRadius(5)
        // 添加停止按钮
        Button('stop')
          .type(ButtonType.Normal)
          .borderRadius(5)
          .width(75)
          .backgroundColor('#ff0000')
      }.margin({ top: 30, bottom: 10 })
    }.width('100%').width('100%').padding({ top: 30 })
  }
}

2.添加火柴人和背景图片的移动逻辑。

通过状态变量设定火柴人和背景图片的位置，位置变化时可以实时刷新UI界面。

// 火柴人位置变量
@State manPostion: {
  x: number,
  y: number
} = { x: 0, y: 0 }
// 背景图位置变量
@State treePosition: {
  x: number,
  y: number
} = { x: 0, y: 0 }

给火柴人和背景图片添加位置属性。

Row() {
  Row() {
    Image($r("app.media.man"))
      .height(60)
      .width(545.16)
      // 通过translate实现火柴人的位移。绑定manPosition，用来改变火柴人位置。
      .translate(this.manPostion)
  }
  ...
}
.backgroundImage($r("app.media.background"))
.backgroundImageSize(ImageSize.Cover)
// 通过backgroundImagePosition实现背景图片的位移。绑定treePosition，用来改变背景图片的位置。
.backgroundImagePosition(this.treePosition)
...

3.为’‘run’'按钮和"stop"按钮绑定控制逻辑。

构建火柴人和背景图片移动的方法，用来设定火柴人和背景图片每次移动的距离。这里要注意火柴人每次移动的距离等于两个火柴人之间的间隔距离（像素值）。

// 火柴人移动方法
manWalk() {
  if (this.manPostion.x <= -517.902) {
    this.manPostion.x = 0
  } else {
    // 每次移动的距离为火柴人静态图像之间的间隔距离
    this.manPostion.x -= 129.69
  }
}
// 背景移动方法
treesMove() {
  if (this.treePosition.x <= -1215) {
    this.treePosition.x = 0
  } else {
    this.treePosition.x -= 20
  }
}

创建doAnimation()方法调用上述两个方法，以便在后续的定时器中使用。

doAnimation() {
  this.manWalk()
  this.treesMove()
  }

通过setInterval为“run”按钮绑定走动逻辑。

Button('run')
  .margin({ right: 10 })
  .type(ButtonType.Normal)
  .width(75)
  .borderRadius(5)
  .onClick(() => {
    this.clearAllInterval()
    // 创建定时器，调用doAnimation方法，启动动画
    let timer = setInterval(this.doAnimation.bind(this), 100)
    this.timerList.push(timer)
  })

通过clearAllInterval为“stop”按钮绑定停止逻辑。

Button('stop')
  .type(ButtonType.Normal)
  .borderRadius(5)
  .width(75)
  .backgroundColor('#ff0000')
  .onClick(() => {
    // 清理定时器，停止动画
    this.clearAllInterval()
})

完整代码

本例完整代码如下：

@Entry
@Component
export default struct frameAnimation {
  // 火柴人位置变量
  @State manPostion: {
    x: number,
    y: number
  } = { x: 0, y: 0 }
  // 背景图位置变量
  @State treePosition: {
    x: number,
    y: number
  } = { x: 0, y: 0 }
  // 定时器列表，当列表清空时，动画停止
  private timerList: number[] = []

  // 火柴人移动方法
  manWalk() {
    if (this.manPostion.x <= -517.902) {
      this.manPostion.x = 0
    } else {
      this.manPostion.x -= 129.69
    }
  }
  // 背景移动方法
  treesMove() {
    if (this.treePosition.x <= -1215) {
      this.treePosition.x = 0
    } else {
      this.treePosition.x -= 20
    }
  }

  // 销毁所有定时器
  clearAllInterval() {
    this.timerList.forEach((timer: number) => {
      clearInterval(timer)
    })
    this.timerList = []
  }

  doAnimation() {
    this.manWalk()
    this.treesMove()
  }

  build() {
    Column() {
      // 父Row组件
      Row() {
        // 子Row组件
        Row() {
          // 通过Image组件显示火柴人图像
          Image($r("app.media.man"))
            .height(60)
            .width(545.16)
            // 通过translate实现火柴人的位移。绑定manPosition变量，用来改变火柴人位置。
            .translate(this.manPostion)
        }
        .width(100)
        .justifyContent(FlexAlign.Start)
        .alignItems(VerticalAlign.Top)
        // 截取显示与背景同等大小的区域，控制单个火柴人显示在画面中
        .clip(true)
      }
      // 添加背景图像
      .backgroundImage($r("app.media.background"))
      // 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
      .backgroundImageSize(ImageSize.Cover)
      // 通过backgroundImagePosition实现背景图片的位移。绑定treePosition，用来改变背景图片的位置。
      .backgroundImagePosition(this.treePosition)
      .width('100%')
      .height(130)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Bottom)

      Row() {
        // 添加跑动按钮
        Button('run')
          .margin({ right: 10 })
          .type(ButtonType.Normal)
          .width(75)
          .borderRadius(5)
          .onClick(() => {
            this.clearAllInterval()
            let timer = setInterval(this.doAnimation.bind(this), 100)
            this.timerList.push(timer)
          })
        // 添加停止按钮
        Button('stop')
          .type(ButtonType.Normal)
          .borderRadius(5)
          .width(75)
          .backgroundColor('#ff0000')
          .onClick(() => {
            this.clearAllInterval()
          })
      }.margin({ top: 30, bottom: 10 })
    }.width('100%').width('100%').padding({ top: 30 })
  }
}

参考

  • Timer (定时器)
  • 图形变换
  • 背景设置

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

不入流HarmonyOS开发
关注
  • 14
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenHarmony教程指南—ArkTS时钟
m0_70749039的博客
03-12 739
本示例通过使用@ohos.display 接口以及Canvas组件来实现一个简单的时钟应用。
基于OpenHarmony的智能金属探测器
OpenHarmony_dev的博客
07-05 566
目录一、简介二、运行效果三、功能实现四、总结五、参考链接智能金属探测器是基于 OpenAtom OpenHarmony（以下简称“OpenHarmony”）操作系统，利用电磁感应原理来探测周围的金属物体。该样例采用多设备协同的方式，兼容 OpenHarmony 设备开发与应用开发，整个样例体现了 OpenHarmony 的 NAPI、eTS UI、UI 管理状态 @state 和音频播放等技术特性。本项目由 Geek_Lite_Board 开发板和润和 RK3568 开发板构成，Geek_Lite_Boa
OpenHarmony标准设备应用开发（二）——布局、动画与音乐
OpenHarmony_dev的博客
04-07 1533
（以下内容来自开发者分享，不代表 OpenHarmony 项目群工作委员会观点） 邢碌 上一章我们讲解了应用编译环境准备，设备编译环境准备，开发板烧录，将一个最简单的 OpenAtom OpenHarmony（以下简称“OpenHarmony”）程序安装到我们的标准设备上。 本章是 OpenHarmony 标准设备应用开发的第二篇文章。我们通过知识体系新开发的几个基于 OpenHarmony3.1 Beta 标准系统的样例：分布式音乐播放、传炸弹、购物车等样例，分别介绍下音乐播放、显示
OpenHarmony实战开发-减少动画丢帧。
2401_82546228的博客
04-22 443
在播放动画或者生成动画时，画面产生停滞而导致帧率过低的现象，称为动画丢帧。
HarmonyOS/OpenHarmony应用开发-ArkOpenHarmony应用开发-ArkTS画布组件Canvas.doc
03-02
HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas 是 ArkTS 框架中的一种重要组件，用于自定义绘制图形。该组件从 API Version 8 开始支持，后续版本...
openharmony-for-imx6ull-master.zip
03-06
"openharmony-for-imx6ull-master.zip" 是针对NXP i.MX6ULL系列开发板优化的鸿蒙系统补丁集合，旨在为该系列硬件提供更好的驱动支持，从而实现更高效、稳定的运行环境。 i.MX6ULL是NXP半导体公司推出的一款基于ARM ...
openharmony liteos-m 3.1移植
03-31
- 开发过程中，遵循良好的编程规范，利用OpenHarmony提供的调试工具进行问题排查。 总之，移植OpenHarmony LiteOS-M 3.1到ARM架构的设备是一项涉及硬件理解、软件配置、编译工具使用、代码调试等多个环节的工作。...
openharmony-docker-master.zip
03-23
OpenHarmony_Docker 则是针对 OpenHarmony 项目在编译时面临的环境不统一的情况而使用 Docker 来对其进行容器化编译的一个项目
OpenHarmony（ohcommandline-tools-windows-2.0.0.2.zip）
11-08
`ohcommandline-tools-windows-2.0.0.2.zip`是针对OpenHarmony开发的命令行工具集，特别为Windows平台设计，帮助开发者在命令行环境下进行项目构建、编译、调试等操作。 该压缩包包含的主要文件`oh-command-line-...
鸿蒙界面开发
qq_46025779的博客
07-23 1821
界面开发界面开发-布局思路属性方法字体颜色文字溢出省略号、行高Image图片组件输入框与按钮综合实训设计资源-svg图标欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入MarkdownText-to-HTML。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1172
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
HarmonyOS和OpenHarmony区别联系
Jason_Lee155的博客
07-23 600
刚开始接触鸿蒙开发的时候经常看到HarmonyOS和OpenHarmony频繁的出现在文章和文档之中，那么这两个名词分别是什么意思，他们之间又有什么联系呢？
【HarmonyOS】应用推送使用个推SDK如何实现？
最新发布
我的小窝
07-25 712
鸿蒙应用如何使用个推SDK实现推送功能？
HarmonyOS鸿蒙应用开发-ZRouter让系统路由表变得更简单
学习，思考，输出
07-22 738
ZRouter是基于Navigation系统路由表和Hvigor插件实现的动态路由方案。系统路由表是API 12起开始支持的，可以帮助我们实现动态路由的功能，其目的是为了解决多个业务模块（HAR/HSP）之间解耦问题，从而实现业务的复用和功能的扩展。首先在目标模块中的module.json5文件中配置路由表文件route_map.json的指引；然后在resources/base/profile目录下创建route_map.json文件，用于配置每个页面路由的信息；
鸿蒙OpenHarmony Native API【HiLog】
2301_76813281的博客
07-20 912
HiLog模块实现日志打印功能。开发者可以通过使用这些接口实现日志相关功能，输出日志时可以指定日志类型、所属业务领域、日志TAG标识、日志级别等。8。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号2
Gusha_的博客
07-21 1763
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
OpenHarmony-3.2-Beta2官方文档地址
06-09
OpenHarmony-3.2-Beta2的官方文档地址是https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/quick-start.md，你可以在这里查找和获取OpenHarmony-3.2-Beta2的相关文档和资料。希望这个信息对你有所...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值