OpenHarmony开发者论坛

标题: 如何实现逐帧动画? [打印本页]
作者: zhanglin    时间: 2023-8-30 09:37
标题: 如何实现逐帧动画?
[md]【问题描述】想实现一个逐帧动画，点击“run”按钮，开始运动，点击“stop”按钮，运动停止。在官网上看到动画和旋转属性，自己尝试了一下，没有达到想要的效果， 求大佬提供一个demo?

【运行环境】硬件：rk3568；  ROM:  3.2 Beta5；  API 9
[/md]
作者: gelsang    时间: 2023-8-30 14:41

这是我写的一个demo，可以参考一下：
实现效果
● 点击“run”按钮，火柴人开始走动。
● 点击“stop”按钮，火柴人停止走动。
 (, 下载次数: 0)

实现思路
本例的实现有两个关键点：
● 将连续走动的火柴人拆分为多帧静态图像，在固定的时间间隔内逐帧将图像移动到动画窗口，间隔时间要小于肉眼可察觉的时间。循环上述动作，就可以实现火柴人的走动动画。 火柴人静态图像如下：
(, 下载次数: 0)

● 将背景图片以固定速度相对于火柴人走动方向反方向移动，从而实现火柴人向前走动的效果。 背景图如下：
(, 下载次数: 0)

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


开发步骤
1.  搭建UI框架。
使用两个Row组件分别呈现背景图和火柴人，第二个Row组件作为第一个Row组件的子组件，父Row组件的背景设置为背景图，子Row组件中添加Image组件用来呈现火柴人单帧图像
  1. @Entry
  2. @Component
  3. export default struct frameAnimation {
  4.   build() {
  5.     Column() {
  6.       // 父Row组件
  7.       Row() {
  8.         // 子Row组件
  9.         Row() {
  10.           // 通过Image组件显示火柴人图像
  11.           Image($r("app.media.man")).height(60).width(545.16)
  12.         }.width(100)
  13.         .justifyContent(FlexAlign.Start)
  14.         .alignItems(VerticalAlign.Top)
  15.         // 截取显示与背景同等大小的区域，控制单个火柴人显示在画面中
  16.         .clip(true)
  17.       }
  18.       // 添加背景图像
  19.       .backgroundImage($r("app.media.background"))
  20.       // 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
  21.       .backgroundImageSize(ImageSize.Cover)
  22.       .width('100%')
  23.       .height(130)
  24.       .justifyContent(FlexAlign.Center)
  25.       .alignItems(VerticalAlign.Bottom)
  26.       Row() {
  27.         // 添加跑动按钮
  28.         Button('run')
  29.           .margin({ right: 10 })
  30.           .type(ButtonType.Normal)
  31.           .width(75)
  32.           .borderRadius(5)
  33.         // 添加停止按钮
  34.         Button('stop')
  35.           .type(ButtonType.Normal)
  36.           .borderRadius(5)
  37.           .width(75)
  38.           .backgroundColor('#ff0000')
  39.       }.margin({ top: 30, bottom: 10 })
  40.     }.width('100%').width('100%').padding({ top: 30 })
  41.   }
  42. }
复制代码

2. 添加火柴人和背景图片的移动逻辑。
通过状态变量设定火柴人和背景图片的位置，位置变化时可以实时刷新UI界面。
  1. // 火柴人位置变量
  2. @State manPostion: {
  3.   x: number,
  4.   y: number
  5. } = { x: 0, y: 0 }
  6. // 背景图位置变量
  7. @State treePosition: {
  8.   x: number,
  9.   y: number
  10. } = { x: 0, y: 0 }
复制代码

给火柴人和背景图片添加位置属性。
  1. Row() {
  2.   Row() {
  3.     Image($r("app.media.man"))
  4.       .height(60)
  5.       .width(545.16)
  6.       // 通过translate实现火柴人的位移。绑定manPosition，用来改变火柴人位置。
  7.       .translate(this.manPostion)
  8.   }
  9.   ...
  10. }
  11. .backgroundImage($r("app.media.background"))
  12. .backgroundImageSize(ImageSize.Cover)
  13. // 通过backgroundImagePosition实现背景图片的位移。绑定treePosition，用来改变背景图片的位置。
  14. .backgroundImagePosition(this.treePosition)
  15. ...
