lottie 动画插件使用

最新推荐文章于 2024-05-13 10:03:22 发布
最新推荐文章于 2024-05-13 10:03:22 发布
阅读量669 收藏
点赞数 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 1778
可能大家会觉得使用位图会导致最终的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原生动画的形式在移动设备上渲染播放。
推荐开源项目：Lottie-Player Web Component
最新发布
gitblog_00093的博客
05-13 359
推荐开源项目：Lottie-Player Web Component 项目地址:https://gitcode.com/LottieFiles/lottie-player 项目介绍 Lottie-Player 是一个Web组件，旨在轻松地在网站中嵌入和播放基于Lottie的动画以及Telegram的TGS表情包动画。该项目提供了一个简洁易用的API，让开发者能无缝集成各种动态效果到网页设计中。 项...
lottie插件_比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）
weixin_39521835的博客
11-27 782
动效设计，是 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 295
一篇也许有点过时但我认为依然值得一看的文章。Lottie 的原理说起来很简单：在 Ae 中做好动画后使用插件导出成 json 文件，在程序中引入 Lottie 框架，就可以显示动画了。事实上，一旦开始真正制作，就会遇到各种问题，尤其在初期安装插件上。1.使用什么 Ae 插件导出 json 文件？Bodymovin2.Bodymovin 插件如何正确的获取、安装和使用？参照文档指引，顺带一说， Lo...
lottie插件_RN常用插件集
weixin_39957647的博客
11-26 331
前言：从事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 1633
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 1570
参考： https://blog.csdn.net/weixin_42707181/article/details/86300426
Vue轮子-Lottie-动画实现
U R My Sunshine
07-01 514
挖坑。先工作。有空写。airbnb出品的动画实现方式。https://airbnb.design/lottie/
2024年Web前端最新Vue 使用 Echarts 显示热力地图信息，网页前端开发
2401_84446580的博客
05-05 1015
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
Lottie动画系列：LottieAnimationView点击事件和结束动画
知道这个有什么用？
06-02 2263
动画设置无限循环：app:lottie_loop="true" 点击结束： lavRecord.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { lavRecord.cancelAnimation(); } }); ...
Lottie系列一：介绍与使用
许进进的博客
07-18 2455
Lottie 是一个针对 Android、 iOS、 Web 和 Windows 的库，它可以解析 Adobe After effect 动画，并用 Bodymovin 导出为 json，然后在移动和网络上呈现它们！
JS & Lottie web 动画的使用
cookcyq__的博客
09-22 973
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、付费专栏及课程。

余额充值