项目简介:
为配合《奔跑吧生态篇》开播,Z视介策划了“奔跑吧生态合伙人”运营活动。利用 Vue Lottie 插件
开发了一款交互性小游戏,玩家可以通过投掷骰子、控制船只前进的方式搜集碎片,合成之后进行抽奖。
项目中的贡献:
1. 通过在Vue组件中集成Lottie动画库,实现了在应用中展示复杂的动画效果,使用Lottie提供的API,控制动画
的播放、暂停和事件触发,与用户的交互行为实现无缝衔接。通过对动画的状态管理和性能优化,保证了动
画的流畅性和高效性。
需求及问题:
当玩家掷骰子产生1-3的随机数,河岸小船动画移动相应的步数,现在需要设置特定的打卡点,
当小船到达这些打卡点时,可以提升玩家中碎片的概率。然而,当连续抛出重复的点数后,出现了骰子动画没
有重新播放的情况
解决办法:
根据视频总帧数、每个打卡点帧数位置和骰子每一步的步长帧数,判断是否到达打卡点,传给后
端,并且使用playSegmentsLottie设定动画开始到结束的帧数来控制动画。bug的解决是通过在骰子动画页面
通过vue-lottie中的addEventListener('complete