如何实现逐帧动画?

【问题描述】想实现一个逐帧动画，点击“run”按钮，开始运动，点击“stop”按钮，运动停止。在官网上看到动画和旋转属性，自己尝试了一下，没有达到想要的效果， 求大佬提供一个demo?

【运行环境】硬件：rk3568； ROM: 3.2 Beta5； API 9

这是我写的一个demo，可以参考一下：

实现效果

● 点击“run”按钮，火柴人开始走动。

● 点击“stop”按钮，火柴人停止走动。

实现思路

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

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

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

本例使用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[] = []
    
16. 
    
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.   }
    
33. 
    
34.   // 销毁所有定时器
    
35.   clearAllInterval() {
    
36.     this.timerList.forEach((timer: number) => {
    
37.       clearInterval(timer)
    
38.     })
    
39.     this.timerList = []
    
40.   }
    
41. 
    
42.   doAnimation() {
    
43.     this.manWalk()
    
44.     this.treesMove()
    
45.   }
    
46. 
    
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)
    
76. 
    
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. }

复制代码