2024年web端动效 lottie-web 使用_lottie-web文档(2)，Web前端面试题

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

width: 200px;
height: 200px;
}

在页面引用组件，可以去[官方社区](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)下载动画json

这样一个lottie动画就出来了  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4c32b323eb2e41fea5608366d6fdd248.gif#pic_center)  
 下面结合lottie的一些实例方法，将我们的lottie组件添加鼠标事件，[官方文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


html部分修改

methods部分修改

methods: {
intLottie () {
let { animationData, autoplay, loop } = this
if (!autoplay) {
// 这里交互播放不循环
loop = false
}
this.lottie = lottie.loadAnimation({
container: this.$el, // 渲染容器
renderer: ‘svg’, // 渲染方式
loop, // 是否循环
autoplay, // 自动播放
animationData // lottie json文件
})
},
onMouseenter () {
// 我这里demo，非自动播放则判断为鼠标交互播放，具体封装根据自身业务场景来
if (!this.autoplay) {
this.lottie.setDirection(1)
this.lottie.play()
// 监听lottie播放结束
this.lottie.addEventListener(‘complete’, e => {
this.lottie.stop()
})
}
},
onMouseleave () {
this.lottie.removeEventListener(‘complete’)
if (!this.autoplay) {
// 改变播放方向，鼠标移出回退
this.lottie.setDirection(-1)
}
}
}
}

引入组件处修改

下面是改造后的效果  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f5e232d6583145fb940459e014ea7574.gif#pic_center)








### 文末
篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

![](https://img-blog.csdnimg.cn/img_convert/04273c2f50e58b6822663c5b2f379206.png)  

![](https://img-blog.csdnimg.cn/img_convert/081b5236ebd9ff24af676bcd4a51c99e.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**