Bodymovin插件的使用

big_cat 发布于2019-08-20 14:13 / 1757人阅读

摘要：背景使用来实现比较复杂动画的时候往往力不从心。所以网上看到的大多数专题基本上都是使用或者来做的，但是要对这些的有一定的了解才能做出来，而且还要各种代码，过程相当繁杂。容器该就是的插件导出的文件参考文章

背景

使用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

html页面引入 bodymovin.js

详情语法和选项请参考 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/...

云服务器 GPU云服务器 Bodymovin html使用插件 js怎么使用图形插件 Win10无法使用支付宝插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81457.html

AE动画转Web代码工具指北-Lottie

摘要：简单来说，就是一个可以将动画转成可运行在上的插件。使用工具使用前请确保已安装这以下工具。更详细内容可参考官网库最后再分项目框架提供两个的库简介 Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，...

SexySix 2019-08-23 17:14 评论0 收藏0
Lottie-前端实现AE动效

摘要：经调研发现，是个简单高效且性能高的动画方案。换言之，设计师用把动画效果做出来，再用导出相应地文件给到前端，前端使用库就可以实现动画效果。项目背景在海外项目中，为了优化用户体验加入了几处微交互动画，实现方式是设计输出合成的雪碧图，前端通过序列帧实现动画效果：showImg(https://segmentfault.com/img/bVbp6jB);序列帧：showImg(https...

supernavy 2019-08-23 16:06 评论0 收藏0
Lottie&vue-lottie--更简单的动画实现方式

摘要：什么是是一个可以通过插件来解析动画，并生成格式的文件。对于复杂的动画，开发同学要用很长的时间来实现，并且还有可能无法达到设计同学的最初的效果。是一个基于的动画效果实现组件。它基于开源项目，可以将导出的文件渲染成动画效果。什么是Lottie Lottie是一个可以通过bodymovin插件来解析Adobe After Effects动画，并生成json格式的文件。该json文件可以通过...

dreamans 2019-08-20 19:04 评论0 收藏0