lottie 动画插件使用

最新推荐文章于 2024-05-14 13:24:44 发布
最新推荐文章于 2024-05-14 13:24:44 发布
阅读量672 收藏
点赞数 2
分类专栏： web前端 - 插件学习 文章标签： AE动画  JSON动画渲染 lottie.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huafeng1999/article/details/98755033
版权

AE 导出json动画文件 开发渲染动画

首先我们需要动画师输出给我们一个 JSON 动画文件

然后我们的主角 lottie.js 要出场了

我们通过 npm i lottie-web -s 下载 lottie.js

下载完成后 我们就开始使用吧

html 代码块

<!-- 包含动画的dom元素 -->
<div id="animation"></div>
<button class="stop">停止</button>
<button class="play">播放
最低0.47元/天 解锁文章
@疯子
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Lottie系列四：使用建议
许进进的博客
07-21 1787
可能大家会觉得使用位图会导致最终的json过大，Lottie落地失去意义与优势，下方表格是携程火车票最近上线的Lottie动效方案，大家可以从表格对比看出，就算使用位图方案，横向对比现有的解决方案，Lottie依然是优势巨大，原因便是其他方案1s有25帧图片，而Lottie整个动效的文件素材不过10几张，动效时间越长，lottie优势越明显。•推荐使用lottie_rawRes代替lottie_fileName，前者可以通过R使用对动画的静态引用，而不仅仅使用字符串名称；...
lottie动画的AE插件
07-03
Airbnb出了个移动端的动画库Lottie，可以和一个名叫Bodymovin的AE插件结合起来，把在AE上做好的动画导出为json文件，然后以Android/iOS原生动画的形式在移动设备上渲染播放。
2024年最全web端动效 lottie-web 使用_lottie-web文档，前端开发面试宝典
最新发布
2401_84446963的博客
05-14 836
三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
lottie插件_比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）
weixin_39521835的博客
11-27 783
动效设计，是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫，到逐渐理解了动效对于提升用户体验和产品需求的重要作用。而导致这种认知的转变，相当一部分原因是因为硬件性能的发展和动效输出方式的优化。因为动效实现的过程就是设计师和开发之间互相博弈的过程。设计师可能通过 AE 或者其他工具做出炫酷的效果，和开发对接就懵了。要么无法实现，要么极其复杂。毕竟开发工程师要通过代码...
vue使用lottie web插件渲染动画
qq_45623597的博客
04-19 560
1.先安装相应的插件 npm install lottie-web --save 2.引入插件(我这里是局部引入的) import lottieWeb from 'lottie-web' 3.使用，整体代码如下，我这里是引入的本地JSON文件 <template lang="pug"> .lottie .lottie-box(ref="lottie", style="height: 80px; width: 80px;") </template> <script
lottie插件_Lottie 入门指北
weixin_39573598的博客
11-27 296
一篇也许有点过时但我认为依然值得一看的文章。Lottie 的原理说起来很简单：在 Ae 中做好动画后使用插件导出成 json 文件，在程序中引入 Lottie 框架，就可以显示动画了。事实上，一旦开始真正制作，就会遇到各种问题，尤其在初期安装插件上。1.使用什么 Ae 插件导出 json 文件？Bodymovin2.Bodymovin 插件如何正确的获取、安装和使用？参照文档指引，顺带一说， Lo...
lottie插件_RN常用插件集
weixin_39957647的博客
11-26 334
前言：从事RN开发快一年了，开发过程中遇到许多坑，连滚带爬的都趟过来了，简单总结下常用的RN插件，方便以后查阅。建议：能自己写的插件就自己写吧，别偷懒，（虽然可能没有别人的好，起码也是自己造的儿子，哈哈说笑的），插件集成多了会多项目的维护造成一些麻烦。下面插件只是RN插件集中的冰山一角，1、启动屏插件，可自动设置RN启动页。crazycodeboy/react-native-splash-scre...
Lottie动画库的使用1
08-08
Lottie动画库是一个强大的跨平台工具，它允许开发者在Android、iOS以及React Native应用程序中轻松地实现复杂的动画效果。这个库的核心功能是能够解析Adobe After Effects (AE)软件中创建的动画，并将其实时渲染出来...
Lottie动画工具.rar
07-07
Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到...
Lottie动画demo
12-21
在Android开发中，Lottie动画相比传统的图片序列或者帧动画有诸多优势。首先，它极大地节省了应用的存储空间，因为所有的动画数据都被编码在单个JSON文件中。其次，Lottie动画运行时的性能优秀，因为它利用硬件加速...
android-Lottie动画文件
01-30
标题中的"android-Lottie动画文件"指的就是使用Lottie库在Android平台上播放的动画资源。这些资源通常以JSON格式存在，就像压缩包中的`android_wave.json`和`h_a.json`文件。JSON文件包含了After Effects中的图层、...
微信小程序使用lottie动图插件
wdd531006643的博客
07-18 1641
2）微信开发者工具中 点击 工具一>构建npm。1、通过npm安装Lottie库。4、wxml文件使用canvas。
lottie简单试用
rbyyy(Create produce different)
02-13 2144
Airbnb lottie，一个用json来实现动画的开源项目。通过Bodymovin导出Json文件，然后用lottie在Android、iOS和React Native上实现动画效果。与手写动画相比，节省了不少的时间，而且还兼容Android、iOS。 软件安装步骤： - 1、首先需要安装AE。 - 2、安装完成之后，需要安装Bodymovin插件，安装Bodymovin时按照方法一，下载
lottie的引入和使用（svg动画）
qq_46302247的博客
04-13 1575
参考： https://blog.csdn.net/weixin_42707181/article/details/86300426
Vue轮子-Lottie-动画实现
U R My Sunshine
07-01 515
挖坑。先工作。有空写。airbnb出品的动画实现方式。https://airbnb.design/lottie/
2024年Web前端最新Vue 使用 Echarts 显示热力地图信息，网页前端开发
2401_84446580的博客
05-05 1028
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
Lottie动画系列：LottieAnimationView点击事件和结束动画
知道这个有什么用？
06-02 2277
动画设置无限循环：app:lottie_loop="true" 点击结束： lavRecord.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { lavRecord.cancelAnimation(); } }); ...
Lottie系列一：介绍与使用
许进进的博客
07-18 2462
Lottie 是一个针对 Android、 iOS、 Web 和 Windows 的库，它可以解析 Adobe After effect 动画，并用 Bodymovin 导出为 json，然后在移动和网络上呈现它们！
JS & Lottie web 动画的使用
cookcyq__的博客
09-22 995
Lottie 是一款兼容跨平台 Android/IOS/Web 的动画操作库，只需引入一份 JSON 文件便可播放动画。JSON 文件是由一款叫做俗称AE的设计软件通过BodyMovin插件导出的。作为前端人员来说，我们不用关心如何制造这份 JSON 动画文件，是由设计师来提供的。
微信小程序使用lottie
05-20
可以使用wxParsec插件来实现在微信小程序中使用Lottie。 以下是具体的步骤： 1. 首先，在小程序中引入wxParsec插件。 2. 在需要使用Lottie的页面中，引入Lottie的JS文件和JSON动画文件。 3. 在wxml文件中，定义一个canvas元素和一个div元素，分别用于显示Lottie动画和错误提示信息。 4. 在js文件中，使用Lottie的API将JSON动画渲染到canvas元素中。 5. 如果渲染失败，将错误信息显示在div元素中。 下面是一个简单的示例代码： wxml文件： ``` <canvas id="lottie" type="2d"></canvas> <div id="error"></div> ``` js文件： ``` const lottie = require('../../libs/lottie.min.js'); const animationData = require('../../animation.json'); Page({ onLoad: function() { var canvas = document.getElementById('lottie'); var context = canvas.getContext('2d'); var animation = lottie.loadAnimation({ container: canvas, renderer: 'canvas', loop: true, autoplay: true, animationData: animationData }); animation.addEventListener('error', function() { document.getElementById('error').innerHTML = 'Failed to load animation.'; }); } }) ``` 注意，这只是一个简单的示例，实际使用时需要根据具体情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值