svg+anime实现树木生长动画效果代码

代码语言:html

所属分类:动画

代码描述:svg+anime实现树木生长动画效果代码

代码标签: svg anime 树木 生长 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    body {
  margin: 0;
}

.tree {
  fill: #b68000;
  height: 100vh;
  left: calc(50% - 50vh);
  position: relative;
  width: 100vh;
}

.leaf {
  fill: #009100;
  opacity: 0;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<svg class="tree" width="400" height="400" viewBox="0 0 100 100">
    <!-- trunk -->
    <path class="trunk"
      d="m 32.001,71.999 c 2.895142,0 14.968903,0.001 16.003,0.001 0,-0.320408 0,-0.333333 0,-0.5 0,-0.166667 0,-0.240481 0,-0.5 0,-0.259519 -0.0566,-0.85081 -0.001,-1.057115 0.0556,-0.206304 -0.0013,-0.229621 0.14697,-0.749144 0.233088,-0.265059 0.243678,-0.340466 0.656752,-0.456471 0.346109,-0.05127 0.324002,-0.138862 0.664082,-0.149533 0.330036,0.005 0.15658,0.02801 0.535516,0.01471 0.381168,0.01014 0.199735,-0.0013 0.584014,0.116507 0.223564,0.08881 0.144805,0.148719 0.220608,0.456866 0.05348,0.323772 0.189003,0.655154 0.192058,0.95262 0.0031,0.297465 0,0.642969 0.001,0.871563 0,0.228594 0,0.333333 0,0.5 0,0.166667 0,0.201689 0,0.5 1.243036,0 13.36167,-0.001 15.996994,-0.001 0,1.817984 -0.001,1.360662 -0.001,3.002 -4.616138,0 -29.632675,0 -35,0 0,-1.390984 0,-1.37666 0.001,-3.001003 z"
    ></path>
    <!-- leafs -->
    <path class="leaf leaf1"
      d="m 40.662502,51.682985 c 0,0.63473 -0.50588,1.035091 -0.980139,1.035091 -0.474258,0 -1.011071,-0.340954 -1.006872,-0.993399 0.0042,-0.652445 0.526473,-1.022497 1.0389,-1.009678 0.512426,0.01282 0.909335,0.467778 0.916274,0.761224 -0.09254,-0.02575 -0.09371,-0.04229 -0.154305,0.02362 -0.08416,0.01768 -0.06451,0.01049 -0.150562,0.08894 0.0934,0.08179 0.06081,0.08026 0.172104,0.09473 0.07948,0.01272 0.08446,0.0058 0.1646,0 z"
    ></path>
    <path class="leaf leaf2"
      d="m 38.541595,46.605911 c -0.339291,0.536437 -0.980841,0.604383 -1.381657,0.35087 -0.400814,-0.253511 -0.672242,-0.828616 -0.319933,-1.377779 0.35231,-0.549163 0.991514,-0.582731 1.417734,-0.297982 0.426219,0.284749 0.518468,0.881418 0.367473,1.13313 -0.06445,-0.07123 -0.05659,-0.08583 -0.143035,-0.06252 -0.08058,-0.03005 -0.06013,-0.02562 -0.174789,-0.0053 0.03522,0.119051 0.0085,0.100337 0.09481,0.172058 0.06037,0.05324 0.06828,0.05005 0.139392,0.08754 z"
    ></path>
    <path class="leaf leaf3"
      d="m 45.960351,40.444238 c -0.504476,0.385211 -1.12969,0.226117 -1.417512,-0.150819 -0.28782,-0.376934 -0.342619,-1.010508 0.178484,-1.403131 0.521105,-0.392623 1.132179,-0.202105 1.432975,0.212945 0.300796,0.415051 0.180079,1.006618 -0.04894,1.190221 -0.0357,-0.08918 -0.02326,-0.100141 -0.112419,-0.108305 -0.06513,-0.05616 -0.04749,-0.04491 -0.162068,-0.06567 -0.0083,0.123873 -0.02688,0.09704 0.02915,0.194276 0.03812,0.07089 0.04665,0.07065 0.100313,0.130502 z"
    ></path>
    <path class="leaf leaf4"
      d="m 51.051398,38.01044 c 0.633571,-0.03835 1.002636,-0.567494 0.973981,-1.040888 -0.02866,-0.47339 -0.401421,-0.988623 -1.052418,-0.945011 -0.651001,0.04361 -0.988821,0.587291 -0.945065,1.098006 0.04376,0.510715 0.521866,0.879411 0.815197,0.868606 -0.03129,-0.09083 -0.04787,-0.09098 0.01425,-0.155452 0.01256,-0.08508 0.0066,-0.06502 0.0797,-0.15565 0.08727,0.0883 0.08378,0.05586 0.104961,0.166061 0.01751,0.07856 0.01089,0.08396 0.0094,0.164332 z"
    ></path>
    <path class="leaf leaf5"
      d="m 55.614401,40.639679 c 0.470683,0.425841 1.106964,0.31931 1.425145,-0.03238 0.318175,-0.351688 0.425492,-0.978504 -0.06114,-1.413114 -0.486636,-0.434614 -1.111442,-0.295588 -1.445723,0.093 -0.334278,0.388591 -0.263192,0.988149 -0.05024,1.190167 0.043,-0.08591 0.03151,-0.09786 0.121037,-0.09858 0.06958,-0.05055 0.05107,-0.04078 0.166971,-0.05196 -0.002,0.124132 0.01871,0.09894 -0.04521,0.191178 -0.04388,0.06748 -0.05237,0.06652 -0.110835,0.121692 z"
    ></path>
    <path class="leaf leaf6"
      d="m 61.422851,46.924364 c 0.280942,0.56917 0.911775,0.704268 1.337051,0.49435 0.425269,-0.209919 0.755725,-0.753255 0.46318,-1.336448 -0.292547,-0.583198 -0.924669,-0.683859 -1.378493,-0.445557 -0.453822,0.238306 -0.608364,0.82195 -0.484699,1.088158 0.0716,-0.06406 0.06531,-0.0794 0.148821,-0.04712 0.0833,-0.0214 0.06249,-0.01912 0.174375,0.01313 -0.04754,0.114685 -0.01901,0.09888 -0.112392,0.161125 -0.06563,0.0466 -0.07317,0.04258 -0.14784,0.07237 z"
    ></path>
    <path class="leaf leaf7"
      d="m 59.141637,53.08672 c 0.02452,0.634257 0.545488,1.014775 1.019397,0.996452 0.473903,-0.01833 0.997143,-0.379762 0.967744,-1.031553 -0.0294,-0.651797 -0.565583,-1.001395 -1.07713,-0.968791 -0.511548,0.03261 -0.890585,0.502561 -0.88618,0.796057 0.0915,-0.02931 0.092,-0.04588 0.155103,0.01764 0.08479,0.01442 0.06486,0.008 0.153877,0.08307 -0.09016,0.08534 -0.05767,0.08254 -0.168312,0.101314 -0.07893,0.0158 -0.08417,0.0091 -0.1645,0.0058 z"
    ></path>
    <path class="leaf leaf8"
      d="m 35.974679,35.976181 c -0.603354,0.197095 -1.141009,-0.159458 -1.288275,-0.610274 -0.147265,-0.450814 0.01014,-1.066964 0.631641,-1.265568 0.621497,-0.198604 1.135432,0.182945 1.282364,0.674021 0.146931,0.491077 -0.16229,1.009638 -0.439075,1.107355 -0.0043,-0.09597 0.0111,-0.102206 -0.07037,-0.139343 -0.04294,-0.07452 -0.03,-0.05807 -0.131306,-0.11549 -0.04874,0.114183 -0.0574,0.08273 -0.03661,0.193009 0.01259,0.0795 0.02071,0.08209 0.05161,0.1563 z"
    ></path>
    <path class="leaf leaf9"
      d="m 47.099679,29.819931 c -0.603354,0.197095 -1.141009,-0.159458 -1.288275,-0.610274 -0.147265,-0.450814 0.01014,-1.066964 0.631641,-1.265568 0.621497,-0.198604 1.135432,0.182945 1.282364,0.674021 0.146931,0.491077 -0.16229,1.009638 -0.439075,1.107355 -0.0043,-0.09597 0.0111,-0.102206 -0.07037,-0.139343 -0.04294,-0.07452 -0.03,-0.05807 -0.131306,-0.11549 -0.04874,0.114183 -0.0574,0.08273 -0.03661,0.193009 0.01259,0.0795 0.02071,0.08209 0.05161,0.1563 z"
    ></path>
    <path class="leaf leaf10"
      d="m 51.404951,25.72446 c 0.633571,-0.03835 1.002636,-0.567494 0.973981,-1.040888 -0.02866,-0.47339 -0.401421,-0.988623 -1.052418,-0.945011 -0.651001,0.04361 -0.988821,0.587291 -0.945065,1.098006 0.04376,0.510715 0.521866,0.879411 0.815197,0.868606 -0.03129,-0.09083 -0.04787,-0.09098 0.01425,-0.155452 0.01256,-0.08508 0.0066,-0.06502 0.0797,-0.15565 0.08727,0.0883 0.08378,0.05586 0.104961,0.166061 0.01751,0.07856 0.01089,0.08396 0.0094,0.164332 z"
    ></path>
    <path class="leaf leaf11"
      d="m 57.725957,30.186009 c 0.618086,0.144404 1.123038,-0.257125 1.230934,-0.718949 0.10789,-0.461821 -0.101991,-1.062126 -0.73828,-1.20647 -0.636293,-0.144348 -1.115461,0.280045 -1.219557,0.781949 -0.104093,0.501906 0.248634,0.991912 0.532809,1.065429 -0.004,-0.09598 -0.01986,-0.100869 0.0581,-0.144888 0.03636,-0.07794 0.02492,-0.06042 0.120877,-0.126364 0.05838,0.109566 0.06431,0.07748 0.0531,0.189139 -0.0057,0.08029 -0.01357,0.08357 -0.03798,0.160159 z"
    ></path>
    <path class="leaf leaf12"
      d="m 65.351856,37.108326 c 0.598794,0.210544 1.144291,-0.13389 1.301606,-0.581299 0.157309,-0.447407 0.01373,-1.066924 -0.603168,-1.279381 -0.616899,-0.212463 -1.139242,0.157496 -1.297124,0.64516 -0.157879,0.487668 0.139661,1.013017 0.414194,1.116901 0.0064,-0.09585 -0.0088,-0.102427 0.07346,-0.137737 0.04459,-0.07354 0.03132,-0.05736 0.133861,-0.112518 0.04616,0.115248 0.05553,0.08399 0.03229,0.19378 -0.01437,0.0792 -0.02255,0.08161 -0.05512,0.155099 z"
    ></path>
    <path class="leaf leaf13"
      d="m 28.755929,33.663681 c -0.603354,0.197095 -1.141009,-0.159458 -1.288275,-0.610274 -0.147265,-0.450814 0.01014,-1.066964 0.631641,-1.265568 0.621497,-0.198604 1.135432,0.182945 1.282364,0.674021 0.146931,0.491077 -0.16229,1.009638 -0.439075,1.107355 -0.0043,-0.09597 0.0111,-0.102206 -0.07037,-0.139343 -0.04294,-0.07452 -0.03,-0.05807 -0.131306,-0.11549 -0.04874,0.114183 -0.0574,0.08273 -0.03661,0.193009 0.01259,0.0795 0.02071,0.08209 0.05161,0.1563 z"
    ></path>
    <path class="leaf leaf14"
      d="m 32.349679,25.163681 c -0.603354,0.197095 -1.141009,-0.159458 -1.288275,-0.610274 -0.147265,-0.450814 0.01014,-1.066964 0.631641,-1.265568 0.621497,-0.198604 1.135432,0.182945 1.282364,0.674021 0.146931,0.491077 -0.16229,1.009638 -0.439075,1.107355 -0.0043,-0.09597 0.0111,-0.102206 -0.07037,-0.139343 -0.04294,-0.07452 -0.03,-0.05807 -0.131306,-0.11549 -0.04874,0.114183 -0.0574,0.08273 -0.03661,0.193009 0.01259,0.0795 0.02071,0.08209 0.05161,0.1563 z"
    ></path>
    <path class="leaf leaf15"
      d="m 40.332715,26.778354 c -0.560605,0.297667 -1.15145,0.03862 -1.373862,-0.380253 -0.22241,-0.418872 -0.173025,-1.05289 0.405199,-1.355155 0.578219,-0.302266 1.149984,-0.01453 1.378972,0.444069 0.228987,0.458596 0.0133,1.022511 -0.242625,1.166257 -0.0207,-0.09381 -0.0066,-0.102596 -0.09323,-0.125208 -0.05509,-0.06605 -0.03952,-0.05206 -0.14917,-0.09126 -0.02843,0.120851 -0.04236,0.09135 -0.003,0.196428 0.02604,0.07616 0.03448,0.07732 0.07766,0.145131 z"
    ></path>
    <path class="leaf leaf16"
      d="m 46.049484,21.103509 c -0.524069,0.358102 -1.140033,0.166295 -1.407597,-0.225299 -0.267566,-0.391572 -0.288919,-1.027152 0.252143,-1.391782 0.541061,-0.364628 1.141251,-0.14219 1.419768,0.288128 0.278515,0.43032 0.126808,1.014705 -0.111559,1.185993 -0.031,-0.09093 -0.01796,-0.101223 -0.106563,-0.114077 -0.06209,-0.05952 -0.04506,-0.04734 -0.158385,-0.07412 -0.01487,0.123254 -0.03195,0.09549 0.01884,0.195546 0.03434,0.07279 0.04286,0.07301 0.0933,0.135605 z"
    ></path>
    <path class="leaf leaf17"
      d="m 50.963009,16.09013 c 0.633571,-0.03835 1.002636,-0.567494 0.973981,-1.040888 -0.02866,-0.47339 -0.401421,-0.988623 -1.052418,-0.945011 -0.651001,0.04361 -0.988821,0.587291 -0.945065,1.098006 0.04376,0.510715 0.521866,0.879411 0.815197,0.868606 -0.03129,-0.09083 -0.04787,-0.09098 0.01425,-0.155452 0.01256,-0.08508 0.0066,-0.06502 0.0797,-0.15565 0.08727,0.0883 0.08378,0.05586 0.104961,0.166061 0.01751,0.07856 0.01089,0.08396 0.0094,0.164332 z"
    ></path>
    <path class="leaf leaf18"
      d="m 57.22308,21.141142 c 0.552591,0.61413 2.051577,0.184456 2.980128,-1.063624 0.928544,-1.248085 1.084597,-3.168836 0.272244,-6.130552 -2.668027,1.896708 -4.222268,3.833218 -4.468211,5.20132 -0.245934,1.368102 0.215264,1.648784 0.875397,1.805045 0.70882,-0.557606 1.006032,-0.837963 1.306836,-1.286491 0.300798,-0.448535 0.485508,-0.623701 0.676115,-1.4362 0.109668,0.827814 -0.153215,1.07896 -0.354217,1.616444 -0.219326,0.422392 -0.420106,0.633464 -1.288296,1.294054 z"
    ></path>
    <path class="leaf leaf19"
      d="m 63.487516,26.884276 c 0.577853,0.262618 1.151644,-0.03228 1.347868,-0.464044 0.196217,-0.431762 0.107925,-1.06154 -0.487791,-1.327663 -0.595719,-0.266128 -1.148701,0.05624 -1.349045,0.528053 -0.200342,0.471813 0.04963,1.021393 0.313909,1.149123 0.01487,-0.09491 0,-0.102805 0.08534,-0.130709 0.05092,-0.06931 0.03627,-0.05437 0.143278,-0.100253 0.0358,0.118875 0.0479,0.08857 0.01504,0.195874 -0.02131,0.07762 -0.02967,0.0793 -0.0686,0.149624 z"
    ></path>
    <path class="leaf leaf20"
      d="m 71.207268,26.234886 c 0.61677,0.149924 1.125293,-0.247073 1.237314,-0.707913 0.112016,-0.460838 -0.09249,-1.062997 -0.727462,-1.213024 -0.634977,-0.150033 -1.11792,0.270059 -1.226501,0.771012 -0.108577,0.500955 0.239754,0.994095 0.523261,1.07015 -0.0032,-0.09601 -0.01895,-0.101043 0.05939,-0.144362 0.03705,-0.07761 0.02546,-0.06019 0.122002,-0.125278 0.0574,0.110084 0.06361,0.07805 0.05141,0.189606 -0.0064,0.08024 -0.01432,0.08345 -0.03942,0.159814 z"
    ></path>
    <path class="leaf leaf21"
      d="m 72.720911,35.756136 c 0.633706,0.03604 1.062147,-0.446288 1.089076,-0.919783 0.02692,-0.473491 -0.282995,-1.0288 -0.934622,-1.061654 -0.651633,-0.03286 -1.050743,0.467564 -1.067042,0.97989 -0.0163,0.512327 0.415388,0.93443 0.70797,0.958019 -0.02049,-0.09385 -0.03689,-0.09596 0.03233,-0.152716 0.02242,-0.08303 0.01417,-0.0638 0.09736,-0.145256 0.07634,0.0979 0.07666,0.06527 0.08481,0.1772 0.0082,0.08008 0,0.08466 -0.0099,0.164306 z"
    ></path>
    <path class="leaf leaf22"
      d="m 36.871671,17.658754 c -0.559069,-0.300541 -0.672176,-0.935686 -0.447617,-1.353413 0.224558,-0.417725 0.779044,-0.729113 1.35173,-0.416483 0.572684,0.312627 0.651332,0.947862 0.39741,1.393136 -0.253922,0.445274 -0.842581,0.57945 -1.104334,0.446618 0.06647,-0.06935 0.08162,-0.06251 0.05226,-0.147097 0.02428,-0.08251 0.02131,-0.06179 -0.0071,-0.174727 -0.116263,0.04355 -0.09948,0.01557 -0.164928,0.10673 -0.04884,0.06398 -0.0451,0.07165 -0.07747,0.145228 z"
    ></path>
    <path class="leaf leaf23"
      d="m 66.934905,17.587751 c 0.496949,-0.394872 0.495693,-1.040008 0.200678,-1.411316 -0.295043,-0.371307 -0.895941,-0.579488 -1.404145,-0.170309 -0.50821,0.40918 -0.473021,1.048298 -0.144204,1.441517 0.328824,0.393217 0.931944,0.420937 1.166009,0.243814 -0.07775,-0.05641 -0.09139,-0.04707 -0.07751,-0.1355 -0.03853,-0.07689 -0.03188,-0.05704 -0.02401,-0.173213 0.122145,0.02222 0.100663,-0.0023 0.181239,0.0758 0.05941,0.05431 0.05709,0.06253 0.101965,0.129219 z"
    ></path>
  </svg>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime-min.js"></script>><script  >
      var timeline = anime.timeline({
  autoplay: true,
  direction: "alternate",
  loop: true
});

timeline
  .add({
    targets: ".trunk",
    d: {
      value: [
        "m 32.001,71.999 c 2.895142,0 14.968903,0.001 16.003,0.001 0,-0.320408 0,-0.333333 0,-0.5 0,-0.166667 0,-0.240481 0,-0.5 0,-0.259519 -0.0566,-0.85081 -0.001,-1.057115 0.0556,-0.206304 -0.0013,-0.229621 0.14697,-0.749144 0.233088,-0.265059 0.243678,-0.340466 0.656752,-0.456471 0.346109,-0.05127 0.324002,-0.138862 0.664082,-0.149533 0.330036,0.005 0.15658,0.02801 0.535516,0.01471 0.381168,0.01014 0.199735,-0.0013 0.584014,0.116507 0.223564,0.08881 0.144805,0.148719 0.220608,0.456866 0.05348,0.323772 0.189003,0.655154 0.192058,0.95262 0.0031,0.297465 0,0.642969 0.001,0.871563 0,0.228594 0,0.333333 0,0.5 0,0.166667 0,0.201689 0,0.5 1.243036,0 13.36167,-0.001 15.996994,-0.001 0,1.817984 -0.001,1.360662 -0.001,3.002 -4.616138,0 -29.632675,0 -35,0 0,-1.390984 0,-1.37666 0.001,-3.001003 z",
        "m 32.001,71.999 c 2.895142,0 11.930807,0.001 13.999,0.001 0.801198,-1.396048 0.88577,-11.735417 0.467017,-15.436559 -1.266967,-1.468999 -2.074795,-4.370919 -2.77792,-6.060915 -0.703125,-1.689996 -3.032672,-3.034252 -1.515229,-4.040611 1.517443,-1.006359 3.060672,4.621014 4.708939,4.054616 2.764338,-0.968184 -0.449184,-10.455189 1.604515,-10.368069 1.830484,0.04248 0.776207,6.765692 1.975662,6.801896 0.931598,0.03621 1.010285,-7.035249 2.436095,-7.02511 2.006168,0.01014 -1.223059,7.362642 -0.237218,7.917967 0.762626,0.510683 3.77853,-5.464629 4.916834,-4.664295 0.959732,0.800334 -3.980565,5.818773 -3.341643,6.624638 0.683564,0.71658 3.598301,-3.081801 4.351795,-1.826414 0.53028,0.808959 -3.825131,3.433647 -4.664295,5.31862 -1.687379,3.983187 -0.924552,16.766928 -0.924552,18.704236 2.486072,0 11.365676,-0.001 14.001,-0.001 0,1.817984 -0.001,1.360662 -0.001,3.002 -4.616138,0 -29.632675,-0.001 -35,-0.001 0,-1.390984 0,-1.37666 0,-3.001 z"
      ],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    offset: 500
  })
  .add({
    targets: ".leaf1",
    opacity: {
      value: [0, 1],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    d: {
      value: [
        "m 40.662502,51.682985 c 0,0.63473 -0.50588,1.035091 -0.980139,1.035091 -0.474258,0 -1.011071,-0.340954 -1.006872,-0.993399 0.0042,-0.652445 0.526473,-1.022497 1.0389,-1.009678 0.512426,0.01282 0.909335,0.467778 0.916274,0.761224 -0.09254,-0.02575 -0.09371,-0.04229 -0.154305,0.02362 -0.08416,0.01768 -0.06451,0.01049 -0.150562,0.08894 0.0934,0.08179 0.06081,0.08026 0.172104,0.09473 0.07948,0.01272 0.08446,0.0058 0.1646,0 z",
        "m 40.609825,51.760325 c 0.204502,0.800433 -0.984454,1.809377 -2.537984,1.889735 -1.55353,0.08035 -3.238295,-0.855173 -5.252079,-3.173868 3.05806,-1.167961 5.531462,-1.387095 6.80624,-0.832901 1.274774,0.554202 1.25251,1.093638 1.016381,1.729589 -0.857126,0.280508 -1.255257,0.372306 -1.795311,0.373818 -0.540056,0.0015 -0.78826,0.05803 -1.570042,-0.23403 0.627977,0.550407 0.982758,0.470974 1.541473,0.601848 0.473115,0.05179 0.760107,0.0018 1.791322,-0.354191 z"
      ],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    offset: 1100
  })
  .add({
    targets: ".leaf2",
    opacity: {
      value: [0, 1],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    d: {
      value: [
        "m 38.541595,46.605911 c -0.339291,0.536437 -0.980841,0.604383 -1.381657,0.35087 -0.400814,-0.253511 -0.672242,-0.828616 -0.319933,-1.377779 0.35231,-0.549163 0.991514,-0.582731 1.417734,-0.297982 0.426219,0.284749 0.518468,0.881418 0.367473,1.13313 -0.06445,-0.07123 -0.05659,-0.08583 -0.143035,-0.06252 -0.08058,-0.03005 -0.06013,-0.02562 -0.174789,-0.0053 0.03522,0.119051 0.0085,0.100337 0.09481,0.172058 0.06037,0.05324 0.06828,0.05005 0.139392,0.08754 z",
        "m 38.394089,46.794484 c -0.260518,1.521085 -2.975156,1.996822 -5.597588,0.58106 -2.622432,-1.415761 -4.702583,-4.634182 -6.292367,-10.45679 5.916332,1.125021 10.159665,3.228992 11.848387,5.411304 1.688722,2.182311 1.249096,3.047907 0.384644,3.859234 -1.623261,-0.392437 -2.348507,-0.638076 -3.240411,-1.173722 -0.891903,-0.535645 -1.343502,-0.689962 -2.414859,-1.949616 0.624716,1.531575 1.26922,1.754366 2.093024,2.526484 0.741682,0.556668 1.252416,0.760309 3.21917,1.202046 z"
      ],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    offset: 1130
  })
  .add({
    targets: ".leaf3",
    opacity: {
      value: [0, 1],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    d: {
      value: [
        "m 45.960351,40.444238 c -0.504476,0.385211 -1.12969,0.226117 -1.417512,-0.150819 -0.28782,-0.376934 -0.342619,-1.010508 0.178484,-1.403131 0.521105,-0.392623 1.132179,-0.202105 1.432975,0.212945 0.300796,0.415051 0.180079,1.006618 -0.04894,1.190221 -0.0357,-0.08918 -0.02326,-0.100141 -0.112419,-0.108305 -0.06513,-0.05616 -0.04749,-0.04491 -0.162068,-0.06567 -0.0083,0.123873 -0.02688,0.09704 0.02915,0.194276 0.03812,0.07089 0.04665,0.07065 0.100313,0.130502 z",
        "m 45.91299,40.505716 c -0.611841,1.169275 -2.827975,0.784166 -4.46148,-1.12104 -1.633505,-1.905206 -2.362329,-5.129545 -2.009545,-10.343107 4.245015,2.606728 6.938727,5.536757 7.64687,7.802418 0.708144,2.265659 0.135913,2.847971 -0.748306,3.26478 -1.142041,-0.783688 -1.633265,-1.191305 -2.174183,-1.883536 -0.540918,-0.692231 -0.846427,-0.94716 -1.329462,-2.28247 0.06602,1.430264 0.501343,1.796179 0.925919,2.662319 0.419717,0.666583 0.757354,0.9787 2.150187,1.900636 z"
      ],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    offset: 1160
  })
  .add({
    targets: ".leaf4",
    opacity: {
      value: [0, 1],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    d: {
      value: [
        "m 51.051398,38.01044 c 0.633571,-0.03835 1.002636,-0.567494 0.973981,-1.040888 -0.02866,-0.47339 -0.401421,-0.988623 -1.052418,-0.945011 -0.651001,0.04361 -0.988821,0.587291 -0.945065,1.098006 0.04376,0.510715 0.521866,0.879411 0.815197,0.868606 -0.03129,-0.09083 -0.04787,-0.09098 0.01425,-0.155452 0.01256,-0.08508 0.0066,-0.06502 0.0797,-0.15565 0.08727,0.0883 0.08378,0.05586 0.104961,0.166061 0.01751,0.07856 0.01089,0.08396 0.0094,0.164332 z",
        "m 51.062845,37.941247 c 0.920621,0.528133 2.454177,-0.699225 2.952555,-2.705887 0.498376,-2.006663 -0.204762,-4.515717 -2.505038,-7.905515 -2.208976,3.62135 -3.113351,6.786508 -2.768194,8.634965 0.345156,1.848455 1.006886,1.994905 1.841129,1.892928 0.562165,-1.030258 0.776475,-1.521339 0.917596,-2.227517 0.141121,-0.706178 0.273855,-1.012562 0.120328,-2.130601 0.507362,1.000875 0.319266,1.439256 0.334323,2.212942 -0.05904,0.635936 -0.193889,0.995188 -0.892699,2.228685 z"
      ],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    offset: 1190
  })
  .add({
    targets: ".leaf5",
    opacity: {
      value: [0, 1],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    d: {
      value: [
        "m 55.614401,40.639679 c 0.470683,0.425841 1.106964,0.31931 1.425145,-0.03238 0.318175,-0.351688 0.425492,-0.978504 -0.06114,-1.413114 -0.486636,-0.434614 -1.111442,-0.295588 -1.445723,0.093 -0.334278,0.388591 -0.263192,0.988149 -0.05024,1.190167 0.043,-0.08591 0.03151,-0.09786 0.121037,-0.09858 0.06958,-0.05055 0.05107,-0.04078 0.166971,-0.05196 -0.002,0.124132 0.01871,0.09894 -0.04521,0.191178 -0.04388,0.06748 -0.05237,0.06652 -0.110835,0.121692 z",
        "m 55.663501,40.773924 c 0.535857,0.916147 2.476773,0.614407 3.907416,-0.878354 1.430642,-1.492762 2.068955,-4.019086 1.759983,-8.104001 -3.717834,2.042416 -6.077018,4.338144 -6.697218,6.113328 -0.620201,1.775182 -0.119034,2.231434 0.655375,2.558011 1.000213,-0.614033 1.430432,-0.933408 1.904175,-1.475783 0.473742,-0.542375 0.74131,-0.742116 1.164358,-1.788354 -0.05782,1.120636 -0.439082,1.407337 -0.810931,2.085972 -0.367593,0.522279 -0.663299,0.766828 -1.883158,1.489181 z"
      ],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    offset: 1220
  })
  .add({
    targets: ".leaf6",
    opacity: {
      value: [0, 1],
      duration: 1000,
      easing: "easeInOutQuad"
    },
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0