Home > Developer > Web Develop
Create svg animation and svg Animation
To draw an image step by step, css3 won't be able to do it unless a picture is displayed on a regular basis. I can't think of other tricks. Now we use a plug-in to make an svg animation.
Plug-in address: http://lazylinepainter.info/
Use AI to save the path as an svg file.
To use the plug-in, 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]> <! --> <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, C24. 9,51, 71.3, 83.3, 102,129 c13. 1, 19.5, 29.2, 43.3, 18, 76c0, 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.8 z ",
"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.8 z ",
"Fill": '#231815 ',
"Duration": 300
},
{"Path": "M351, 241.8c-0.7, 3-1.3, 6-2, 9c-14.9, 10-8.3-11.5-18c1, 0.4, 2, 0.7, 3, 1C348. 3,236.5, 349.7, 239.1, 351,241.8 z ",
"Fill": '#231815 ',
"Duration": 300
},
{"Path": "M230, 419.8c-0.7, 0.3-1.3, 0.7-2, average, 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. 0.7, 6c8. 9, 19.4, 38, 12.601, 51, 3c2. 21.6, 50.3, 34, 73c133. 3,391.8, 240.7, 405.8, 230,419.8 z ",
"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.8 z ",
"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.8 z ",
"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.8 z ",
"Fill": '#231815 ',
"Duration": 500
},
{"Path": "M413, 338.8c-38.9, 28.4-79.5-32.3-79-67c0.3, 0, 0.7, 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.8 z ",
"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>
The effect is as follows:
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
