Web前端最新web端动效 lottie-web 使用_lottie-web文档，前端技术类校招面试题汇总

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

Lottie 是 Airbnb 开发的，一个适用于 Android、iOS、Web 和 Windows 的库，能够渲染 Adob​​e After Effects 动画特效。

1. 安装

yarn add lottie-web

2. 使用方法
   我这里创建了一个组件MyLottie.vue

<!-- components/MyLottie -->
<template>
  <!-- 渲染容器 -->
  <div class="lottie"></div>
</template>

<script>
import lottie from 'lottie-web'

export default {
 props: {
 animationData: {
 type: Object,
 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文件
 })
 }
 }
}
</script>

<style lang="scss" scoped>
.lottie {
 width: 200px;
 height: 200px;
}
</style>

在页面引用组件，可以去官方社区下载动画json

<template>
  <div>
    <MyLottie :animationData="lottieJson" />
  </div>
</template>

<script>
import MyLottie from '@/components/MyLottie'

export default {
 name: 'Home',
 components: {
 MyLottie
 },
 data () {
 return {
 // lottie json文件
 lottieJson: require('@/assets/lottie/lottie.json')
 }
 }
}
</script>

这样一个lottie动画就出来了

下面结合lottie的一些实例方法，将我们的lottie组件添加鼠标事件，官方文档

最后

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

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

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