以下是 html5 svg绘制卡通树动画特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>html5 svg绘制卡通树动画特效</title>
<style>
body {
background:#fffafa;
cursor: pointer;
}
#demo {
width:349px;
height:277px;
margin:0 auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lazylinepainter-1.5.1.min.js"></script>
<script type="text/javascript">
(function( $ ){
var svgData = {
"demo" :
{
"strokepath" :
[
{
"path": "M189.067,49.677c-0.164-0.186-0.387-0.386-0.65-0.61c-0.271-0.213-0.585-0.446-0.949-0.669 c-0.724-0.45-1.627-0.882-2.625-1.256c-0.999-0.372-2.092-0.692-3.196-0.957c-2.21-0.534-4.462-0.845-6.157-1.022 c-0.25-0.026-0.483-0.049-0.707-0.069c3.711-2.395,6.173-6.022,5.484-11.478c-0.036,14.949-21.398,13.754-34.109,13.226 c12.639-5.152,25.179-10.609,33.747-20.542c-3.742,3.547-8.158,6.271-12.945,8.544c0.006-0.022,0.013-0.04,0.018-0.062 c0.086-0.293,0.134-0.615,0.205-0.938c0.043-0.331,0.106-0.667,0.127-1.015c0.023-0.347,0.052-0.696,0.036-1.049 c0.005-0.35-0.023-0.699-0.064-1.04c-0.022-0.341-0.101-0.671-0.163-0.988c-0.05-0.319-0.159-0.615-0.243-0.895 c-0.076-0.283-0.182-0.539-0.288-0.772c-0.105-0.232-0.183-0.45-0.283-0.629c-0.101-0.178-0.189-0.333-0.262-0.461 c-0.144-0.253-0.227-0.397-0.227-0.397s0.051,0.158,0.142,0.436c0.044,0.137,0.099,0.304,0.161,0.495 c0.061,0.191,0.093,0.418,0.146,0.656c0.055,0.239,0.104,0.498,0.12,0.778c0.023,0.278,0.069,0.565,0.053,0.869 c-0.003,0.302,0.007,0.609-0.038,0.921c-0.025,0.312-0.064,0.625-0.134,0.934c-0.048,0.31-0.139,0.614-0.221,0.91 c-0.079,0.297-0.197,0.579-0.291,0.853c-0.121,0.268-0.215,0.531-0.342,0.767c-0.115,0.24-0.232,0.461-0.351,0.659 c-0.228,0.4-0.444,0.713-0.598,0.919c-0.079,0.107-0.136,0.179-0.172,0.219c-0.022,0.026-0.039,0.047-0.05,0.06 c-18.284,7.858-41.014,10.274-53.179,25.432c1.643-4.873,4.165-9.542,5.617-14.86c0.035-0.029,0.071-0.057,0.102-0.092 c0.05-0.055,0.093-0.113,0.129-0.174l0.008-0.014c0,0,0.019-0.032,0.054-0.091c0.025-0.047,0.073-0.125,0.147-0.236 c0.142-0.215,0.363-0.524,0.662-0.875c0.147-0.178,0.315-0.364,0.501-0.554c0.178-0.2,0.394-0.377,0.605-0.582 c0.226-0.181,0.452-0.388,0.704-0.563c0.251-0.178,0.505-0.366,0.781-0.517c0.267-0.171,0.549-0.314,0.833-0.443 c0.279-0.148,0.571-0.243,0.854-0.348c0.28-0.117,0.566-0.172,0.835-0.245c0.269-0.08,0.529-0.121,0.773-0.151 c0.243-0.03,0.467-0.078,0.667-0.085c0.201-0.007,0.376-0.012,0.52-0.017c0.291-0.009,0.458-0.014,0.458-0.014 s-0.164-0.028-0.451-0.078c-0.145-0.025-0.321-0.056-0.523-0.09c-0.203-0.034-0.434-0.033-0.688-0.053 c-0.255-0.021-0.531-0.033-0.824-0.009c-0.293,0.017-0.608,0.015-0.925,0.075c-0.319,0.049-0.656,0.087-0.984,0.182 c-0.335,0.076-0.672,0.169-1,0.292c-0.337,0.105-0.656,0.25-0.974,0.39c-0.32,0.137-0.615,0.311-0.911,0.464 c-0.204,0.128-0.406,0.248-0.599,0.371c0.83-5.111,0.442-10.903-2.63-18.022c2.716,8.245,2.18,14.493,0.353,19.934 c-0.197,0.223-0.287,0.503-0.273,0.779c-2.492,6.872-6.944,12.518-9.273,19.413c-0.049-0.089-0.096-0.174-0.149-0.267 c-0.386-0.65-0.853-1.396-1.434-2.139c-0.145-0.185-0.292-0.374-0.441-0.565c-0.162-0.181-0.326-0.364-0.492-0.549 c-0.316-0.378-0.706-0.709-1.065-1.056c-0.378-0.331-0.785-0.633-1.181-0.924c-0.434-0.245-0.821-0.54-1.259-0.718 c-0.438-0.174-0.829-0.404-1.256-0.485c-0.206-0.054-0.407-0.107-0.601-0.159c-0.096-0.025-0.191-0.05-0.284-0.074 c-0.096-0.009-0.191-0.018-0.283-0.027c-0.366-0.034-0.701-0.065-0.999-0.093c-0.298,0.01-0.556,0.04-0.767,0.053 c-0.421,0.033-0.661,0.052-0.661,0.052s0.24,0.015,0.661,0.041c0.209,0.016,0.463,0.023,0.75,0.053 c0.281,0.067,0.598,0.142,0.944,0.224c0.086,0.02,0.173,0.041,0.262,0.062c0.085,0.036,0.171,0.072,0.259,0.109 c0.174,0.074,0.355,0.15,0.54,0.228c0.38,0.126,0.72,0.4,1.095,0.612c0.375,0.215,0.696,0.545,1.054,0.816 c0.325,0.32,0.653,0.643,0.953,0.992c0.283,0.368,0.59,0.706,0.83,1.097c0.126,0.188,0.252,0.375,0.376,0.559 c0.111,0.193,0.221,0.385,0.328,0.573c0.432,0.749,0.761,1.491,1.027,2.127c0.254,0.643,0.445,1.185,0.556,1.565 c0.115,0.373,0.159,0.573,0.165,0.586c0.045,0.137,0.116,0.258,0.204,0.361c-0.001,0.004-0.002,0.007-0.003,0.011 c-2.559,11.495-0.056,26.412-1.015,38.933c-2.572-7.31-8.075-14.144-10.723-21.446c0.016-0.298-0.082-0.601-0.294-0.841 c-1.973-5.876-2.552-12.622,0.381-21.525c-3.318,7.686-3.736,13.941-2.84,19.459c-0.208-0.134-0.427-0.263-0.647-0.401 c-0.321-0.165-0.638-0.352-0.984-0.501c-0.344-0.151-0.688-0.308-1.052-0.421c-0.354-0.134-0.718-0.233-1.08-0.316 c-0.355-0.102-0.718-0.144-1.063-0.197c-0.342-0.066-0.683-0.063-0.999-0.081c-0.316-0.026-0.615-0.013-0.889,0.01 c-0.274,0.022-0.524,0.021-0.743,0.057c-0.218,0.038-0.408,0.07-0.565,0.098c-0.309,0.054-0.487,0.085-0.487,0.085 s0.18,0.006,0.494,0.016c0.156,0.005,0.345,0.011,0.562,0.018c0.216,0.008,0.458,0.059,0.72,0.092 c0.262,0.032,0.544,0.077,0.834,0.163c0.291,0.078,0.599,0.138,0.902,0.265c0.305,0.114,0.621,0.216,0.922,0.376 c0.307,0.14,0.611,0.294,0.9,0.479c0.298,0.163,0.573,0.367,0.843,0.558c0.272,0.189,0.516,0.413,0.76,0.608 c0.227,0.221,0.46,0.413,0.653,0.629c0.201,0.205,0.383,0.405,0.542,0.598c0.323,0.378,0.562,0.713,0.715,0.945 c0.08,0.12,0.132,0.204,0.159,0.255c0.038,0.064,0.058,0.099,0.058,0.099l0.009,0.015c0.039,0.066,0.086,0.129,0.139,0.188 c0.034,0.037,0.072,0.067,0.11,0.099c1.568,5.742,4.291,10.783,6.065,16.045C83.996,86.353,59.452,83.745,39.709,75.26 c-0.012-0.015-0.03-0.037-0.054-0.065c-0.038-0.043-0.1-0.12-0.185-0.236c-0.166-0.222-0.4-0.561-0.646-0.993 c-0.127-0.214-0.254-0.453-0.378-0.712c-0.138-0.254-0.239-0.539-0.37-0.828c-0.101-0.296-0.229-0.601-0.314-0.922 c-0.089-0.32-0.187-0.648-0.239-0.983c-0.076-0.334-0.118-0.672-0.145-1.009c-0.049-0.338-0.037-0.669-0.041-0.995 c-0.017-0.328,0.032-0.638,0.057-0.938c0.017-0.303,0.071-0.582,0.13-0.84c0.058-0.257,0.092-0.503,0.158-0.709 c0.067-0.206,0.126-0.386,0.174-0.535c0.097-0.299,0.153-0.47,0.153-0.47s-0.089,0.156-0.245,0.429 c-0.079,0.138-0.174,0.306-0.283,0.498c-0.109,0.194-0.192,0.429-0.306,0.679c-0.115,0.251-0.229,0.527-0.311,0.833 c-0.09,0.303-0.208,0.623-0.262,0.967c-0.067,0.342-0.152,0.698-0.176,1.067c-0.045,0.368-0.075,0.745-0.069,1.123 c-0.017,0.381,0.014,0.758,0.039,1.133c0.022,0.376,0.09,0.738,0.137,1.096c0.076,0.349,0.128,0.697,0.221,1.013 c0.006,0.024,0.014,0.044,0.02,0.068c-5.168-2.454-9.937-5.396-13.977-9.226c9.252,10.725,22.792,16.618,36.439,22.181 c-13.725,0.57-36.79,1.86-36.83-14.282c-0.744,5.892,1.914,9.808,5.921,12.394c-0.242,0.022-0.494,0.046-0.763,0.075 c-1.83,0.191-4.262,0.528-6.648,1.104c-1.192,0.286-2.372,0.631-3.451,1.033c-1.078,0.404-2.053,0.87-2.835,1.356 c-0.392,0.241-0.732,0.492-1.024,0.722c-0.285,0.242-0.525,0.458-0.702,0.659c-0.191,0.185-0.307,0.362-0.396,0.471 c-0.087,0.112-0.133,0.171-0.133,0.171s0.053-0.054,0.153-0.154c0.102-0.098,0.235-0.256,0.445-0.415 c0.196-0.174,0.457-0.357,0.759-0.556c0.311-0.189,0.666-0.39,1.072-0.576c1.615-0.765,3.955-1.297,6.317-1.559 c2.363-0.275,4.749-0.313,6.53-0.282c0.891,0.015,1.632,0.048,2.147,0.077c0.508,0.034,0.799,0.054,0.799,0.054l0.039,0.003 c0.045,0.003,0.09,0.003,0.135,0c0.352-0.019,0.655-0.194,0.856-0.451c3.709,1.581,7.964,2.392,11.672,2.767 c8.825,0.898,17.821,1.435,25.954,3.24c-1.581,0.863-3.574,2.039-5.452,3.401c-0.994,0.719-1.953,1.487-2.798,2.269 c-0.843,0.784-1.566,1.586-2.104,2.333c-0.271,0.372-0.49,0.734-0.672,1.058c-0.171,0.332-0.311,0.624-0.399,0.877 c-0.106,0.244-0.146,0.452-0.187,0.587c-0.037,0.136-0.057,0.209-0.057,0.209s0.029-0.07,0.083-0.201 c0.057-0.129,0.12-0.327,0.254-0.554c0.115-0.236,0.286-0.503,0.49-0.803c0.216-0.293,0.468-0.615,0.772-0.94 c1.202-1.322,3.164-2.705,5.248-3.846c2.08-1.154,4.273-2.097,5.931-2.747c0.829-0.326,1.527-0.577,2.014-0.746 c0.076-0.025,0.136-0.046,0.201-0.068c4.474,1.244,8.627,2.964,12.253,5.483c9.941,6.905,15.206,17.307,15.665,31.993 c-0.237-0.203-0.496-0.419-0.784-0.651c-0.336-0.264-0.705-0.543-1.101-0.829c-0.409-0.271-0.818-0.58-1.283-0.846 c-0.452-0.283-0.927-0.559-1.431-0.807c-0.487-0.273-1.022-0.481-1.543-0.705c-0.522-0.221-1.081-0.364-1.606-0.543 c-0.554-0.103-1.084-0.251-1.614-0.303c-0.534-0.021-1.038-0.123-1.525-0.068c-0.484,0.051-0.942,0.03-1.351,0.136 c-0.406,0.097-0.779,0.186-1.109,0.265c-0.321,0.103-0.585,0.242-0.808,0.331c-0.44,0.19-0.692,0.299-0.692,0.299 s0.264-0.074,0.726-0.204c0.231-0.057,0.503-0.158,0.827-0.216c0.327-0.033,0.696-0.071,1.098-0.112 c0.398-0.049,0.838,0.032,1.291,0.043c0.456,0.007,0.924,0.172,1.408,0.253c0.481,0.113,0.958,0.32,1.447,0.478 c0.468,0.236,0.955,0.429,1.41,0.699c0.453,0.273,0.913,0.523,1.331,0.839c0.431,0.288,0.835,0.602,1.216,0.919 c0.392,0.298,0.734,0.64,1.075,0.936c0.329,0.313,0.633,0.615,0.908,0.897c0.543,0.574,0.977,1.067,1.258,1.422 c0.283,0.346,0.419,0.541,0.429,0.552l0.117,0.12l0.005,0.005c0.097,0.099,0.21,0.173,0.328,0.23c-0.002,0.173,0.004,0.339,0,0.513 c-0.237,11.242-1.237,23.14,0.894,32.858c-0.15-0.003-0.3-0.007-0.449-0.009c-5.21,0.087-10.425,0.208-15.533,0.765 c-5.113,0.448-10.118,1.23-14.922,2.176c-2.397,0.516-4.759,0.969-7.037,1.614c-2.288,0.57-4.507,1.229-6.651,1.913 c-1.076,0.321-2.123,0.7-3.153,1.075c-1.028,0.374-2.04,0.743-3.035,1.105c-1.958,0.84-3.862,1.581-5.637,2.441 c-3.552,1.713-6.72,3.458-9.364,5.274c-1.322,0.905-2.568,1.717-3.617,2.639c-1.063,0.892-2.075,1.634-2.879,2.465 c-0.829,0.79-1.557,1.498-2.172,2.126c-0.582,0.67-1.054,1.258-1.444,1.721c-0.757,0.938-1.16,1.439-1.16,1.439 s0.539-0.353,1.548-1.014c0.494-0.329,1.104-0.735,1.821-1.212c0.765-0.411,1.624-0.898,2.572-1.446 c0.923-0.58,2.068-1.045,3.248-1.62c0.605-0.266,1.193-0.598,1.859-0.858c0.657-0.267,1.338-0.543,2.042-0.829 c1.382-0.602,2.916-1.119,4.516-1.672c1.575-0.599,3.32-1.043,5.083-1.593c1.779-0.52,3.669-0.969,5.596-1.469 c1.972-0.392,3.957-0.93,6.061-1.283c1.044-0.196,2.103-0.394,3.175-0.595c1.068-0.21,2.171-0.344,3.272-0.523 c2.201-0.357,4.466-0.657,6.768-0.943c2.303-0.276,4.656-0.504,7.03-0.744c1.192-0.089,2.391-0.178,3.596-0.268 c1.201-0.119,2.415-0.184,3.633-0.248c4.867-0.312,9.827-0.407,14.782-0.44c2.477,0.046,4.959-0.009,7.424,0.116 c1.233,0.052,2.464,0.089,3.693,0.117c1.226,0.067,2.448,0.133,3.666,0.199c2.439,0.111,4.842,0.357,7.231,0.513 c1.191,0.098,2.368,0.246,3.541,0.364c1.171,0.133,2.344,0.208,3.49,0.378c2.302,0.29,4.568,0.583,6.769,0.941 c1.101,0.179,2.204,0.313,3.272,0.524c1.072,0.201,2.131,0.399,3.175,0.594c2.104,0.353,4.089,0.895,6.062,1.284 c1.928,0.501,3.817,0.953,5.597,1.47c1.764,0.55,3.508,0.997,5.083,1.595c1.6,0.553,3.133,1.072,4.516,1.674 c0.703,0.286,1.384,0.563,2.042,0.831c0.666,0.26,1.255,0.591,1.859,0.858c1.177,0.575,2.329,1.046,3.237,1.616 c0.938,0.542,1.794,1.025,2.559,1.436c0.725,0.485,1.342,0.898,1.842,1.233c1.009,0.662,1.547,1.015,1.547,1.015 s-0.404-0.5-1.162-1.438c-0.386-0.462-0.863-1.031-1.423-1.7c-0.615-0.628-1.346-1.34-2.185-2.136 c-0.819-0.842-1.824-1.577-2.889-2.47c-1.05-0.921-2.295-1.734-3.618-2.638c-2.644-1.815-5.812-3.559-9.364-5.27 c-1.774-0.863-3.679-1.6-5.637-2.44c-0.995-0.363-2.007-0.731-3.034-1.106c-1.03-0.375-2.077-0.754-3.153-1.074 c-2.142-0.689-4.363-1.344-6.65-1.914c-2.278-0.643-4.638-1.103-7.036-1.615c-4.802-0.955-9.809-1.724-14.921-2.182 c-2.393-0.26-4.811-0.421-7.239-0.534c-6.078-10.197-4.259-25.82-4.04-40.388c3.084-6.985,3.284-15.998,3.04-25.264 c0.164-0.168,0.321-0.344,0.487-0.507c0.387-0.292,0.734-0.649,1.139-0.881c0.405-0.229,0.771-0.524,1.182-0.66 c0.2-0.084,0.395-0.167,0.583-0.246c0.095-0.04,0.188-0.08,0.28-0.118c0.096-0.023,0.19-0.045,0.283-0.067 c0.374-0.089,0.716-0.17,1.02-0.242c0.31-0.033,0.584-0.04,0.81-0.057c0.455-0.028,0.714-0.044,0.714-0.044 s-0.259-0.021-0.713-0.057c-0.228-0.015-0.507-0.047-0.828-0.058c-0.321,0.03-0.683,0.063-1.078,0.1 c-0.1,0.01-0.202,0.019-0.306,0.029c-0.101,0.026-0.203,0.053-0.306,0.08c-0.209,0.055-0.426,0.112-0.648,0.171 c-0.461,0.088-0.883,0.336-1.356,0.524c-0.452,0.184-0.855,0.48-1.297,0.737c-0.098-3.246-0.231-6.51-0.299-9.716 c-0.003-0.161,0.002-0.315,0-0.475c0.11-0.053,0.214-0.121,0.304-0.213l0.005-0.005l0.108-0.111c0.01-0.01,0.135-0.19,0.398-0.511 c0.261-0.328,0.663-0.785,1.165-1.317c0.255-0.262,0.537-0.541,0.841-0.831c0.315-0.274,0.632-0.591,0.995-0.867 c0.353-0.293,0.727-0.584,1.126-0.851c0.386-0.292,0.812-0.524,1.232-0.777c0.421-0.25,0.873-0.429,1.306-0.647 c0.453-0.146,0.895-0.338,1.34-0.443c0.448-0.076,0.882-0.229,1.304-0.235c0.42-0.01,0.827-0.086,1.195-0.04 c0.373,0.038,0.714,0.073,1.017,0.103c0.3,0.054,0.551,0.146,0.766,0.2c0.427,0.12,0.672,0.189,0.672,0.189 s-0.233-0.101-0.641-0.277c-0.207-0.082-0.452-0.211-0.749-0.306c-0.306-0.073-0.65-0.156-1.027-0.246 c-0.379-0.098-0.803-0.079-1.251-0.126c-0.451-0.051-0.918,0.043-1.413,0.063c-0.49,0.049-0.981,0.185-1.494,0.281 c-0.486,0.166-1.004,0.298-1.488,0.503c-0.482,0.207-0.978,0.4-1.429,0.653c-0.467,0.229-0.907,0.485-1.326,0.747 c-0.43,0.247-0.809,0.533-1.188,0.784c-0.366,0.265-0.708,0.523-1.019,0.767c-0.266,0.215-0.506,0.416-0.726,0.603 c0.425-13.601,5.301-23.234,14.508-29.629c3.358-2.333,7.204-3.925,11.348-5.078c0.06,0.02,0.116,0.039,0.186,0.063 c0.451,0.157,1.098,0.389,1.866,0.691c1.536,0.602,3.566,1.476,5.493,2.544c1.93,1.057,3.747,2.337,4.86,3.562 c0.282,0.302,0.515,0.6,0.715,0.871c0.189,0.278,0.348,0.526,0.454,0.744c0.124,0.211,0.182,0.393,0.235,0.513 c0.05,0.121,0.076,0.186,0.076,0.186s-0.018-0.067-0.053-0.194c-0.038-0.125-0.075-0.317-0.173-0.543 c-0.081-0.234-0.21-0.504-0.369-0.812c-0.169-0.3-0.371-0.635-0.623-0.98c-0.498-0.692-1.168-1.435-1.949-2.161 c-0.782-0.725-1.671-1.436-2.592-2.102c-1.74-1.262-3.585-2.35-5.049-3.15c7.532-1.671,15.863-2.169,24.036-3.001 c3.434-0.347,7.375-1.098,10.81-2.562c0.186,0.238,0.467,0.4,0.793,0.417c0.042,0.002,0.084,0.002,0.125,0l0.036-0.003 c0,0,0.269-0.018,0.74-0.049c0.477-0.027,1.163-0.058,1.988-0.071c1.65-0.028,3.86,0.007,6.048,0.262 c2.187,0.242,4.354,0.735,5.85,1.443c0.376,0.172,0.705,0.358,0.992,0.533c0.281,0.185,0.522,0.354,0.703,0.515 c0.195,0.148,0.318,0.294,0.412,0.385c0.092,0.093,0.142,0.143,0.142,0.143s-0.043-0.055-0.123-0.159 C189.351,50.013,189.243,49.849,189.067,49.677z",
"duration": 1800
},
{
"path": "M59.13,69.854c-1.749-1.45-3.806-2.352-5.814-3.376c-1.598-0.815-3.268-1.866-4.187-3.469 c0.406,1.982,1.136,4.128,2.457,5.688c1.897,2.24,4.511,3.606,6.754,5.439c1.492,1.219,2.734,2.865,3.547,4.615 C62.612,75.578,61.672,71.963,59.13,69.854z",
"duration": 600
},
{
"path": "M57.64,74.338c-2.709-2.284-6.304-3.911-7.667-7.418c-0.164,1.564-0.051,3.203,0.335,4.725 c0.678,2.677,2.529,4.529,4.924,5.807c0.622,0.332,1.281,0.586,1.943,0.827c0.666,0.242,1.341,0.467,1.992,0.749 c0.608,0.264,1.193,0.537,1.658,1.025c0.281,0.295,0.544,0.612,0.788,0.939C61.612,80.991,61.039,77.204,57.64,74.338z",
"duration": 600
},
{
"path": "M125.712,40.505c2.201,0.487,4.362,1.098,6.634,1.091c3.303-0.011,6.327-2.204,7.785-5.114 c-1.739,0.833-3.745,1.314-5.672,1.306c-2.896-0.012-5.783-0.62-8.671-0.097c-2.012,0.365-3.94,1.556-5.513,2.828 C122.003,39.868,123.96,40.118,125.712,40.505z",
"duration": 600
},
{
"path": "M140.137,34.802c-0.67,0.081-1.295-0.08-1.932-0.263c-0.682-0.196-1.345-0.452-2.013-0.689 c-0.663-0.235-1.334-0.458-2.025-0.597c-2.66-0.536-5.267-0.284-7.492,1.351c-1.265,0.93-2.395,2.123-3.262,3.434 c3.283-1.84,7.092-0.81,10.635-0.851c4.446-0.051,7.296-2.609,7.296-2.609C140.946,34.675,140.542,34.753,140.137,34.802z",
"duration": 600
},
{
"path": "M86.28,73.384c-1.006,0.718-2.219,1.243-3.437,1.451c-1.83,0.312-3.719,0.247-5.485,0.896 c-1.23,0.452-2.316,1.417-3.169,2.394c1.019-0.603,2.283-0.661,3.431-0.61c1.443,0.065,2.875,0.212,4.309-0.043 C84.014,77.1,85.681,75.382,86.28,73.384z",
"duration": 600
},
{
"path": "M86.836,72.048c-0.24,0.105-0.486,0.198-0.736,0.274c-0.414,0.125-0.826,0.093-1.249,0.047 c-0.452-0.049-0.899-0.137-1.347-0.213c-0.445-0.075-0.893-0.142-1.344-0.154c-1.739-0.045-3.357,0.402-4.581,1.68 c-0.696,0.727-1.278,1.605-1.681,2.528c1.87-1.524,4.388-1.294,6.621-1.711C85.319,73.978,86.836,72.048,86.836,72.048z",
"duration": 600
},
{
"path": "M87.161,63.237c1.217,0.208,2.431,0.733,3.437,1.451c-0.599-1.998-2.267-3.716-4.351-4.088 c-1.434-0.255-2.865-0.108-4.309-0.043c-1.149,0.051-2.412-0.007-3.431-0.61c0.853,0.977,1.939,1.942,3.169,2.394 C83.442,62.99,85.331,62.924,87.161,63.237z",
"duration": 600
},
{
"path": "M89.168,65.702c0.422-0.045,0.835-0.078,1.249,0.047c0.25,0.076,0.497,0.169,0.736,0.274c0,0-1.517-1.93-4.318-2.453 c-2.232-0.416-4.751-0.187-6.621-1.711c0.403,0.924,0.985,1.802,1.681,2.528c1.225,1.278,2.843,1.725,4.581,1.68 c0.452-0.012,0.9-0.078,1.344-0.154C88.269,65.839,88.716,65.751,89.168,65.702z",
"duration": 600
},
{
"path": "M103.229,42.831c1.766,0.649,3.656,0.583,5.485,0.896c1.217,0.207,2.431,0.733,3.437,1.451 c-0.599-1.998-2.267-3.716-4.351-4.088c-1.434-0.255-2.866-0.108-4.309-0.043c-1.149,0.051-2.412-0.007-3.431-0.61 C100.914,41.414,101.999,42.379,103.229,42.831z",
"duration": 600
},
{
"path": "M108.03,46.558c0.452-0.012,0.9-0.078,1.344-0.154c0.448-0.076,0.895-0.164,1.347-0.213 c0.422-0.045,0.835-0.078,1.249,0.047c0.25,0.076,0.497,0.169,0.736,0.274c0,0-1.517-1.93-4.318-2.453 c-2.232-0.416-4.751-0.187-6.621-1.711c0.403,0.924,0.985,1.802,1.681,2.528C104.673,46.157,106.291,46.603,108.03,46.558z",
"duration": 600
},
{
"path": "M100.42,76.522c-0.814-0.36-1.686-0.481-2.553-0.652c-0.69-0.137-1.432-0.355-1.95-0.861 c0.365,0.704,0.869,1.435,1.534,1.883c0.955,0.642,2.087,0.878,3.128,1.33c0.693,0.3,1.337,0.789,1.831,1.361 C102.345,78.309,101.604,77.046,100.42,76.522z",
"duration": 600
},
{
"path": "M100.337,78.373c-1.265-0.572-2.795-0.802-3.684-1.979c0.105,0.607,0.323,1.213,0.631,1.746 c0.542,0.937,1.438,1.438,2.477,1.664c0.27,0.059,0.546,0.084,0.821,0.104c0.277,0.02,0.556,0.033,0.831,0.07 c0.257,0.034,0.507,0.075,0.735,0.21c0.138,0.081,0.27,0.173,0.398,0.27C102.546,80.458,101.925,79.091,100.337,78.373z",
"duration": 600
},
{
"path": "M30.494,63.465c1.25,1.021,2.29,2.4,2.97,3.864c0.607-2.656-0.18-5.684-2.309-7.45c-1.464-1.214-3.187-1.97-4.868-2.827 c-1.338-0.682-2.736-1.563-3.506-2.905c0.34,1.66,0.951,3.457,2.057,4.763C26.427,60.787,28.616,61.931,30.494,63.465z",
"duration": 600
},
{
"path": "M29.908,63.634c-2.268-1.912-5.279-3.275-6.421-6.212c-0.138,1.309-0.043,2.682,0.28,3.957 c0.568,2.242,2.118,3.793,4.123,4.863c0.521,0.278,1.073,0.491,1.627,0.692c0.558,0.203,1.123,0.391,1.668,0.627 c0.509,0.221,0.999,0.449,1.389,0.859c0.236,0.247,0.455,0.513,0.66,0.786C33.234,69.206,32.754,66.034,29.908,63.634z",
"duration": 600
},
{
"path": "M153.562,24.555c0.524,3.637,3.408,6.63,6.839,7.785c-1.187-1.787-2.028-3.923-2.317-6.047 c-0.436-3.192-0.212-6.467-1.236-9.568c-0.713-2.16-2.325-4.1-3.97-5.636c0.986,1.803,1.014,3.999,0.859,5.988 C153.542,19.578,153.203,22.053,153.562,24.555z",
"duration": 600
},
{
"path": "M162.692,27.594c0.156-0.767,0.298-1.541,0.344-2.324c0.179-3.014-0.502-5.847-2.648-8.046 c-1.22-1.25-2.71-2.31-4.289-3.063c2.536,3.332,1.991,7.688,2.584,11.585c0.744,4.89,4.005,7.634,4.005,7.634 c-0.168-0.422-0.316-0.855-0.433-1.293c-0.193-0.725-0.112-1.439-0.009-2.169C162.356,29.138,162.535,28.367,162.692,27.594z",
"duration": 600
},
{
"path": "M42.341,99.859c2.448,0.542,4.853,1.222,7.381,1.214c3.675-0.012,7.04-2.452,8.661-5.689 c-1.935,0.927-4.167,1.462-6.31,1.453c-3.222-0.013-6.434-0.69-9.647-0.108c-2.238,0.406-4.383,1.732-6.134,3.147 C38.214,99.15,40.392,99.428,42.341,99.859z",
"duration": 600
},
{
"path": "M51.614,96.168c4.946-0.056,8.117-2.903,8.117-2.903c-0.441,0.108-0.891,0.194-1.341,0.249 c-0.745,0.091-1.441-0.089-2.149-0.293c-0.758-0.218-1.497-0.503-2.24-0.766c-0.738-0.261-1.484-0.509-2.253-0.664 c-2.96-0.597-5.86-0.316-8.336,1.503c-1.408,1.034-2.665,2.362-3.63,3.821C43.434,95.067,47.672,96.213,51.614,96.168z",
"duration": 600
},
{
"path": "M131.615,73.907c1.79-1.756,3.672-3.4,5.044-5.523c1.995-3.086,1.786-7.238-0.043-10.363 c-0.279,2.128-1.048,4.29-2.225,6.081c-1.769,2.693-4.088,5.016-5.353,8.026c-0.881,2.097-0.94,4.618-0.709,6.857 C128.769,76.979,130.19,75.305,131.615,73.907z",
"duration": 600
},
{
"path": "M135.576,55.735c-0.15,0.428-0.323,0.852-0.523,1.26c-0.331,0.674-0.86,1.159-1.418,1.642 c-0.597,0.517-1.238,0.98-1.864,1.459c-0.622,0.476-1.237,0.966-1.786,1.526c-2.115,2.155-3.462,4.738-3.288,7.806 c0.099,1.744,0.525,3.522,1.222,5.126c0.277-4.178,3.55-7.105,5.662-10.432C136.232,59.946,135.576,55.735,135.576,55.735z",
"duration": 600
},
{
"path": "M18.734,80.747c1.306,0.063,2.647,0.461,3.796,1.088c-0.883-2.023-2.854-3.617-5.091-3.743 c-1.539-0.086-3.025,0.251-4.533,0.502c-1.201,0.2-2.536,0.299-3.683-0.205c1.021,0.918,2.284,1.794,3.634,2.113 C14.794,80.96,16.772,80.651,18.734,80.747z",
"duration": 600
},
{
"path": "M13.346,82.626c1.449,1.188,3.206,1.452,5.028,1.183c0.473-0.07,0.935-0.197,1.393-0.332 c0.461-0.136,0.92-0.286,1.389-0.394c0.438-0.101,0.867-0.188,1.318-0.109c0.273,0.048,0.544,0.115,0.809,0.195 c0,0-1.839-1.836-4.85-2.029c-2.399-0.154-5.017,0.407-7.175-0.957C11.8,81.102,12.523,81.951,13.346,82.626z",
"duration": 600
},
{
"path": "M181.66,40.835c-1.368,0.503-2.576,1.577-3.526,2.664c1.134-0.671,2.54-0.735,3.818-0.678 c1.606,0.072,3.199,0.236,4.794-0.048c2.319-0.413,4.174-2.325,4.841-4.548c-1.119,0.799-2.469,1.383-3.824,1.614 C185.727,40.186,183.625,40.113,181.66,40.835z",
"duration": 600
},
{
"path": "M189.996,37.096c-0.503-0.054-1.001-0.152-1.499-0.237c-0.495-0.084-0.993-0.158-1.496-0.171 c-1.935-0.05-3.735,0.447-5.097,1.869c-0.775,0.808-1.422,1.785-1.87,2.813c2.08-1.696,4.882-1.44,7.366-1.903 c3.117-0.581,4.805-2.729,4.805-2.729c-0.267,0.117-0.541,0.221-0.819,0.305C190.925,37.183,190.466,37.146,189.996,37.096z",
"duration": 600
},
{
"path": "M124.056,96.178c-0.667-2.223-2.522-4.135-4.841-4.548c-1.595-0.284-3.188-0.12-4.794-0.048 c-1.278,0.057-2.683-0.008-3.818-0.678c0.949,1.087,2.157,2.161,3.526,2.664c1.965,0.722,4.067,0.649,6.103,0.997 C121.586,94.795,122.936,95.38,124.056,96.178z",
"duration": 600
},
{
"path": "M119.47,97.715c0.502-0.013,1.001-0.087,1.496-0.171c0.498-0.084,0.996-0.182,1.499-0.237 c0.47-0.05,0.929-0.087,1.389,0.052c0.278,0.084,0.553,0.188,0.819,0.305c0,0-1.688-2.147-4.805-2.729 c-2.484-0.463-5.286-0.208-7.366-1.903c0.448,1.028,1.096,2.004,1.87,2.813C115.736,97.268,117.536,97.765,119.47,97.715z",
"duration": 600
},
{
"path": "M108.977,28.828c1.354,0.231,2.704,0.815,3.824,1.614c-0.667-2.223-2.522-4.135-4.841-4.548 c-1.595-0.284-3.188-0.12-4.794-0.048c-1.278,0.057-2.683-0.008-3.818-0.678c0.949,1.087,2.157,2.161,3.526,2.664 C104.839,28.553,106.941,28.48,108.977,28.828z",
"duration": 600
},
{
"path": "M108.614,29.2c-2.484-0.463-5.286-0.208-7.366-1.903c0.448,1.028,1.096,2.004,1.87,2.813 c1.363,1.422,3.163,1.919,5.097,1.869c0.502-0.013,1.001-0.087,1.496-0.171c0.498-0.084,0.996-0.182,1.499-0.237 c0.47-0.05,0.929-0.087,1.389,0.052c0.278,0.084,0.553,0.188,0.819,0.305C113.419,31.928,111.731,29.781,108.614,29.2z",
"duration": 600
},
{
"path": "M93.316,118.064c-1.482-0.655-3.068-0.875-4.645-1.187c-1.255-0.248-2.605-0.646-3.547-1.567 c0.664,1.281,1.581,2.612,2.791,3.426c1.737,1.169,3.796,1.598,5.691,2.419c1.261,0.546,2.433,1.435,3.33,2.477 C96.817,121.315,95.47,119.017,93.316,118.064z",
"duration": 600
},
{
"path": "M93.165,121.43c-2.302-1.041-5.085-1.459-6.702-3.6c0.191,1.105,0.587,2.208,1.148,3.177 c0.985,1.705,2.616,2.616,4.507,3.027c0.491,0.107,0.993,0.153,1.494,0.19c0.504,0.037,1.011,0.06,1.512,0.127 c0.468,0.063,0.923,0.136,1.337,0.381c0.25,0.148,0.492,0.314,0.723,0.491C97.183,125.223,96.054,122.736,93.165,121.43z",
"duration": 600
},
{
"path": "M75.216,64.867c1.298,1.06,2.378,2.492,3.085,4.014c0.631-2.759-0.187-5.904-2.398-7.738 c-1.521-1.261-3.31-2.046-5.057-2.936c-1.39-0.709-2.842-1.623-3.642-3.017c0.353,1.724,0.988,3.59,2.137,4.948 C70.991,62.085,73.265,63.273,75.216,64.867z",
"duration": 600
},
{
"path": "M72.512,67.75c0.541,0.289,1.114,0.51,1.69,0.719c0.579,0.211,1.167,0.406,1.732,0.651 c0.529,0.229,1.038,0.467,1.442,0.892c0.245,0.257,0.473,0.533,0.686,0.817c0,0-0.498-3.294-3.455-5.786 c-2.356-1.986-5.483-3.402-6.669-6.452c-0.143,1.36-0.044,2.786,0.291,4.11C68.819,65.029,70.429,66.639,72.512,67.75z",
"duration": 600
},
{
"path": "M69.757,106.154c1.914,0.423,3.794,0.955,5.77,0.949c2.873-0.01,5.503-1.917,6.771-4.448 c-1.513,0.725-3.257,1.143-4.933,1.136c-2.519-0.01-5.03-0.539-7.542-0.084c-1.75,0.317-3.427,1.354-4.795,2.46 C66.531,105.6,68.233,105.818,69.757,106.154z",
"duration": 600
},
{
"path": "M77.006,103.269c3.867-0.044,6.346-2.27,6.346-2.27c-0.345,0.084-0.696,0.152-1.048,0.194 c-0.583,0.071-1.126-0.069-1.68-0.229c-0.593-0.17-1.17-0.393-1.751-0.599c-0.577-0.204-1.16-0.398-1.761-0.519 c-2.314-0.467-4.581-0.247-6.517,1.175c-1.1,0.809-2.083,1.846-2.838,2.987C70.612,102.408,73.925,103.304,77.006,103.269z",
"duration": 600
},
{
"path": "M171.283,25.214c-0.839,1.568-1.068,3.526-1.052,5.286c0.489-1.531,1.717-2.73,2.928-3.714 c1.521-1.237,3.106-2.379,4.328-3.931c1.777-2.257,1.917-5.503,0.722-8.069c-0.372,1.636-1.128,3.263-2.175,4.571 C174.461,21.324,172.487,22.963,171.283,25.214z",
"duration": 600
},
{
"path": "M169.658,22.941c-0.05,1.365,0.152,2.779,0.577,4.079c0.52-3.232,3.28-5.271,5.167-7.707 c2.368-3.057,2.164-6.382,2.164-6.382c-0.148,0.322-0.314,0.64-0.499,0.942c-0.307,0.501-0.754,0.839-1.223,1.174 c-0.502,0.359-1.035,0.673-1.557,1c-0.519,0.325-1.033,0.662-1.501,1.057C170.982,18.628,169.746,20.54,169.658,22.941z",
"duration": 600
},
{
"path": "M96.244,52.388c-0.575-1.874-1.038-3.772-2.017-5.488c-1.424-2.495-4.38-3.844-7.207-3.701 c1.376,0.959,2.6,2.271,3.419,3.733c1.232,2.197,2.009,4.642,3.643,6.604c1.138,1.366,2.866,2.315,4.503,2.961 C97.351,55.468,96.701,53.879,96.244,52.388z",
"duration": 600
},
{
"path": "M95.362,55.186c-2.799-1.696-3.653-5.02-5.201-7.685c-1.944-3.343-5.102-4.404-5.102-4.404 c0.243,0.258,0.475,0.531,0.686,0.816c0.349,0.472,0.494,1.014,0.629,1.575c0.144,0.6,0.234,1.212,0.342,1.819 c0.107,0.603,0.225,1.206,0.416,1.789c0.734,2.243,2.042,4.108,4.233,5.092C92.611,54.747,93.998,55.091,95.362,55.186z",
"duration": 600
},
{
"path": "M169.79,52.383c-2.011-0.18-4.159,0.45-5.99,1.249c1.817-0.169,3.615,0.582,5.182,1.409 c1.968,1.04,3.866,2.188,6.031,2.776c3.148,0.854,6.602-0.442,8.752-2.831c-1.874,0.338-3.91,0.271-5.743-0.241 C175.267,53.976,172.677,52.641,169.79,52.383z",
"duration": 600
},
{
"path": "M182.44,52.632c-0.598-0.365-1.163-0.783-1.737-1.183c-0.57-0.397-1.151-0.785-1.772-1.099 c-2.393-1.208-4.941-1.65-7.488-0.676c-1.448,0.554-2.837,1.394-4.006,2.416c3.608-0.892,6.965,1.086,10.349,1.975 c4.247,1.116,7.631-0.574,7.631-0.574c-0.403-0.012-0.808-0.044-1.206-0.103C183.552,53.29,182.999,52.973,182.44,52.632z",
"duration": 600
},
{
"path": "M118.556,30.442c0.887-0.524,1.985-0.575,2.984-0.53c1.255,0.056,2.501,0.185,3.748-0.038 c1.813-0.323,3.263-1.818,3.784-3.555c-0.875,0.625-1.93,1.081-2.989,1.262c-1.591,0.272-3.235,0.215-4.771,0.779 C120.242,28.753,119.298,29.592,118.556,30.442z",
"duration": 600
},
{
"path": "M129.555,25.156c-0.208,0.091-0.423,0.173-0.64,0.238c-0.36,0.109-0.719,0.08-1.086,0.041 c-0.393-0.042-0.782-0.119-1.172-0.185c-0.387-0.065-0.777-0.123-1.169-0.134c-1.512-0.039-2.919,0.349-3.985,1.461 c-0.606,0.632-1.112,1.396-1.462,2.199c1.626-1.326,3.817-1.126,5.758-1.488C128.236,26.835,129.555,25.156,129.555,25.156z",
"duration": 600
},
{
"path": "M183.661,29.861c1.536,0.565,3.179,0.508,4.771,0.779c1.059,0.18,2.114,0.637,2.989,1.262 c-0.521-1.738-1.971-3.232-3.784-3.555c-1.247-0.222-2.492-0.094-3.747-0.038c-0.999,0.045-2.098-0.006-2.984-0.53 C181.647,28.628,182.591,29.467,183.661,29.861z",
"duration": 600
},
{
"path": "M182.39,29.443c0.35,0.803,0.857,1.567,1.462,2.199c1.065,1.112,2.472,1.5,3.985,1.461c0.393-0.01,0.783-0.068,1.169-0.134 c0.39-0.066,0.779-0.143,1.172-0.185c0.367-0.039,0.726-0.068,1.086,0.041c0.218,0.066,0.432,0.147,0.64,0.238 c0,0-1.32-1.679-3.756-2.133C186.206,30.568,184.016,30.768,182.39,29.443z",
"duration": 600
},
{
"path": "M39.966,79.739c-1.247-0.222-2.492-0.094-3.747-0.037c-0.999,0.045-2.098-0.006-2.984-0.53 c0.742,0.849,1.686,1.689,2.756,2.082c1.536,0.565,3.179,0.508,4.771,0.779c1.059,0.18,2.114,0.637,2.989,1.262 C43.229,81.556,41.779,80.062,39.966,79.739z",
"duration": 600
},
{
"path": "M34.719,80.835c0.35,0.803,0.856,1.567,1.462,2.199c1.065,1.112,2.472,1.5,3.985,1.461c0.393-0.01,0.782-0.068,1.169-0.134 c0.39-0.066,0.779-0.143,1.172-0.185c0.367-0.039,0.726-0.068,1.086,0.041c0.218,0.066,0.432,0.147,0.64,0.238 c0,0-1.32-1.679-3.756-2.133C38.536,81.961,36.345,82.161,34.719,80.835z",
"duration": 600
},
{
"path": "M150.03,34.076c0.986,0.427,1.902,1.122,2.603,1.936c-0.093-1.812-1.146-3.608-2.83-4.353 c-1.158-0.512-2.398-0.684-3.631-0.928c-0.981-0.194-2.036-0.505-2.773-1.225c0.519,1.002,1.236,2.042,2.182,2.678 C146.939,33.099,148.549,33.434,150.03,34.076z",
"duration": 600
},
{
"path": "M148.866,36.327c0.384,0.083,0.776,0.12,1.168,0.148c0.394,0.029,0.79,0.047,1.182,0.099 c0.366,0.049,0.721,0.107,1.045,0.298c0.196,0.116,0.385,0.246,0.565,0.384c0,0-0.882-1.944-3.141-2.965 c-1.8-0.814-3.975-1.14-5.239-2.814c0.149,0.864,0.459,1.726,0.897,2.484C146.113,35.293,147.388,36.005,148.866,36.327z",
"duration": 600
},
{
"path": "M145.089,78.356c1.359-1.334,2.789-2.582,3.831-4.195c1.515-2.344,1.356-5.497-0.032-7.87 c-0.212,1.616-0.796,3.258-1.69,4.619c-1.343,2.045-3.105,3.809-4.066,6.096c-0.669,1.593-0.714,3.508-0.539,5.208 C142.928,80.689,144.007,79.418,145.089,78.356z",
"duration": 600
},
{
"path": "M148.098,64.554c-0.114,0.325-0.246,0.647-0.397,0.957c-0.251,0.512-0.654,0.88-1.077,1.247 c-0.453,0.392-0.94,0.744-1.416,1.108c-0.472,0.362-0.939,0.734-1.356,1.159c-1.606,1.637-2.63,3.599-2.497,5.929 c0.075,1.325,0.399,2.675,0.928,3.894c0.21-3.173,2.696-5.396,4.301-7.923C148.596,67.752,148.098,64.554,148.098,64.554z",
"duration": 600
},
{
"path": "M84.549,84.457c-1.211-0.216-2.421-0.091-3.641-0.036c-0.971,0.043-2.038-0.006-2.9-0.515 c0.721,0.825,1.638,1.641,2.678,2.023c1.492,0.548,3.089,0.493,4.635,0.757c1.029,0.175,2.054,0.619,2.904,1.226 C87.72,86.223,86.31,84.771,84.549,84.457z",
"duration": 600
},
{
"path": "M79.451,85.522c0.34,0.78,0.832,1.522,1.42,2.136c1.035,1.08,2.402,1.458,3.871,1.419c0.382-0.01,0.76-0.066,1.136-0.13 c0.379-0.064,0.757-0.139,1.138-0.18c0.357-0.038,0.705-0.066,1.055,0.04c0.211,0.064,0.42,0.143,0.622,0.232 c0,0-1.282-1.631-3.649-2.072C83.16,86.616,81.031,86.81,79.451,85.522z",
"duration": 600
}
],
"dimensions" : { "width": 220, "height":220 }
}
}
$(document).ready(function(){
// Setup your Lazy Line element.
// see README file for more settings
$('#demo').lazylinepainter({
'svgData' : svgData,
'strokeWidth':2,
'strokeColor':'#dc908e',
'onComplete' : function(){
$(".treeTip").show().addClass("zoomIn");
},
'onStart' : function(){
console.log('>> onStart');
}
}
)
// Paint your Lazy Line, that easy!
var state = 'paint';
$('#demo').lazylinepainter(state);
})
})( jQuery );
</script>
</head>
<body>
<div id='demo'></div>
</body>
</html>
JS代码(jquery.lazylinepainter-1.5.1.min.js):
/* * Lazy Line Painter * SVG Stroke animation. * * https://github.com/camoconnell/lazy-line-painter * http://www.camoconnell.com * * Licensed under the MIT license. * */
(function(e){
var g={
init:function(a){
return this.each(function(){
var b=e(this),c=b.data("lazyLinePainter");
b.addClass("lazy-line");
if(!c){
var c=e.extend({
width:null,height:null,strokeWidth:2,strokeColor:"#000",strokeOverColor:null,strokeCap:"round",strokeJoin:"round",strokeOpacity:1,arrowEnd:"none",onComplete:null,onStart:null,delay:null,overrideKey:null,drawSequential:!0,speedMultiplier:1,reverse:!1,responsive:!1}
,a),d=c.overrideKey?c.overrideKey:b.attr("id").replace("#",""),f=c.svgData[d].dimensions.width,l=c.svgData[d].dimensions.height;
c.svgData=c.svgData[d].strokepath;
null===c.width&&(c.width=f);
null===c.height&&(c.height=l);
c.responsive||b.css({
width:c.width,height:c.height}
);
d="0 0 "+f+" "+l;
f=document.createElementNS("http://www.w3.org/2000/svg","svg");
f.setAttributeNS(null,"viewBox",d);
f.setAttribute("xmlns","http://www.w3.org/2000/svg");
c.svg=e(f);
b.append(c.svg);
b.data("lazyLinePainter",c)}
}
)}
,paint:function(){
return this.each(function(){
var a=e(this).data("lazyLinePainter"),b=function(){
a.paths=[];
a.longestDuration=0;
for(var b=a.playhead=0,d=0,f=0,d=0;
d<a.svgData.length;
d++)b=a.svgData[d].duration*a.speedMultiplier,f+=b;
for(d=0;
d<a.svgData.length;
d++){
var e=m(a,d),h=e.getTotalLength();
e.style.strokeDasharray=h+" "+h;
e.style.strokeDashoffset=h;
e.style.display="block";
e.getBoundingClientRect();
b=a.svgData[d].duration*a.speedMultiplier;
b>a.longestDuration&&(a.longestDuration=b);
var g;
g=a.reverse?f-=b:a.playhead;
a.paths.push({
duration:b,drawStartTime:g,path:e,length:h}
);
a.playhead+=b}
a.totalDuration=a.drawSequential?a.playhead:a.longestDuration;
a.rAF=requestAnimationFrame(function(b){
k(b,a)}
);
if(null!==a.onStart)a.onStart()}
;
null===a.delay?b():setTimeout(b,a.delay)}
)}
,pauseResume:function(){
return this.each(function(){
var a=e(this).data("lazyLinePainter");
a.paused?(a.paused=!1,requestAnimationFrame(function(b){
n(b,a)}
)):(a.paused=!0,cancelAnimationFrame(a.rAF))}
)}
,erase:function(){
return this.each(function(){
var a=e(this).data("lazyLinePainter");
a.startTime=null;
a.elapsedTime=null;
cancelAnimationFrame(a.rAF);
a.svg.empty()}
)}
,destroy:function(){
return this.each(function(){
var a=e(this);
a.removeData("lazyLinePainter");
a.remove()}
)}
}
,n=function(a,b){
b.startTime=a-b.elapsedTime;
requestAnimationFrame(function(a){
k(a,b)}
)}
,k=function(a,b){
b.startTime||(b.startTime=a);
b.elapsedTime=a-b.startTime;
for(var c=0;
c<b.paths.length;
c++){
var d;
b.drawSequential?(d=b.elapsedTime-b.paths[c].drawStartTime,0>d&&(d=0)):d=b.elapsedTime;
d<b.paths[c].duration&&0<d?(d=d/b.paths[c].duration*b.paths[c].length,b.paths[c].path.style.strokeDashoffset=b.reverse||b.svgData[c].reverse?-b.paths[c].length+d:b.paths[c].length-d):d>b.paths[c].duration&&(b.paths[c].path.style.strokeDashoffset=0)}
if(b.elapsedTime<b.totalDuration)b.rAF=requestAnimationFrame(function(a){
k(a,b)}
);
else if(null!==b.onComplete)b.onComplete()}
,m=function(a,b){
var c=document.createElementNS("http://www.w3.org/2000/svg","path"),d=e(c);
a.svg.append(d);
d.attr(p(a,a.svgData[b]));
return c}
,p=function(a,b){
return{
d:b.path,stroke:b.strokeColor?b.strokeColor:a.strokeColor,"fill-opacity":0,"stroke-opacity":b.strokeOpacity?b.strokeOpacity:a.strokeOpacity,"stroke-width":b.strokeWidth?b.strokeWidth:a.strokeWidth,"stroke-linecap":b.strokeCap?b.strokeCap:a.strokeCap,"stroke-linejoin":b.strokeJoin?b.strokeJoin:a.strokeJoin}
}
;
e.fn.lazylinepainter=function(a){
if(g[a])return g[a].apply(this,Array.prototype.slice.call(arguments,1));
if("object"!==typeof a&&a)console.log("opps - issue finding method");
else return g.init.apply(this,arguments)}
}
)(jQuery);
分享到QQ
分享到微博
微信扫一扫
