制作svg动画

Posted cxchanpin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了制作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动画的主要内容,如果未能解决你的问题,请参考以下文章

超酷创意分段式SVG文字动画特效

制作svg动画

如何使用SVG动画来制作游戏

使用填充为 svg 设置动画

SVG 签名动画 制作

在 SVG 路径动画中为 SVG 设置动画