制作svg动画
要实现一步一步画出来一个图片，css3做不到吧。除非一张张的图片定时显示。想不到别的招了。如今用的是一个插件，做了一个svg动画。
插件地址：http://lazylinepainter.info/
先用AI做好路径，保存为svg格式的文件。
使用插件。先引入须要的文件：
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.9.1.min.js"><\/script>')</script>
<script src="jquery.lazylinepainter-1.5.1.js"></script>
demo例如以下：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lazy Line Painter</title>
<meta name="description" content="A Jquery plugin for SVG path animation">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style>
body {
background:#fffafa;
cursor: pointer;
}
#demo {
width:400px;
height:400px;
position:absolute;
left:50%;
margin:80px 0 0 -175px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.9.1.min.js"><\/script>')</script>
<script src="jquery.lazylinepainter-1.5.1.js"></script>
<script type="text/javascript">
(function( $ ){
/*
* Lazy Line Painter
* SVG Stroke animation.
*
* https://github.com/camoconnell/lazy-line-painter
*
* Copyright 2014
* Cam O'Connell - http://www.camoconnell.com http://www.behance.net/camoconnell
* Released under the MIT license
*
*/
// goto http://lazylinepainter.info to convert your svg into a svgData object.
var svgData = {
"demo" :
{
"strokepath" :
[
{ "path": "M359,201.8c0.4-27.7,1.6-57.5-10-76c-6.5-8.9-37.8-6.5-53-6c-9.3,2.4-18.7,4.7-28,7c-24.6,10.2-48.3,36.4-54,65c-0.7,0.3-1.3,0.7-2,1c-25.1-34.9-60.6-60.1-122-59c-21.7,22.6-14.7,81.1-2,107c24.9,51,71.3,83.3,102,129c13.1,19.5,29.2,43.3,18,76c0,1,0,2,0,3c17.5-2.899,59.3-48.7,66-64c40.8,0.4,65.2-6.7,74-47c18.6,13.5,59.6,35.9,81,7C466.1,294.8,422.8,190.6,359,201.8z",
"duration": 1500,
"fill": '#231815',
"strokeWidth": 8
},{
"path": "M356,222.8c34.6-0.2,37.5,46.3,15,61c-15.8,0.4-24.9-6.899-29-18c28.6,10.101,37.6-26.1,11-39c-0.7,0-1.3,0-2,0C352.7,225.5,354.3,224.1,356,222.8z",
"fill": '#231815',
"duration":300
},
{ "path": "M351,241.8c-0.7,3-1.3,6-2,9c-14.9,10-8.3-11.5-5-18c1,0.4,2,0.7,3,1C348.3,236.5,349.7,239.1,351,241.8z",
"fill": '#231815',
"duration":300
},
{ "path": "M230,419.8c-0.7,0.3-1.3,0.7-2,1c-8.4-45.5-73.8-123.1-101-157c-15.4-19.2-35.3-31.4-42-60c-5.2-22.3,5-40,10-55c8.6-3.3,25.4,4.2,35,7c41.7,12.2,72,22.6,87,60c30.9-2.8,24.1-42.1,37-63c9-14.6,24.4-13.5,41-21c38.9-0.5,55.5,6.9,49,48c-1,11.3-2,22.7-3,34c-4.5,12.4-14.9,18.6-17,37c-14.1-10.7-31.9-30.2-59-24c-26.5,6-46.5,47.7-82,19c-1.3,0-2.7,0-4,0c-1,2.7-2,5.3-3,8c12.6,14.3,23.2,19.9,50,18c-0.3,4.7-0.7,9.3-1,14c-12.7,9.101-27.3,15.7-45,7c-1.3,1-2.7,2-4,3c0.3,2,0.7,4,1,6c8.9,19.4,38,12.601,51,3c2.8,34,21.6,50.3,34,73C251.3,391.8,240.7,405.8,230,419.8z",
"fill": '#231815',
"duration":300
},
{ "path": "M258,294.8c19.7-8.2,10.5-38.3-12-38c2.3-2.7,4.7-5.3,7-8c28-1.3,43.5,27.9,31,53c-10.5,21.2-43.9,18.3-47-8C243.4,297.1,251.1,299.2,258,294.8z",
"fill": '#231815',
"duration":500
}
,{ "path": "M241,265.8c2,1,4,2,6,3c2.6,7.101,2,12.101-5,15c-1.7,0.3-3.3,0.7-5,1C236.8,277.2,237.5,269.9,241,265.8z",
"fill": '#231815',
"duration":500
}
,{ "path": "M326,355.8c-33.7,45.2-72.9-3.899-84-35c31.6,18,69.2-13.8,53-55c-4.7-11.899-13.5-17-22-25c44.9,0.4,43.3,27.7,55,61C334.8,321.1,339.8,337.3,326,355.8z",
"fill": '#231815',
"duration":500
},
{ "path": "M413,338.8c-38.9,28.4-79.5-32.3-79-67c0.3,0,0.7,0,1,0c5.4,17.2,29.6,31.8,48,18c25.2-19,7-60.8-9-74C419.3,216.3,451.8,310.5,413,338.8z",
"fill": '#231815',
"duration":500
}
],
"dimensions" : { "width": 600, "height":800 }
}
}
$(document).ready(function(){
// Setup your Lazy Line element.
// see README file for more settings
$('#demo').lazylinepainter({
'svgData' : svgData,
'strokeWidth':7,
'fill':'#dc908e',
'onComplete' : function(){
var a=$("#demo path");
a.attr("fill","#0d4ff7");
a.removeAttr("stroke");
a.removeAttr("fill-opacity");
a.removeAttr("stroke-opacity");
a.removeAttr("stroke-width");
a.removeAttr("stroke-linecap");
a.removeAttr("stroke-linejoin");
a.removeAttr("style");
var b=$("#demo path").first();
b.attr("fill","#231815");
b.removeAttr("stroke");
b.removeAttr("fill-opacity");
b.removeAttr("stroke-opacity");
b.removeAttr("stroke-width");
b.removeAttr("stroke-linecap");
b.removeAttr("stroke-linejoin");
b.removeAttr("style");
}
}
)
// Paint your Lazy Line, that easy!
var state = 'paint';
$('#demo').lazylinepainter(state);
})
})( jQuery );
</script>
</head>
<body>
<div id='demo'></div>
</body>
</html>
效果例如以下：
制作svg动画的更多相关文章
- 推荐15款制作 SVG 动画的 JavaScript 库
在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计.绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用.这些J ...
- react-native使用react-art制作SVG动画
想要使用SVG做一个动画,郁闷了一上午终于有了一点思路.. 其实我是看了一篇国外的文章.网址:http://browniefed.com/blog/2015/05/03/getting-react-a ...
- SVG动画制作工具 ， 从此抛弃臃肿的gif
VG简介 只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持 ...
- 用svg制作loading动画
首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...
- Walkway.js – 用线条制作简约的 SVG 动画
Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法.只需根据提供的配置对象创建一个新的 Walkway 实例就可以了.这种效果特别适合那些崇尚简约设计风格的网页.目前, W ...
- 用Canvas制作loading动画
上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...
- 10 个非常实用的 SVG 动画操作JavaScript 库
SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些 ...
- 10 个非常有用的 SVG 动画的 JavaScript 库
SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库 ...
- SVG 动画（animate、animateTransform、animateMotion）
原文:https://blog.csdn.net/chy555chy/article/details/53535581 参考 MDN开发文档 https://developer.mozilla.org ...
随机推荐
- QQ感叹号是什么鬼？原来是服务器波动，腾讯官方来辟谣了
今天晚上很多网友在用QQ发送消息的时候发现,自己发送的消息一直是感叹号❗到底是怎么回事呢?是消息都发不出去了吗?马浩周通过手机测试后发现,其实消息是可以发出去的,而官方手机QQ出来已经通知了,是服务器 ...
- pil - pillow 的版本
pip install PIL python2版本 pip install pillow python3版本
- Flex 布局 （两个div居中自适应 宽度变小变一列，宽度够就是两列）
https://www.runoob.com/w3cnote/flex-grammar.html display: flex; justify-content: center; align-items ...
- Less功能特性
(1)变量 我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content" ...
- Maven的pom报错的解决方法
如果在MyEclipse里面导入项目,导入不了,如下图 接下来可以点击Import Maven Projects里的Action那一行Resolve Later. 点击Do Not Execute(a ...
- hdfs深入：08、hdfs的JavaAPI以及如何解决winutils的问题
/** * 通过url注册的方式访问hdfs,了解,不会用到 * @throws Exception */ 以下为详细代码://1.注册hdfs的url,让java代码能识别hdfs的url形式URL ...
- go的指针学习
1)指针是什么? 一个指针变量可以指向任何一个值的内存地址它指向那个值的内存地址 说白了就是可以先存储内存的地址,在用内存地址找到对应值 2)go中的使用 Go 语言的取地址符是 &,放到一个 ...
- Python的发展与应用
cpu 内存 硬盘 操作系统 cpu:计算机的运算和计算中心,相当于人类大脑.飞机 内存:暂时存储数据,临时加载数据应用程序,4G,8G,16G,32G 速度快,高铁,断电即消失.造价很高 ...
- fielddata breaker与cache size
breaker的估算,是根据语句以及上层的结果数,加上固定的值,不准确. cache.size是cache到结果的size,准确. 所以,配置breaker不能拦截占用内存的聚合查询,而配置cache ...
- HDU1755
这道题直接暴力枚举复杂度为 n!*m 但是k<100 , 所以我们可以通过取模用dp[i][j] 表示k=i 时,-x取模k为j的最小值 #include <cstdio> #inc ...