用iH5实现“抖音不嗨心治愈所”复刻

1、首页显示时，给一个“判断计数器”赋值为1（这是由于“手机摇晃”事件只在舞台下，所以用计数器来判断不同地方的事件触发）

2、第二页是比较简单的上传页面，可以切换两种模式（上传图片这里用到了画布遮罩）在这边就不细讲啦~

3、然后上传/画画成功，则跳转到一个“过渡页面”

4、这里把“画画”“头像”的图片做一个区分

5、因为“手机摇晃”事件相对灵敏，所以用了一个“摇晃次数”的计数器来当它触发的限制条件

6、同理，把“跳舞的界面”放在不同的页面，用“摇晃次数”计数器来限制触发并跳转到下一页

7、由于这几个页面的逻辑是一样的，我就直接挑一个重点来讲~

譬如第一个“跳舞界面”，

8、这些背景图是很多张组成的图片序列。用时间轴当然也是可以做成的，但是配合头像去卡帧，会比较繁琐。 

所以，我的做法是！！现在ps里把头像和背景图片每一帧排好

9、把头像的数值填到Excel表格中，

然后直接把Excel表格导入数据库或者二维数组里。

（我在这里是导入数据库）

    a-x轴，b-y轴，c-w宽，d-h高，e-旋转角度

10、页面显示的时候，设定页面、设置头像资源

11、并且对数据库里的数据进行输出到“编辑数据”的二维数组中

12、设一个“控制帧数”的触发器，来控制一个“帧数计数器”的播放。

13、控制每一帧变化，以及循环的事件，都在帧数计数器。

14、 (注：这是控制每一帧的播放）

15、 (注：设置播放到最后一帧的时候，重新循环）