Web前端最全web端动效 lottie-web 使用_lottie-web文档(1)，头条hr面试

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

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

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

required: true
},
autoplay: {
type: Boolean,
default: true
},
loop: {
type: Boolean,
default: true
}
},
data () {
return {
lottie: null
}
},
mounted () {
this.intLottie()
},
methods: {
intLottie () {
const { animationData, autoplay, loop } = this
this.lottie = lottie.loadAnimation({
container: this.$el, // 渲染容器
renderer: ‘svg’, // 渲染方式 svg|canvas|html
loop, // 是否循环 true|false|number
autoplay, // 自动播放 true|false
animationData // lottie json文件
})
}
}
}

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



1
2
3
4
5

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


html部分修改



1
2
3
4
5
6
7
8
9
10

methods部分修改



1
2
3
4
5

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)

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

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