复制代码


3. 为''run''按钮和"stop"按钮绑定控制逻辑。
构建火柴人和背景图片移动的方法，用来设定火柴人和背景图片每次移动的距离。这里要注意火柴人每次移动的距离等于两个火柴人之间的间隔距离（像素值）。
  1. // 火柴人移动方法
  2. manWalk() {
  3.   if (this.manPostion.x <= -517.902) {
  4.     this.manPostion.x = 0
  5.   } else {
  6.     // 每次移动的距离为火柴人静态图像之间的间隔距离
  7.     this.manPostion.x -= 129.69
  8.   }
  9. }
  10. // 背景移动方法
  11. treesMove() {
  12.   if (this.treePosition.x <= -1215) {
  13.     this.treePosition.x = 0
  14.   } else {
  15.     this.treePosition.x -= 20
  16.   }
  17. }
复制代码
创建doAnimation()方法调用上述两个方法，以便在后续的定时器中使用。
  1. doAnimation() {
  2.   this.manWalk()
  3.   this.treesMove()
  4.   }
复制代码
通过setInterval为“run”按钮绑定走动逻辑。
  1. Button('run')
  2.   .margin({ right: 10 })
  3.   .type(ButtonType.Normal)
  4.   .width(75)
  5.   .borderRadius(5)
  6.   .onClick(() => {
  7.     this.clearAllInterval()
  8.     // 创建定时器，调用doAnimation方法，启动动画
  9.     let timer = setInterval(this.doAnimation.bind(this), 100)
  10.     this.timerList.push(timer)
  11.   })
复制代码
通过clearAllInterval为“stop”按钮绑定停止逻辑。
  1. Button('stop')
  2.   .type(ButtonType.Normal)
  3.   .borderRadius(5)
  4.   .width(75)
  5.   .backgroundColor('#ff0000')
  6.   .onClick(() => {
  7.     // 清理定时器，停止动画
  8.     this.clearAllInterval()
  9. })
复制代码

完整代码
本例完整代码如下：
  1. @Entry
  2. @Component
  3. export default struct frameAnimation {
  4.   // 火柴人位置变量
  5.   @State manPostion: {
  6.     x: number,
  7.     y: number
  8.   } = { x: 0, y: 0 }
  9.   // 背景图位置变量
  10.   @State treePosition: {
  11.     x: number,
  12.     y: number
  13.   } = { x: 0, y: 0 }
  14.   // 定时器列表，当列表清空时，动画停止
  15.   private timerList: number[] = []

  17.   // 火柴人移动方法
  18.   manWalk() {
  19.     if (this.manPostion.x <= -517.902) {
  20.       this.manPostion.x = 0
  21.     } else {
  22.       this.manPostion.x -= 129.69
  23.     }
  24.   }
  25.   // 背景移动方法
  26.   treesMove() {
  27.     if (this.treePosition.x <= -1215) {
  28.       this.treePosition.x = 0
  29.     } else {
  30.       this.treePosition.x -= 20
  31.     }
  32.   }

  34.   // 销毁所有定时器
  35.   clearAllInterval() {
  36.     this.timerList.forEach((timer: number) => {
  37.       clearInterval(timer)
  38.     })
  39.     this.timerList = []
  40.   }

  42.   doAnimation() {
  43.     this.manWalk()
  44.     this.treesMove()
  45.   }

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

  77.       Row() {
  78.         // 添加跑动按钮
  79.         Button('run')
  80.           .margin({ right: 10 })
  81.           .type(ButtonType.Normal)
  82.           .width(75)
  83.           .borderRadius(5)
  84.           .onClick(() => {
  85.             this.clearAllInterval()
  86.             let timer = setInterval(this.doAnimation.bind(this), 100)
  87.             this.timerList.push(timer)
  88.           })
  89.         // 添加停止按钮
  90.         Button('stop')
  91.           .type(ButtonType.Normal)
  92.           .borderRadius(5)
  93.           .width(75)
  94.           .backgroundColor('#ff0000')
  95.           .onClick(() => {
  96.             this.clearAllInterval()
  97.           })
  98.       }.margin({ top: 30, bottom: 10 })
  99.     }.width('100%').width('100%').padding({ top: 30 })
  100.   }
  101. }
复制代码


















欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5