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