1.Moment.js、Day.js、Miment,日期时间库怎么选?2.Parallax.js:让智能设备视差效果更智能、更自然
3.Lottie动画全攻略:硬核还原100%页面动画效果
4.用particles.js,让你的网站背景特效瞬间脱颖而出,惊艳所有人5.字节跳动出大招!IconPark图标库,自定义图标,好用到停不下来!6.比肩Element和Ant Design,PrimeVue同样优秀,你不可不知的UI框架新星!7.ChartCube图表快速上手指南,轻松打造专业图表,简单到不可思议!8.Vue地图开发新利器:Vue Baidu Map,轻松对接,效率翻倍!9.尤雨溪都在推荐的Naive UI,Vue组件库的新选择,好用到爆!10.【uni-app必备】uView UI框架,多端开发神器,让开发更简单、更高效!11.Driver.js:轻量级用户引导插件,小而美的界面,让用户体验飞起来!12.Ionicons图标库: 让网页栩栩生辉,Ionic Framework的经典之作,图标库新标杆!13.Clipboard.js:一个被157317个项目疯抢的JS开源库14.探“锁”源头:synchronized、偏向锁与锁膨胀的秘密!15.解"锁"疑惑:偏向锁为什么不是锁?锁升级又是什么?何时禁用偏向锁和轻量级锁?重量级锁怎么回事?16.秒懂!5分钟图解 Elasticsearch 搜索原理,快速掌握全文检索技术!17.2025年GitHub Copilot免费激活,周年庆典福利大放送!18.【深度解析】DDD领域驱动设计,分层架构秘籍大公开!让你的设计更上一层楼!19.AI编程工具怎么选?GitHub Copilot、AI Assistant与Cursor,谁是你的最佳拍档?20.【免费福利】腾讯云+DeepSeek:DeepSeek-V3/R1免费,羊毛党速来最近开发大屏页面碰到一个困境:动画还原
。
- 照着设计动画模仿,猜测动画时长,手创建贝塞尔曲线……
- 调整细节耗时耗力,效果还差强人意…
- 好不容易实现了,还原度却达不到要求
小伙伴们是不是也有类似的经历呢?大家可以留言分享哦!
被设计师折磨一顿后,大师兄找到了解决这个困境的方案。它就是今天的主角:Lottie
Lottie
是Airbnb开源的一个 面向iOS、Android、React Native 的动画库,能分析 AE 导出的动画(需要用bodymovin导出为json格式),并且能让原生 App 像使用静态素材一样使用这些动画,完美实现动画效果。
下面是Lottie
提供的官方效果图。类似下面这种一段动画的播放,非常适合使用Lottie
来做。
我们先来看下整个流程简图。
设计师用AE把动画效果做出来,再用Bodymovin导出相应地json文件给到前端,前端使用Lottie
库就可以实现动画效果。功能简单且强大。
至于Adobe Effect和Bodymovin插件的安装与使用…嗯嗯,这是设计师的事情,咱们就不操心啦。
静态URL引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.8.1/lottie.min.js" integrity="sha512-V1YyTKZJrzJNhcKthpNAaohFXBnu5K9j7Qiz6gv1knFuf13TW/3vpgVVhJu9fvbdW8lb5J6czIhD4fWK2iHKXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
调用loadAnimation
var params = {
container: element, // 容器节点
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // JSON文件路径
}
var anim = lottie.loadAnimation(params);
通过NPM安装vue-lottie
npm install --save vue-lottie
vue-lottie
使用
<template>
<div id="app">
<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
<div>
<p>Speed: x{{animationSpeed}}</p>
<input type="range" value="1" min="0" max="3" step="0.5"
v-on:change="onSpeedChange" v-model="animationSpeed">
</div>
<button v-on:click="stop">stop</button>
<button v-on:click="pause">pause</button>
<button v-on:click="play">play</button>
</div>
</template>
<script>
import Lottie from './lottie.vue';
import * as animationData from './assets/pinjump.json';
export default {
name: 'app',
components: {
'lottie': Lottie
},
data() {
return {
defaultOptions: {animationData: animationData},
animationSpeed: 1
}
},
methods: {
handleAnimation: function (anim) {
this.anim = anim;
},
stop: function () {
this.anim.stop();
},
play: function () {
this.anim.play();
},
pause: function () {
this.anim.pause();
},
onSpeedChange: function () {
this.anim.setSpeed(this.animationSpeed);
}
}
}
</script>
也就是上面的defaultOptions属性传递配置对象:
container
:在其上呈现动画的 dom 元素animationData
:一个带有导出动画数据的对象。path
:动画对象的相对路径。(animationData 和 path 是互斥的)loop
:默认值为true。可传递需要循环的特定次数autoplay
:true / false 它会在准备好后立即开始播放name
:动画名称以供将来参考renderer
: ‘svg’ / ‘canvas’ / ‘html’ 设置渲染器
Lottie提供了用于监听动画执行情况的事件:
- complete
- loopComplete
- enterFrame
- segmentStart
- config_ready(初始配置完成)
- data_ready(所有动画数据加载完成)
- DOMLoaded(元素已添加到DOM节点)
- destroy
可使用addEventListener监听事件
// 动画播放完成触发
anm.addEventListener('complete', anmLoaded);
// 当前循环播放完成触发
anm.addEventListener('loopComplete', anmComplete);
// 播放一帧动画的时候触发
anm.addEventListener('enterFrame', enterFrame);
Lottie的更多详解,请查阅下方链接。
Lottie 地址:https://github.com/airbnb/lottie-android
Lottie 官网:https://airbnb.design/lottie/
【程序视点】助力打工人减负,从来不是说说而已!
后续小二哥会继续详细分享更多实用的工具和功能。持续关注,这样就不会错过之后的精彩内容啦!
如果这篇文章对你有帮助的话,别忘了【点赞】【分享】支持下哦~
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体