Bodymovin插件的使用

背景

使用css3来实现比较复杂动画的时候往往力不从心。所以网上看到的大多数专题基本上都是使用svg或者canvas来做的，但是要对这些的api有一定的了解才能做出来，而且还要各种代码，过程相当繁杂。最近在github上面看到的一个神奇的插件：bodymovin，可以实现在 After Effect（可视化操作，不用码代码）上面导出 svg的json数据，然后在html上引入bodymovin.js，简单的初始化就可以在网页上面实现svg动画。amazing!

安装

github上面的使用教程 https://github.com/bodymovin/...
具体的插件安装也可参考文章
http://www.mq2014.com/after-e...

html调用

html

<div id='container'></div>
html页面引入 bodymovin.js

<script src="js/bodymovin.js" type="text/javascript"></script>
详情语法和选项请参考 github， wrapper为要出现动画的DOM，path为汇出的json档位置。

var svgContainer = document.getElementById(‘container’);
var animItem = bodymovin.loadAnimation({
wrapper: svgContainer,//svg容器
animType: ‘svg’,
loop: true,
path: ‘data.json’ //该json就是 After Effect的 bodymovin插件导出的json文件
});

参考文章
http://www.mq2014.com/after-e...http://www.jianshu.com/p/d887...https://github.com/bodymovin/...

Bodymovin插件的使用相关推荐

ae插件：Bodymovin for Mac
Bodymovin是一个非常有用的插件,可以将 After Effects的动画导出为高质量的SVG.JSON和HTML代码.它的主要优点是可以将复杂的动画效果转换为轻量级的矢量图形,使得动画在网页和 ...
ae制h5文字动画_大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画
前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...
AE 以及 Bodymovin的安装
AE制作一个简单的动画,并用Bodymovin导出教程: http://blog.csdn.net/sinat_24196195/article/details/74933005 AE安装(mac) ...
android jason动画,Android 动画之Lottie动画使用
Android 动画之Lottie动画使用一:简介 Lottie是Airbnb开源的一套跨平台的完整解决方案,设计师只需要使用After Effects(简称AE)设计动画之后,使用Lottic提供 ...
300 多行代码搞定微信 8.0 的「炸」「裂」特效！
作者 | 峰华出品 | CSDN(id:CSDNnews) 微信 8.0 更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效 ...
动画库 Lottie 的使用
本文主要介绍动画开源库 Lottie 在 Android 中的使用. 前言在日常APP开发中,为了提升用户感官舒适度等原因,我们会在APP中加入适量动画. 而传统手写动画方式往往存在诸多问题: 动画 ...
mint ui tabbar选中后怎么改变icon图标_UI全书（下）读后梳理：iPhone设计规范和Material Design规范...
本文转载自简书,作者:Bystander7原文链接: https://www.jianshu.com/p/507f0fcb0457 - UI全书(下)<UI设计师进阶完全指南>读后梳理:i ...
linux qt 5移植,Qt 5.13支持处理Lottie文件，可以方便地进行移植
Qt 5.13工具包将于5月发布,其中一个重要的特性就是对Lottie文件的支持. BodyMovin插件是一个After Effects插件,它将动画导出为JSON格式,可以在Web上运行.Airb ...
ios html下拉刷新,Lottie_ios 实现下拉刷新
一. Lottie 是什么首先这个库是做什么的? 通过 AE 上的 Bodymovin 插件将 AE 中制作好的动画导出成一个 json 文件,Lottie 实现了 Android/iOS/Reac ...
腾讯自主研发动画组件PAG开源
PAG (Portable Animated Graphics) 是一套完整的动画工作流.它提供从AE导出插件,到桌面预览工具,再到各端的跨平台渲染SDK,助力于将AE动画方便快捷的应用于各平台终端. ...

Bodymovin插件的使用

背景

安装

html调用

Bodymovin插件的使用相关推荐

最新文章

热门文章