javascript - SVG 变形与动漫 js，奇怪的异常

Question

这个问题不言自明，我拼命想了解是什么导致了这种行为。我什至尝试尝试使用路径值来了解问题所在。 Codepen

带有 svg 的 HTML

 <svg class="morph__svg" id="Layer_1" x="0px" y="0px" viewBox="0 0 1400 700" >
<style type="text/css">
    .morph__path{fill:url(#_0_1_);}
</style>
<linearGradient id="_0_1_" gradientUnits="userSpaceOnUse" x1="689.6684" y1="316.9973" x2="690.4974" y2="317.4893" gradientTransform="matrix(120.002 0 0 -140.407 -82111.3828 44891.6445)">
    <stop  offset="0" style="stop-color:#FFD672"/>
    <stop  offset="1" style="stop-color:#FA9032"/>
</linearGradient>

    <path id="morph" class="morph__path morph__path--0" d="M702.4,280c45.3,0,55.4,26.2,57.6,54.4c0.4,5.2,0.5,10.7,0.5,16c0,33.1-24.9,70-58.1,70
    c-33.1,0-61.9-36.8-61.9-70S648.4,280,702.4,280z" fill="#000000"/>
      <path class="morph__path morph__path--1" d="M703.1,271.5c63.7,0.8,55.4,26.2,57.6,54.4c0.4,5.2,0.5,10.7,0.5,16c0,33.1-24.9,86.7-58.1,86.7
    c-33.1,0-61.9-53.5-61.9-86.7S629.7,270.6,703.1,271.5z"/>
      <path class="morph__path morph__path--2" d="M704,270c33.1,0,60,26.9,60,60c0,33.1-25.6,101-58.8,101c-33.1,0-61.2-67.8-61.2-101
    C640,296.9,666.9,270,700,270z" />
</svg>

js

let zero =  document.querySelector('.morph__path--0');
let one = document.querySelector(".morph__path--1");
let two = document.querySelector(".morph__path--2");


let zeroPoints = zero.getAttribute('d');
let onePoints = one.getAttribute('d');
let twoPoints = two.getAttribute('d');


anime({
  targets: document.querySelector(".morph__path--0"),
  easing: 'linear',
  d: [{value: zeroPoints, duration: 500}, {value: onePoints, duration: 500}],
  //loop: true,
  //direction: 'alternate'
  complete: function () {
    toTwo();
  }
});

function toTwo() {
  anime({
    targets: document.querySelector(".morph__path--0"),
    easing: 'linear',
    d: [{value: onePoints, duration: 500}, {value: twoPoints, duration: 2500}],
    //loop: true,
    //direction: 'alternate'
    complete: function () {
      //anim();
    }
  });

}

Codepen

Answer 1

我找不到您的预期结果，但是如果您查看您的代码并比较 .morph__path--0、.morph__path--1 和 .morph__path--2 你会看到 .morph__path--2 丢失了一段路径。请参阅下面的代码段:

let zero = document.querySelector('.morph__path--0');
let one = document.querySelector(".morph__path--1");
let two = document.querySelector(".morph__path--2");


let zeroPoints = zero.getAttribute('d');
let onePoints = one.getAttribute('d');
let twoPoints = two.getAttribute('d');


anime({
  targets: document.querySelector(".morph__path--0"),
  easing: 'linear',
  d: [{
    value: zeroPoints,
    duration: 500
  }, {
    value: onePoints,
    duration: 500
  }],
  //loop: true,
  //direction: 'alternate'
  complete: function() {
    toTwo();
  }
});

function toTwo() {
  anime({
    targets: document.querySelector(".morph__path--0"),
    easing: 'linear',
    d: [{
      value: onePoints,
      duration: 500
    }, {
      value: twoPoints,
      duration: 2500
    }],
    //loop: true,
    //direction: 'alternate'
    complete: function() {
      //anim();
    }
  });

}

body,
html {
  margin: 0;
  padding: 0;
  overflow:hidden
}

path:not(#morph) {
  display: none;
}

svg {width:1200px; height:1200px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

<svg class="morph__svg" id="Layer_1" x="0px" y="0px" viewBox="600 600 1400 700">
<style type="text/css">
	.morph__path{fill:url(#_0_1_);}
</style>
<linearGradient id="_0_1_" gradientUnits="userSpaceOnUse" x1="689.6684" y1="316.9973" x2="690.4974" y2="317.4893" gradientTransform="matrix(120.002 0 0 -140.407 -82111.3828 44891.6445)">
	<stop  offset="0" style="stop-color:#FFD672"/>
	<stop  offset="1" style="stop-color:#FA9032"/>
</linearGradient>

    <path id="morph" class="morph__path morph__path--0" d="M702.4,280
c45.3,0,55.4,26.2,57.6,54.4
c0.4,5.2,0.5,10.7,0.5,16
c0,33.1-24.9,70-58.1,70
c-33.1,0-61.9-36.8-61.9-70
S648.4,280,702.4,280z" fill="#000000"/>
      <path class="morph__path morph__path--1" d="M703.1,271.5
c63.7,0.8,55.4,26.2,57.6,54.4
c0.4,5.2,0.5,10.7,0.5,16
c0,33.1-24.9,86.7-58.1,86.7
c-33.1,0-61.9-53.5-61.9-86.7
S629.7,270.6,703.1,271.5z"/>
      <path class="morph__path morph__path--2" d="M704,270
c33.1,0,60,26.9,60,60
c0.4,5.2,0.5,10.7,0.5,16
c0,33.1-25.6,101-58.8,101
c-33.1,0-61.2-67.8-61.2-101
S640,296.9,666.9,270,700,270zz" />
</svg>