Animation 如何修复TweenMax TimeLineite故障

我正在用TweenMax TimeLine为我的徽标创建动画。我犯了一个奇怪的错误。它制造了一些小故障

这里是codepen操场来测试它。

代码是

var tl = new TimelineLite();
var tween = tl.to(".logo", 0.5, {
   morphSVG: {
      shape: ".oneclosed",
      type: "rotational"
    },
    ease: Power1.easeInOut,
    repeat: 1,
    repeatDelay: 0.5,
    yoyo: true,
    delay: 0.5
  }
).to(".logo", 0.5, {
   morphSVG: {
      shape: ".bothclosed",
      type: "rotational"
    },
    ease: Power1.easeInOut,
    repeat: 1,
    repeatDelay: 0.5,
    yoyo: true,
    delay: 0.5
  }
);

我期待最终结果顺利。但我面临着一些问题。 这是我原来的标志 眨眼版 双目闭式

---

我需要的标志眨眼，眨眼再次标志。现在徽标都关闭。

问题是由每条路径的第一部分，即外部遮罩引起的。一个简单的解决方案是删除此部分并使用它创建一个不变形的不同路径。对于其余部分，您需要将颜色更改为#222。这不是一个很好的解决方案，因为你没有洞，而是有一条黑暗的（#222）路径，但它可以工作：

接下来，我尝试通过移除右侧或遮罩上的几个点来更改路径。它的形状相同，但点数较少

---

我没有更改css或js中的任何内容，所以我只添加svg部分。我希望你会觉得它有用

问题是由每条路径的第一部分，即外部遮罩引起的。一个简单的解决方案是删除此部分并使用它创建一个不变形的不同路径。对于其余部分，您需要将颜色更改为#222。这不是一个很好的解决方案，因为你没有洞，而是有一条黑暗的（#222）路径，但它可以工作：

接下来，我尝试通过移除右侧或遮罩上的几个点来更改路径。它的形状相同，但点数较少

---

我没有更改css或js中的任何内容，所以我只添加svg部分。我希望你会觉得它有用

祝贺你获得10000的声誉！祝贺你获得10000的声誉！