2024年最全web端动效 lottie-web 使用_lottie-web文档,前端开发面试宝典

总结

三套“算法宝典”

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

28天读完349页,这份阿里面试通关手册,助我闯进字节跳动

算法刷题LeetCode中文版(为例)

人与人存在很大的不同,我们都拥有各自的目标,在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人,但是我深刻知道自己想要的是一年比一年有进步。

最后,我想说的是,无论你现在什么年龄,位于什么城市,拥有什么背景或学历,跟你比较的人永远都是你自己,所以明年的你看看与今年的你是否有差距,不想做咸鱼的人,只能用尽全力去跳跃。祝愿,明年的你会更好!

由于篇幅有限,下篇的面试技术攻克篇只能够展示出部分的面试题,详细完整版以及答案解析,有需要的可以关注

yarn add lottie-web

  1. 使用方法
    我这里创建了一个组件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组件添加鼠标事件,官方文档

html部分修改

<div class="lottie" @mouseenter="onMouseenter" @mouseleave="onMouseleave"></div>
其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。



这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)

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

《前端开发四大模块核心知识笔记》  

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



最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。



我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。



  • 7
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
lottie-web是一个开源的JavaScript库,用于在Web上渲染和播放Lottie动画。Lottie动画是由Adobe After Effects创建的矢量动画,可以使用Bodymovin插件导出为JSON格式,然后在网页上使用lottie-web库进行渲染和播放。 lottie-web库提供了很多功能和选项,以便开发者可以根据自己的需求使用和定制动画。它可以用于创建交互式的动画效果,如按钮的点击动画、加载动画、进度条动画等。此外,它还支持设置动画的循环次数、播放速度、淡入淡出效果等。 在使用lottie-web时,我们需要引入相关的CSS和JavaScript文件,并通过HTML的canvas元素来创建动画的容器。然后,我们可以使用lottie.loadAnimation()方法来加载并初始化动画,在loadAnimation()方法中,我们可以传入一些参数,如JSON文件路径、容器元素、循环次数等。 一旦动画加载完成,我们就可以使用lottie.play()方法来播放动画,使用lottie.stop()方法来停止动画。此外,还有一些其他的方法,如lottie.pause()方法暂停动画,lottie.setSpeed()方法设置播放速度等。 值得一提的是,lottie-web还支持事件监听,我们可以通过lottie.addEventListener()方法来监听动画的各种事件,如动画加载完成、播放完成等,以便于我们在合适的时机进行相应的处理。 总之,lottie-web文档提供了全面的使用说明和示例代码,可供开发者参考和学习使用lottie-web,我们可以轻松地在Web使用Lottie动画,为网页添加更加生动和有趣的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值