Question

基本上我想创建基于儒略卡尼尔anime.js库中的SVG动画。它的笔触颜色效果很好，但是我想用svg填充颜色制作动画。在这里，我保持填充颜色是灰色的，它可以是相同冲程的颜色。

我使用了img版。现在提供2.2.0版

这是代码示例

3.0+

anime({
  targets: '.path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 6000,
  delay: function(el, i) {
    return i * 250
  },
  direction: 'linear',
  loop: false
});

body {
  background: gray;
}

svg.ax-shoes {
  display: block;
  margin: 0 auto;
  width: auto;
  height: 400px;
}

预先感谢

Answer 1

首先在您的SVG路径上使用十六进制颜色作为fill（而不是gray之类的关键字），然后将新的填充添加到动漫属性中。

anime({
  targets: '.path',
  strokeDashoffset: [anime.setDashoffset, 0],
  fill: '#ff0000',
  easing: 'easeInOutSine',
  duration: 6000,
  delay: function(el, i) {
    return i * 250
  },
  direction: 'linear',
  loop: false,
  complete: () => {
    console.log('show the rest of the webpage')
  }
});

body {
  background: gray;
}

svg.ax-shoes {
  display: block;
  margin: 0 auto;
  width: auto;
  height: 400px;
}

<script src="https://unpkg.com/animejs@2.2.0/anime.js"></script>
<svg viewBox="0 0 567.639 567.639" class="ax-shoes">
  <path class="path" fill="#808080" stroke="orange" stroke-width="6" d="M512.603,270.913c-17.002-3.118-45.795-3.146-80.104-9.534l4.714,28.257c0.813,4.82-2.457,9.381-7.268,10.174
			c-0.497,0.086-0.984,0.115-1.473,0.115c-4.245,0-7.994-3.051-8.711-7.373l-4.905-29.366c-0.536-3.213-3.529-6.445-6.665-7.287
			c-1.77-0.487-3.548-0.985-5.346-1.501c-3.127-0.899-5.222,0.927-4.686,4.131l2.467,14.812c0.812,4.819-2.457,9.371-7.268,10.184
			c-0.497,0.077-0.984,0.125-1.473,0.125c-4.236,0-7.984-3.051-8.711-7.383l-4.074-24.403c-0.535-3.223-3.423-6.78-6.436-8.042
			c-2.113-0.87-4.227-1.788-6.35-2.745c-2.974-1.329-4.915,0.134-4.37,3.347l2.104,12.613c0.812,4.829-2.448,9.39-7.268,10.184
			c-0.497,0.076-0.976,0.134-1.463,0.134c-4.236,0-7.985-3.069-8.712-7.392l-4.332-25.962c-0.525-3.213-3.241-7.153-6.015-8.845
			c-2.63-1.635-5.278-3.337-7.918-5.097c-2.706-1.798-4.437-0.717-3.901,2.496l3.031,18.188c0.813,4.819-2.447,9.371-7.268,10.165
			c-0.497,0.095-0.984,0.134-1.463,0.134c-4.245,0-7.994-3.06-8.711-7.392l-7.526-45.116c-1.759-2.018-3.385-3.988-4.666-5.699
			c-10.882-14.458-32.627-40.841-50.585-47.191c-18.8-6.636-33.87,6.923-37.112,19.498c-1.616,6.321,1.224,16.82,3.242,23.017
			c1.253,3.844,3.204,8.042,6.235,11.504c4.284,4.905,5.91,10.098,0.937,14.296c-11.628,9.888-33.622,26.622-58.551,35.85
			c-49.142,18.188-57.748-6.875-57.748-6.875s-10.873-35.228-28.286-47.917c-5.259-3.844-16.161-5.221-22.491-3.729
			c-2.247,0.545-4.312,1.387-6.282,2.362c3.882,22.692,20.913,77.456,95.396,113.393c96.61,46.654,289.006,55.959,325.057,57.307
			c3.261,0.125,3.3,0.68,0.096,1.225c-23.485,3.959-114.491,17.441-205.01,6.34C151.476,358.237,49.08,326.212,22.277,236.047
			c-0.555,1.97-1.081,3.815-1.587,5.403c-4.322,13.626-8.329,22.701-9.161,52.326c-0.172,6.512-2.85,16.352-5.145,22.453
			c-2.754,7.285-5.67,18.053-6.053,31.355c-0.382,13.244-0.373,24.557-0.268,32.426c0.086,6.512,4.188,15.387,9.801,18.695
			c4.007,2.381,9.094,4.809,14.927,6.311c6.312,1.635,16.094,4.553,22.31,6.531c2.687,0.861,5.814,1.588,9.294,1.951
			c6.483,0.668,14.066-0.201,16.916-0.039c2.85,0.154,5.154,1.635,5.154,3.318s3.404,3.041,7.612,3.041s8.826-1.77,10.318-3.93
			c1.492-2.172,4.466-3.93,6.636-3.93c2.171,0,3.94,1.768,3.94,3.93c0,2.17,3.184,3.93,7.124,3.93s8.224-1.865,9.572-4.188
			c1.367-2.295,4.121-4.18,6.158-4.18c2.027,0,4.886,1.875,6.378,4.18c1.501,2.312,5.575,4.188,9.104,4.188
			c3.529,0,7.488-1.77,8.845-3.93c1.358-2.172,4.542-2.172,7.115,0c2.582,2.17,8.53,3.93,13.273,3.93
			c4.743,0,9.151-1.424,9.83-3.184c0.669-1.77,3.203-3.203,5.651-3.203c2.438,0,5.527,1.424,6.885,3.203
			c1.358,1.76,6.082,2.408,10.557,1.473c4.476-0.957,9.094-3.711,10.318-6.148c1.224-2.439,3.758-2.889,5.661-0.996
			c1.884,1.914,7.057,4.008,11.542,4.668c4.475,0.688,9.869-0.086,12.039-1.723c2.171-1.625,5.69-2.609,7.851-2.219
			c2.17,0.422,3.93,2.391,3.93,4.428c0,2.047,3.749,3.691,8.357,3.691c4.619,0,9.677-1.09,11.312-2.457
			c1.625-1.357,4.81-2.133,7.114-1.721c2.305,0.4,4.179,1.836,4.179,3.193s2.305,2.447,5.154,2.447c2.859,0,7.038-0.879,9.343-1.959
			c2.305-1.092,5.498-1.75,7.124-1.473c1.636,0.268,2.955,1.701,2.955,3.203c0,1.49,5.278,2.695,11.79,2.695h0.985
			c6.521,0,11.79-1.768,11.79-3.93c0-2.17,1.875-3.93,4.17-3.93c2.305,0,4.179,1.77,4.179,3.93c0,2.172,4.618,3.93,10.317,3.93
			s12.298-1.205,14.746-2.695c2.438-1.502,6.072-1.502,8.108,0c2.027,1.49,8.855,2.695,15.233,2.695s12.651-1.539,14.009-3.432
			c1.358-1.895,4.332-3.988,6.627-4.676c2.305-0.66,5.059,0.314,6.14,2.209c1.09,1.902,7.143,2.418,13.55,1.186l1.912-0.383
			c6.388-1.254,12.24-4.361,13.053-6.953c0.813-2.572,2.688-4.885,4.179-5.154c1.492-0.268,4.026,1.168,5.652,3.195
			c1.625,2.037,6.474,2.695,10.805,1.463c4.342-1.215,8.415-5.289,9.095-9.084c0.679-3.797,3.538-7.65,6.388-8.588
			c2.85-0.957,5.154,0.479,5.154,3.193c0,2.717,4.943,3.041,11.035,0.756c6.139-2.334,11.082-6.396,11.082-9.113
			c0-2.715,1.646-5.584,3.682-6.387c2.037-0.814,4.677-0.488,5.9,0.727c1.215,1.223,4.849,0.354,8.109-1.961
			c3.261-2.295,6.34-5.938,6.885-8.1c0.545-2.17,5.565-6.637,10.337-11.072c9.85-9.172,23.142-27.197,16.677-54.508
			C556.093,265.528,548.721,277.558,512.603,270.913z"/>

</svg>

网页上的SVG动画加载

1 个答案: