如何一个接一个地为两个jQuery懒惰线条画家动画制作动画？ [英] How can I animate two jquery lazy line painter animations one after the other?
本文介绍了如何一个接一个地为两个jQuery懒惰线条画家动画制作动画？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在Illustrator上创建了两个独立的SVG文件，并使用jQuery惰性线条绘制插件对它们进行了动画处理。当我插入第一个动画的代码时，它运行得非常好。但是，当我现在放入第二个动画的代码时，两个动画都不会启动。我把每个动画放在不同的标签上，一个标题是"树"，另一个标题是"建筑物"。以下是我的代码：
<script type="text/javascript">
/*
* Lazy Line Painter - Path Object
* Generated using 'SVG to Lazy Line Converter'
*
* http://lazylinepainter.info
* Copyright 2013, Cam O'Connell
*
*/
var pathObj = {
"tree": {
"strokepath": [
{
"path": "M248.5,393.946c1.422-12.394-4.539-24.728-6-36.623 c-0.439-3.58,1.326-8.318,1-11.878c-0.828-8.995-4.18-17.076-4-24.745c0.639-27.324,19.256-46.841,40-59.389 c7.152-11.066,14.367-22.072,27-27.715c18.926,2.716,32.074,16.421,43,23.755c-0.094-8.707,21.307-19.636,24-3.959 c3.236-0.815,8.648,1.231,9,0c-2.066-2.903-2.594-7.331-6-8.908c-3.156-0.483-3.531,1.784-7,0.989 c-0.088-4.845-4.287-2.671-2-7.918c10.719,0.618,19.354-5.569,28-7.919c7-1.9,11.986,0.271,16-4.949 c4.521-5.881,0.291-14.44,7-23.755c-17.879-0.736-34.1,9.159-26,27.715c-19.213,3.42-32.766,12.44-47,20.786 c-7.813-3.116-11.973-12.324-20-15.837c-4.264-1.864-10.547,0.815-13-4.949c9.43-5.843,20.783-9.782,35-10.889 c13.203-12.952,24.084-31.382,49-29.695c3.637-3.796,9.074-15.902,8-17.816c-13.275-0.931-22.365,2.279-20,16.827 c-6.123-1.355-11.813,6.8-17,5.938c-0.76-8.099,7.857-11.301,8-17.816c0.139-6.308-6.162-8.93-8-15.837 c-8.354,7.049-10.344,21.651,1,26.725c-2.836,1.813-1.822,7.435-3,10.888c-8.65,0.812-12.189,12.243-19,15.838 c-10.711,5.656-23.76,3.361-34,7.918c-23.91,10.641-33.668,33.341-55,42.563c1.076-4.874,5.631-6.305,7-10.889 c-2.555-1.066-3.5,4.262-5,0.99c0.238-8.012,0.248-16.251,4-20.786c-5.148-25.86,8.119-33.892,26-44.542 c11.633-6.927,23.236-9.103,37-8.908c11.666-9.237,30.057-11.82,41-21.776c2.725-0.91-1.396-3.094,0-5.938 c15.221-10.339,24.258-26.799,41-35.633c3.457,3.507,3.59,10.304,7,13.857c4.449,1.204,10.246,1.076,16,0.99 c-1.139-6.132-4.236-10.325-8-13.857c-5.375-0.701-8.543,0.782-12,1.979c-2.373-1.487-1-4.168-2-4.949 c-2.816,1.833-6.236,3.065-10,3.959c-1.307-13.5,7.041-17.446,14-22.766c-1.689-3.514,2.646-11.544-4-15.837 c-1.504,2.801-4.045,4.576-4,8.909c-0.004,3.633,3.5,3.793,5,5.938c-12.82,5.789-12.117,30.235-24,33.654 c-0.012-1.451,0.377-8.1-1-4.949c0.615,4.569-2.246,5.696-2,9.898c-16.232,14.344-31.611,33.373-56,36.623 c6.568-13.333,24.848-29.416,8-43.551c-8.113,7.068-8.842,21.203,1,26.725c-1.178,3.062-2.512-0.154-4,1.979 c0.396,13.848-20.832,24.567-37,18.807c-4.143,8.506-18.537,11.917-25,14.847c-4.066-22.583,14.35-26.792,17-39.592 c0.084,0.083,0.156,0.178,0.234,0.268c-0.773-1.536,2.279-3.632-1.234-3.237c-0.959,9.61-7.971,13.228-15,16.827 c1.879-21.894,1.404-46.121,3-68.297c3.42-4.533,8.873-7.055,13-10.888c7.107,1.456,11.451,8.29,18,7.918 c7.654-0.435,10.135-9.271,17-11.878c-6.033-2.938-10.699-7.228-21-5.939c-4.459,2.185-5.732,7.525-9,10.888 c-2.66-0.336-3.504-2.47-6-2.969c-4.236,2.075-4.988,7.601-12,6.929c-4.695-18.324,9.592-26.029,15-37.613 c1.891-1.097,4.725-1.263,7-1.979c3.113-11.752,18.98-21.809,9-34.644c-4.355,0.968-5.727,4.89-6,9.898 c0.018,4.271,4.98,3.648,5,7.918c-4.912,5.697-4.561,16.603-16,15.837c-2.916,5.363-4.467,12.075-11,13.857 c-3.686-2.047-1.367-7.296,0-9.898c-1.754-0.905-3.475-1.84-3-4.949c4.086-10.616-7.246-22.027-1-31.674 c-4.469-2.175-2.979-10.25-7-12.868c-5.025,0.354-8.719-0.609-12-1.979c1.148,4.801,2.137,9.762,5,12.868 c3.945,2.223,7.742-1.562,11,0.99c-3.336,10.973,4.85,22.243,1,33.654c-15.799-8.777-21.484-27.565-31-42.562 c-5.074-1.493-9.193,1.437-15-1.98c1.35,6.582,4.156,11.723,9,14.848c4.195,0.523,5.586-1.729,9-1.98 c4.461,2.513,6.221,7.7,8,12.868c-0.695,1.953-5.58-0.244-6,1.979c7.963,2.681-8.959,3.561-10,6.929 c-0.049,4.9-1.182,8.73-2,12.868c9.264-0.614,17.32-5.846,13-16.827c7.152-3.296,12.127,4.83,12,8.908 c20.457,5.922,7.873,30.509,8,53.45c0.096,17.374,2.047,33.28-2,45.531c-7.379-6.554-14.77-13.096-20-21.775 c3.979-10.549-3.238-18.562-3-28.705c-3.732-3.235-10.197-3.764-15-5.939c-0.475,7.397,1.555,12.317,5,15.837 c3.033,1.321,8.896,0.427,10,0.99c2.396,4.503,3.143,14.548,0,18.807c5.018,9.818,19.088,17.742,21,31.674 c1.471,10.725-2.811,23.246-4,35.633c-3.279-1.703-4.379-5.563-8-6.928c-1.826,6.306-5.826-1.011-12,0.99 c-3.08,3.221-5.645,6.951-8,10.887c10.352,3.645,16.936-1.448,19-8.908c13.516,10.638,0.135,27.104-3,48.501 c-3.158,21.552-5.695,41.93-18,49.491c-1.152-1.17-1.133-3.5-1-5.939c-2.164-1.488-6.221-1.102-7-3.959 c-3.393-15.777-0.807-37.474-17-40.583c-8.579-12.544-18.322-39.301-11-56.419c5.409-12.646,23.359-19.686,29-29.694 c3.998-1.663,9.951,3.106,10-0.99c-0.738-2.214-8.535,2.632-9-1.98c4.504-9.069,5.281-21.827,16-24.745 c1.166-4.973-2.203-8.976,0-11.878c-5.582,0.414-8.186,3.776-11,6.929c0.08,3.88,1.762,6.174,3,8.908 c-1.486,1.169-4.469,0.856-4,3.959c-6.947,16.55-16.11,30.904-31,39.592c-0.636-5.933,4.61-11.24,2-15.837 c-2.794,5.813-2.784,14.401-7,18.807c0.235-17.202-15.45-41.023-12-56.419c3.089-13.785,9.19-29.927,16-39.593h6 c3.007-2.633,3.687-7.568,5-11.877c-5.094-0.423-7.798,1.52-11,2.969c-0.841,2.467-1.31,5.303-1,8.908 c-10.153,8.757-11.845,25.889-18,38.603c-2.452-9.451-9.071-14.777-10-25.735c-10.046-8.532-19.263-17.886-21-34.644 c12.376-2.597,19.479-10.414,18-26.725c-8.72,0.607-13.813,4.804-18,9.898c-0.851,6.451,1.286,9.945,3,13.857 c-2.091,0.57-2.854,2.454-6,1.979c-0.959,3.337,3.063,6.762,0,8.908c-11.937-1.859-18.117-7.82-14-20.786 c-2.935-4.024-7.402-6.53-12-8.908c-3.82,10.484,1.208,18.715,10,19.796c0.075,1.724-0.223,3.078-1,3.959 c12.353,4.604,25.02,14.164,27,25.735c-2.682-0.371-4.427-6.76-7-3.959c1.386,0.089,1.051,2.524-1,1.979 c-6.763-1.888-12.635,2.503-18,4.949c-1.848,2.79,0.023,9.261-2,11.877c8.229-0.458,14.533-5.764,11-14.847 c36.339-6.588,34.2,38.722,41,61.368c-17.315-2-20.49-23.267-37-22.765c8.361,1.301,16.417,8.154,17,13.857 c-15.715-0.612-25.015-7.574-29-19.796c-8.654,1.428-11.216-6.296-18-5.939c-7.167,0.376-10.41,8.346-17,11.878 c6.411,2.581,12.44,7.94,20,5.938c5.987-1.585,5.398-9.144,11-10.888c4.817,2.161,6.768,7.158,8,12.868 c6.963,6.406,19.225,4.96,28,8.908c1.253,0.564,2.721,4.107,4,4.949c7.083,4.659,13.695,5.486,16,11.877 c1.075,2.981-0.461,6.836,0,9.898c0.438,2.915,2.577,5.875,3,8.908c2.804,20.14-1.501,46.906,6,60.379 c-12.6-7.182-25.167-9.185-43-11.878c-5.189-10.7-9.534-22.236-11-36.623c7.299-2.438,7.2-13.863,2-18.807 c-2.234,3.728-6.736,5.211-7,10.888c1.182,2.79,2.927,5.021,5,6.929c-5.53,2.302,1.5,11.564-2,14.847 c-6.742-3.225-9.33-10.561-14-15.837c-7.324-0.98-10.405,2.239-17,1.98c1.752,10.439,15.368,16.906,23,7.918 c4.639,8.237,20.666,14.778,13,28.705c-11.118,1.864-20.627,5.318-35,3.96c-1.663-9.272,5.71-15.456-3-20.786 c-7.004,5.626,1.464,11.638,0,16.826c-13.774-13.611-38.04-12.997-52-24.746c7.353-4.808,16.703,0.396,23-5.938 c6.049-6.084,2.045-17.227,9-23.756c-18.591-0.476-33.724,6.261-29,25.735c-1.731,3.358-8.253-0.226-8,2.969 c0.76,4.879,11.456,5.129,10,8.91c-8.915-1.313-15.046,0.896-22-1.979c-6.904-2.857-7.934-9.692-14-9.899 c-5.974-0.201-7.188,5.686-15,5.939c3.915,11.024,20.464,12.23,27,2.969c4.861,6.41,7.894,3.316,15,5.939 c-5.35,6.652-18.92,10.948-20,20.786c-0.709,6.459,5.475,10.772,4,17.817c12.381-3.349,18.279-20.373,7-28.705 c11.555-18.954,36.15-3.568,54-0.989c3.727,11.817,15.83,15.346,32,14.847c-7.936,2.374-15.44,5.174-23,7.919h7 c-1.136,4.691,3.79,11.231,6,15.837c4.973-0.304,9.175,0.156,13,0.989c-0.217-12.034-11.108-12.177-18-12.867 c8.907-13.619,32.465-12.736,55-12.867c-0.154,2.463,1.571,3.063,2,4.948c2.837,0.171,1.952-3.346,6-1.979 c12.342,4.543,29.806,13.68,34,27.715c1.812,6.063,2.667,18.353-3,23.756c6.531,24.33,21.453,49.419,15,80.175 c-3.097-0.371-3.884-3.369-6,0c7.519,5.427,5.771,20.024,6,32.664",
"duration": 10000
}
],
"dimensions": {
"width": 432,
"height": 394,
}
}
};
/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$('#tree').lazylinepainter(
{
"svgData": pathObj,
"strokeWidth": 1.5,
"strokeColor": "#660"
}).lazylinepainter('paint');
});
</script>
<script type="text/javascript">
var pathObj = {
"buildings": {
"strokepath": [
{
"path": "M 75.51 390.671 L 76.181 131.611",
"duration": 100
},
{
"path": "M 76.181 131.611 L 153.362 131.611",
"duration": 100
},
{
"path": "M 153.362 131.611 L 153.362 390.671",
"duration": 100
},
{
"path": "M 153.362 131.611 L 170.141 115.503",
"duration": 100
},
{
"path": "M 170.141 115.503 L 170.141 390.671",
"duration": 100
},
{
"path": "M 170.141 115.503 L 117.792 115.503",
"duration": 100
/*The paths continue for a while
],
"dimensions": {
"width": 432,
"height": 394
}
}
};
/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$('#buildings').lazylinepainter(
{
"svgData": pathObj,
"strokeWidth": 2,
"strokeColor": "#e09b99"
}).lazylinepainter('paint');
});
</script>
推荐答案
另一种方法(更正确)是使用回调：
var pathObj1 = {
"tree": {
"strokepath": [
{
"path": "M248.5,393.946c1.422-12.394-4.539-24.728-6-36.623 c-0.439-3.58,1.326-8.318,1-11.878c-0.828-8.995-4.18-17.076-4-24.745c0.639-27.324,19.256-46.841,40-59.389 c7.152-11.066,14.367-22.072,27-27.715c18.926,2.716,32.074,16.421,43,23.755c-0.094-8.707,21.307-19.636,24-3.959 c3.236-0.815,8.648,1.231,9,0c-2.066-2.903-2.594-7.331-6-8.908c-3.156-0.483-3.531,1.784-7,0.989 c-0.088-4.845-4.287-2.671-2-7.918c10.719,0.618,19.354-5.569,28-7.919c7-1.9,11.986,0.271,16-4.949 c4.521-5.881,0.291-14.44,7-23.755c-17.879-0.736-34.1,9.159-26,27.715c-19.213,3.42-32.766,12.44-47,20.786 c-7.813-3.116-11.973-12.324-20-15.837c-4.264-1.864-10.547,0.815-13-4.949c9.43-5.843,20.783-9.782,35-10.889 c13.203-12.952,24.084-31.382,49-29.695c3.637-3.796,9.074-15.902,8-17.816c-13.275-0.931-22.365,2.279-20,16.827 c-6.123-1.355-11.813,6.8-17,5.938c-0.76-8.099,7.857-11.301,8-17.816c0.139-6.308-6.162-8.93-8-15.837 c-8.354,7.049-10.344,21.651,1,26.725c-2.836,1.813-1.822,7.435-3,10.888c-8.65,0.812-12.189,12.243-19,15.838 c-10.711,5.656-23.76,3.361-34,7.918c-23.91,10.641-33.668,33.341-55,42.563c1.076-4.874,5.631-6.305,7-10.889 c-2.555-1.066-3.5,4.262-5,0.99c0.238-8.012,0.248-16.251,4-20.786c-5.148-25.86,8.119-33.892,26-44.542 c11.633-6.927,23.236-9.103,37-8.908c11.666-9.237,30.057-11.82,41-21.776c2.725-0.91-1.396-3.094,0-5.938 c15.221-10.339,24.258-26.799,41-35.633c3.457,3.507,3.59,10.304,7,13.857c4.449,1.204,10.246,1.076,16,0.99 c-1.139-6.132-4.236-10.325-8-13.857c-5.375-0.701-8.543,0.782-12,1.979c-2.373-1.487-1-4.168-2-4.949 c-2.816,1.833-6.236,3.065-10,3.959c-1.307-13.5,7.041-17.446,14-22.766c-1.689-3.514,2.646-11.544-4-15.837 c-1.504,2.801-4.045,4.576-4,8.909c-0.004,3.633,3.5,3.793,5,5.938c-12.82,5.789-12.117,30.235-24,33.654 c-0.012-1.451,0.377-8.1-1-4.949c0.615,4.569-2.246,5.696-2,9.898c-16.232,14.344-31.611,33.373-56,36.623 c6.568-13.333,24.848-29.416,8-43.551c-8.113,7.068-8.842,21.203,1,26.725c-1.178,3.062-2.512-0.154-4,1.979 c0.396,13.848-20.832,24.567-37,18.807c-4.143,8.506-18.537,11.917-25,14.847c-4.066-22.583,14.35-26.792,17-39.592 c0.084,0.083,0.156,0.178,0.234,0.268c-0.773-1.536,2.279-3.632-1.234-3.237c-0.959,9.61-7.971,13.228-15,16.827 c1.879-21.894,1.404-46.121,3-68.297c3.42-4.533,8.873-7.055,13-10.888c7.107,1.456,11.451,8.29,18,7.918 c7.654-0.435,10.135-9.271,17-11.878c-6.033-2.938-10.699-7.228-21-5.939c-4.459,2.185-5.732,7.525-9,10.888 c-2.66-0.336-3.504-2.47-6-2.969c-4.236,2.075-4.988,7.601-12,6.929c-4.695-18.324,9.592-26.029,15-37.613 c1.891-1.097,4.725-1.263,7-1.979c3.113-11.752,18.98-21.809,9-34.644c-4.355,0.968-5.727,4.89-6,9.898 c0.018,4.271,4.98,3.648,5,7.918c-4.912,5.697-4.561,16.603-16,15.837c-2.916,5.363-4.467,12.075-11,13.857 c-3.686-2.047-1.367-7.296,0-9.898c-1.754-0.905-3.475-1.84-3-4.949c4.086-10.616-7.246-22.027-1-31.674 c-4.469-2.175-2.979-10.25-7-12.868c-5.025,0.354-8.719-0.609-12-1.979c1.148,4.801,2.137,9.762,5,12.868 c3.945,2.223,7.742-1.562,11,0.99c-3.336,10.973,4.85,22.243,1,33.654c-15.799-8.777-21.484-27.565-31-42.562 c-5.074-1.493-9.193,1.437-15-1.98c1.35,6.582,4.156,11.723,9,14.848c4.195,0.523,5.586-1.729,9-1.98 c4.461,2.513,6.221,7.7,8,12.868c-0.695,1.953-5.58-0.244-6,1.979c7.963,2.681-8.959,3.561-10,6.929 c-0.049,4.9-1.182,8.73-2,12.868c9.264-0.614,17.32-5.846,13-16.827c7.152-3.296,12.127,4.83,12,8.908 c20.457,5.922,7.873,30.509,8,53.45c0.096,17.374,2.047,33.28-2,45.531c-7.379-6.554-14.77-13.096-20-21.775 c3.979-10.549-3.238-18.562-3-28.705c-3.732-3.235-10.197-3.764-15-5.939c-0.475,7.397,1.555,12.317,5,15.837 c3.033,1.321,8.896,0.427,10,0.99c2.396,4.503,3.143,14.548,0,18.807c5.018,9.818,19.088,17.742,21,31.674 c1.471,10.725-2.811,23.246-4,35.633c-3.279-1.703-4.379-5.563-8-6.928c-1.826,6.306-5.826-1.011-12,0.99 c-3.08,3.221-5.645,6.951-8,10.887c10.352,3.645,16.936-1.448,19-8.908c13.516,10.638,0.135,27.104-3,48.501 c-3.158,21.552-5.695,41.93-18,49.491c-1.152-1.17-1.133-3.5-1-5.939c-2.164-1.488-6.221-1.102-7-3.959 c-3.393-15.777-0.807-37.474-17-40.583c-8.579-12.544-18.322-39.301-11-56.419c5.409-12.646,23.359-19.686,29-29.694 c3.998-1.663,9.951,3.106,10-0.99c-0.738-2.214-8.535,2.632-9-1.98c4.504-9.069,5.281-21.827,16-24.745 c1.166-4.973-2.203-8.976,0-11.878c-5.582,0.414-8.186,3.776-11,6.929c0.08,3.88,1.762,6.174,3,8.908 c-1.486,1.169-4.469,0.856-4,3.959c-6.947,16.55-16.11,30.904-31,39.592c-0.636-5.933,4.61-11.24,2-15.837 c-2.794,5.813-2.784,14.401-7,18.807c0.235-17.202-15.45-41.023-12-56.419c3.089-13.785,9.19-29.927,16-39.593h6 c3.007-2.633,3.687-7.568,5-11.877c-5.094-0.423-7.798,1.52-11,2.969c-0.841,2.467-1.31,5.303-1,8.908 c-10.153,8.757-11.845,25.889-18,38.603c-2.452-9.451-9.071-14.777-10-25.735c-10.046-8.532-19.263-17.886-21-34.644 c12.376-2.597,19.479-10.414,18-26.725c-8.72,0.607-13.813,4.804-18,9.898c-0.851,6.451,1.286,9.945,3,13.857 c-2.091,0.57-2.854,2.454-6,1.979c-0.959,3.337,3.063,6.762,0,8.908c-11.937-1.859-18.117-7.82-14-20.786 c-2.935-4.024-7.402-6.53-12-8.908c-3.82,10.484,1.208,18.715,10,19.796c0.075,1.724-0.223,3.078-1,3.959 c12.353,4.604,25.02,14.164,27,25.735c-2.682-0.371-4.427-6.76-7-3.959c1.386,0.089,1.051,2.524-1,1.979 c-6.763-1.888-12.635,2.503-18,4.949c-1.848,2.79,0.023,9.261-2,11.877c8.229-0.458,14.533-5.764,11-14.847 c36.339-6.588,34.2,38.722,41,61.368c-17.315-2-20.49-23.267-37-22.765c8.361,1.301,16.417,8.154,17,13.857 c-15.715-0.612-25.015-7.574-29-19.796c-8.654,1.428-11.216-6.296-18-5.939c-7.167,0.376-10.41,8.346-17,11.878 c6.411,2.581,12.44,7.94,20,5.938c5.987-1.585,5.398-9.144,11-10.888c4.817,2.161,6.768,7.158,8,12.868 c6.963,6.406,19.225,4.96,28,8.908c1.253,0.564,2.721,4.107,4,4.949c7.083,4.659,13.695,5.486,16,11.877 c1.075,2.981-0.461,6.836,0,9.898c0.438,2.915,2.577,5.875,3,8.908c2.804,20.14-1.501,46.906,6,60.379 c-12.6-7.182-25.167-9.185-43-11.878c-5.189-10.7-9.534-22.236-11-36.623c7.299-2.438,7.2-13.863,2-18.807 c-2.234,3.728-6.736,5.211-7,10.888c1.182,2.79,2.927,5.021,5,6.929c-5.53,2.302,1.5,11.564-2,14.847 c-6.742-3.225-9.33-10.561-14-15.837c-7.324-0.98-10.405,2.239-17,1.98c1.752,10.439,15.368,16.906,23,7.918 c4.639,8.237,20.666,14.778,13,28.705c-11.118,1.864-20.627,5.318-35,3.96c-1.663-9.272,5.71-15.456-3-20.786 c-7.004,5.626,1.464,11.638,0,16.826c-13.774-13.611-38.04-12.997-52-24.746c7.353-4.808,16.703,0.396,23-5.938 c6.049-6.084,2.045-17.227,9-23.756c-18.591-0.476-33.724,6.261-29,25.735c-1.731,3.358-8.253-0.226-8,2.969 c0.76,4.879,11.456,5.129,10,8.91c-8.915-1.313-15.046,0.896-22-1.979c-6.904-2.857-7.934-9.692-14-9.899 c-5.974-0.201-7.188,5.686-15,5.939c3.915,11.024,20.464,12.23,27,2.969c4.861,6.41,7.894,3.316,15,5.939 c-5.35,6.652-18.92,10.948-20,20.786c-0.709,6.459,5.475,10.772,4,17.817c12.381-3.349,18.279-20.373,7-28.705 c11.555-18.954,36.15-3.568,54-0.989c3.727,11.817,15.83,15.346,32,14.847c-7.936,2.374-15.44,5.174-23,7.919h7 c-1.136,4.691,3.79,11.231,6,15.837c4.973-0.304,9.175,0.156,13,0.989c-0.217-12.034-11.108-12.177-18-12.867 c8.907-13.619,32.465-12.736,55-12.867c-0.154,2.463,1.571,3.063,2,4.948c2.837,0.171,1.952-3.346,6-1.979 c12.342,4.543,29.806,13.68,34,27.715c1.812,6.063,2.667,18.353-3,23.756c6.531,24.33,21.453,49.419,15,80.175 c-3.097-0.371-3.884-3.369-6,0c7.519,5.427,5.771,20.024,6,32.664",
"duration": 10000
}
],
"dimensions": {
"width": 432,
"height": 394
}
}
};
var pathObj2 = {
"buildings": {
"strokepath": [
{
"path": "M 75.51 390.671 L 76.181 131.611",
"duration": 100
},
{
"path": "M 76.181 131.611 L 153.362 131.611",
"duration": 100
},
{
"path": "M 153.362 131.611 L 153.362 390.671",
"duration": 100
},
{
"path": "M 153.362 131.611 L 170.141 115.503",
"duration": 100
},
{
"path": "M 170.141 115.503 L 170.141 390.671",
"duration": 100
},
{
"path": "M 170.141 115.503 L 117.792 115.503",
"duration": 100
}
],
"dimensions": {
"width": 432,
"height": 394
}
}
};
var drawSecond = function() {
$('#buildings').lazylinepainter(
{
"svgData": pathObj2,
"strokeWidth": 2,
"strokeColor": "#e09b99"
}).lazylinepainter('paint');
}
$(document).ready(function(){
$('#tree').lazylinepainter(
{
"svgData": pathObj1,
"strokeWidth": 1.5,
"strokeColor": "#660",
"onComplete": drawSecond
}).lazylinepainter('paint');
});
在这种情况下，您不必加入路径对象，也不必知道以前的路径设置了多长时间的动画。
这篇关于如何一个接一个地为两个jQuery懒惰线条画家动画制作动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
