制作svg动画
2015-07-29 20:46
567 查看
要实现一步一步画出来一个图片，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>
效果如下：
插件地址：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>
效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- SQL VIEW 使用语法
- 设置android屏幕全屏
- HALCON算子函数——Chapter 11 : Morphology
- 2015多校第一场1008 hdu 5295 Unstable
- 60. Permutation Sequence
- [题解+总结]20150729
- SDWebImage使用，图片加载和缓存
- Jsoup读取东方财富网站数据实例
- loadrunner解决用户名、密码不同问题
- 【bzoj3679】 数字之积 数位dp
- shell编程入门
- jquery常用技巧及常用方法列表集合
- java eclipse 监视选择指定变量
- 黑马程序员———单例设计模式-懒汉式关于线程安全以及要点
- HALCON算子函数——Chapter 9 : Matching
- LeetCode || Sum Root to Leaf Numbers
- linux之例行性工作排程:crontab学习
- 关于Activity调用Ondestroy（）方法之后内存管理器为什么没有释放占用资源
- 数据结构之---C++语言实现图的十字链表存储表示
- 可恶的QT隐式共享