html渲染json的插件,lottieJS（Json动画的使用）

一、lottie的引入

1. 可以同script引入

2. 可以通过npm包引入

npm i lottie-web --save-dev // 引入方式 import lottie from ‘lottie-web’

二、JSON文件的生成

1. 首先电脑安装AE软件

2. 其次下载 bodymovin.zxp扩展插件，使用这个插件用于JSON的导出

3. 其次下载安装AE扩展插件的工具包 ZXP Installer，这个工具包 aescript + aeplugins zxp installer.exe 可以安装很多的AE扩展插件

4. 在 aescript + aeplugins zxp installer.exe 安装 bodymovin.zxp

安装成功的截图

5. 打开AE编辑 > 首选项 > 常规界面勾选允许脚本写入文件和访问网络，点击确定

选中允许脚本执行

6. 在AE中点击窗口 > 扩展中就可以看到添加的插件

选中导出json的插件

7. 下一步就是准备动画了，一个aep文件加上素材文件，打开之后在窗口 > 扩展中打开bodymovin窗口，可以看到下面的窗口

动画的画布

clone导出文件注：以前有遇到过导出卡住的情况，后面考虑到可能是插件和AE版本不匹配的原因，如果你有这种原因那么你就去换一个bodymovin.zxp重新安装一遍，应该会解决这个问题。

三、HTML引入代码

2.lottie.loadAnimation({

container:document.getElementById('lottie'),//dom元素的容器

loop:true,//循环播放

autoplay:true,//自动播放

path:'data.json' // AE 导出JSON文件

}); 或者

3. import lottie from 'lottie-web';

const icon = document.querySelector('.icon');

lottie.loadAnimation({

container: icon, // 包含动画的dom元素

renderer: 'svg', //渲染出来的是什么格式

loop: true, //循环播放

autoplay: true, //自动播放

path: './data.json' // 动画json的路径

});

html渲染json的插件,lottieJS（Json动画的使用）相关推荐

html渲染json的插件,[ json editor] 如何在网页中使用Json editor 插件
[目的] 在自己的网页上交由用户进行json的可视化编辑 [难点]1.json中含有递归嵌套的数组和对象 2.json中的基本值类型有数字.字符串和布尔型 [方法]使用daviddurman的Flex ...
android lottie字体json,从json文件到炫酷动画-Lottie实现思路和源码分析
从json文件到炫酷动画-Lottie实现思路和源码分析,Lottie是最近Airbnb开源的动画项目,支持Android.iOS.ReactNaitve三个平台,本文分析主要Lottie把json文 ...
bean json转kotlin_Android kotlin插件神器Json直接生成javaBean
这是一个data class从JSON字符串生成Kotlin 的插件,换句话说,是一个将JSON字符串转换为Kotlin data class(Json到Kotlin)的插件在使用Kotlin进行开 ...
html json解析插件,jQuery插件jsonview展示json数据
本文实例为大家分享了jQuery插件jsonview展示json数据的具体代码,供大家参考,具体内容如下项目中要展示json数据,自己写一套html来展示太麻烦,可以使用jquery的插件jsonv ...
notepad++插件实现json、xml格式化
notepad++比较出色的免费的数据编辑.格式化工具... 现在json.xml文件很流行.格式化也是必须的,方便查看关键信息! 01.下载notepad++及相关插件 npp_7.5.5-x86: ...
bean json转kotlin_Android--------kotlin插件神器Json直接生成javaBean
这是一个data class从JSON字符串生成Kotlin 的插件,换句话说,是一个将JSON字符串转换为Kotlin data class(Json到Kotlin)的插件在使用Kotlin进行开 ...
idea json格式化插件_IDEA常用插件
1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的敲击完美提示 Codota基于数百万个开源Java程序和您的上下文来完成代码行,从而帮助您以更少 ...
【JSON】谷歌浏览器JSON可视化插件：JSON-Handle
摘要 : JSON-handle是一款对JSON格式的内容进行浏览和编辑,以树形图样式展现JSON文档,并可实时编辑. 今天我推荐一款chrome/Firfox下处理json的插件JSON-handl ...
Sublime Text3 JSON格式化插件JsFromat
Sublime Text3 JSON格式化插件JsFromat,需完成以下步骤: 1.在Sublime Text3菜单栏里点击Preferences: 2.然后点击Browse Packages; ...

html渲染json的插件,lottieJS（Json动画的使用）

html渲染json的插件,lottieJS（Json动画的使用）相关推荐

最新文章

热门文章