Making SVG animations

To achieve one step at a time to draw out a picture, CSS3 can't do it, unless a picture of pictures timed display. I can't think of any other tricks. Now with a plugin, do an SVG animation.

Plugin Address: http://lazylinepainter.info/

Use AI to do the path, save the file in SVG format.

Using plugins, first introduce the required files:

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

The demo is as follows:

<! DOCTYPE html>
<!--[if Lt IE 7]> <!--[if IE 7]> <!--[if IE 8]> <!--[if GT IE 8]><!--> <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": $, "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>




<body>


<div id= ' demo ' ></div>


</body>

The effect is as follows:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Making SVG animations