Question

我使用anime.js进行控制的3步svg变形。我在滚动时触发了变形，但是它遍历了我定义的每个路径对象。我想知道是否有可能一次只在我的路径对象中向前移动1个步骤，例如触发第一个路径变形为200px，第二个路径变形为300px，依此类推。

    var shapes = [{
      d: "M100.882251,2.88225099 L100.882251,98.882251 C100.882251,99.9868205 99.9868205,100.882251 98.882251,100.882251 L2.88225099,100.882251 C1.77768149,100.882251 0.882250994,99.9868205 0.882250994,98.882251 L0.882250994,2.88225099 C0.882250994,1.77768149 1.77768149,0.882250994 2.88225099,0.882250994 L98.882251,0.882250994 C99.9868205,0.882250994 100.882251,1.77768149 100.882251,2.88225099 Z"
    }, {
      d: "M100,2 L100,38 C100,39.1045695 99.1045695,40 98,40 L2,40 C0.8954305,40 0,39.1045695 0,38 L0,2 C0,0.8954305 0.8954305,0 2,0 L98,0 C99.1045695,0 100,0.8954305 100,2 Z"
    }, ];

    var morph = anime({
      targets: '.morph',
      d: [{
          value: shapes[0].d
        },
        {
          value: shapes[1].d
        },
      ],
      duration: 2000,
      direction: 'forward',
      autoplay: false,
      easing: 'easeInOutQuart',
      elasticity: 100,
      loop: false,
    });

    $(window).on('scroll', function() {
      scrollPosition = $(window).scrollTop();

      if (scrollPosition > 200) {
        morph.play();
      }
    })

<div class="container">
  <svg class="morph-container" width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <path class="morph" d="M71.4142136,0.703535444 L139.296465,68.5857864 L139.296465,68.5857864 C140.077513,69.366835 140.077513,70.633165 139.296465,71.4142136 L71.4142136,139.296465 L71.4142136,139.296465 C70.633165,140.077513 69.366835,140.077513 68.5857864,139.296465 L0.703535444,71.4142136 L0.703535444,71.4142136 C-0.0775131398,70.633165 -0.0775131398,69.366835 0.703535444,68.5857864 L68.5857864,0.703535444 L68.5857864,0.703535444 C69.366835,-0.0775131398 70.633165,-0.0775131398 71.4142136,0.703535444 Z" id="Rectangle" fill="#D8D8D8"></path>
    </g>
  </svg>
</div>

.container {
  height: 300vh;
}

.morph-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

在滚动中的anime.js中逐步移动动画

0 个答案: