svg动画,截取工具有点不忍直视了~~~

为了实现上面的svg动画,可以使用bodymovin插件,简单配置之后,就可以直接可以实现在 AE(可视化操作,不用码代码)上面导出 svg的json数据,在web上播放动画了。简直不能再小白了。

demo:

//html
<div id="svgContainer" class="hide"></div> //data
var svgData = 'XXXXXXXX/svg/1/data.json';
playSvg(svgData) //播放svg
function playSvg(svgData) {
var animItem = bodymovin.loadAnimation({
wrapper: document.getElementById('svgContainer'),
animType: 'svg', //也可以是canvas
loop: true,
autoplay: true,
path: svgData // 传入json数据
}); //销毁实例
$('.XXX').on('click', function() {
animItem.destroy();
});
}

git上的具体使用教程

借助Bodymovin播放svg动画的更多相关文章

  1. 看逐浪CMS技术小哥做SVG动画(附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\canvas\html5动画)

      名词解解释 adobe After Effects AE:adobe After Effects,adobe公司的专业视频制作软件. Bodymovin插件预览 Bodymovin:是一个AE的插 ...

  2. 带给你灵感:30个超棒的 SVG 动画展示【上篇】

    前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助SVG,我们有更多 ...

  3. 带给你灵感:30个超棒的 SVG 动画展示【下篇】

    前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助 SVG,我们有更 ...

  4. HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  5. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇01:播放序列动画》

    1.播放序列动画 系列动画播放概述 2D游戏中的动画系统,不同于3D游戏.3D游戏中,角色美术资源不仅包含角色模型的,还包括角色的贴图和动作等,模型本身自带角色的动作动画效果.2D游戏中,角色美术资源 ...

  6. Android实现播放GIF动画的强大ImageView

    我个人是比较喜欢逛贴吧的,贴吧里总是会有很多搞笑的动态图片,经常看一看就会感觉欢乐很多,可以释放掉不少平时的压力.确实,比起一张单调的图片,动态图片明显更加的有意思.一般动态图片都是GIF格式的,浏览 ...

  7. SVG动画实践篇-模拟音量高低效果

    git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/demo/step2/volumn 说明 这个动画的效果就是多个线条 ...

  8. SVG动画实践篇-音量变化效果

    git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/volumn 说明 这个动画的效果就是多个线 ...

  9. SVG动画

    动画原理 SVG动画,就是元素的属性值关于时间的变化. 如下图来说,元素的某个属性值的起始值(from)到结束值(to)在一个时间段(duration)根据时间函数(timing-function)计 ...

随机推荐

  1. 《深入实践Spring Boot》阅读笔记之一:基础应用开发

    上上篇「1718总结与计划」中提到,18年要对部分项目拆分,进行服务化,并对代码进行重构.公司技术委员会也推荐使用spring boot,之前在各个技术网站中也了解过,它可以大大简化spring配置和 ...

  2. kafka HA

    1. replication 如图.1所示,同一个 partition 可能会有多个 replica(对应 server.properties 配置中的 default.replication.fac ...

  3. Oracle12c在Win10上的安装配置实践

    1.环境 操作系统:Win10专业版(64位) 数据库:Oracle 12c Release 2(Version 12.2.0.1.0,64位) 2.下载Oracle12c oracle官网下载地址: ...

  4. python 评论楼

    评论楼 从数据库中取出本篇博客的所有评论使用python语句将评论整理成具有层级关系的列表 typename=request.POST.get('typename') comment_list = m ...

  5. 数据库“行专列”操作---使用row_number()over(partition by 分组字段 [order by 排序字段])

    测试样例: create table test(rsrp string,rsrq string,tkey string,distan string); '); '); '); '); select * ...

  6. 'gbk' codec can't encode character解决方法

    使用Python写文件的时候,或者将网络数据流写入到本地文件的时候,大部分情况下会遇到:UnicodeEncodeError: 'gbk' codec can't encode character ' ...

  7. [转]python 模块 chardet下载及介绍

    来源:http://blog.csdn.net/tianzhu123/article/details/8187470/   在处理字符串时,常常会遇到不知道字符串是何种编码,如果不知道字符串的编码就不 ...

  8. sublime高亮代码导出

    何在word/博客中使用SublimeText风格的代码高亮样式 原文链接:http://www.cnblogs.com/Wayou/p/highlight_code_with_sublimetext ...

  9. seacms6.5 注入漏洞1

    ---恢复内容开始--- 需要开启/data/admin/isapi.txt   ,当里面的数值为1时,就可以报错注入 存在漏洞的页面:zyapi.php function cj() { global ...

  10. [BZOJ 4361]isn

    Description 题库链接 给出一个长度为 \(n\) 的序列 \(A\) .如果序列 \(A\) 不是非降的,你必须从中删去一个数,这一操作,直到 \(A\) 非降为止.求有多少种不同的操作方 ...