如何修复 TweenMax TimelineLite 故障

Question

我正在使用 TweenMax TimeLine 为我的徽标创建动画。而且我遇到了奇怪的错误。它会造成某种类型的故障。

这是测试它的 codepen 游乐场。 https://codepen.io/innocentabi/pen/ZZpaVJ

代码是

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
  }
);

我期待最终结果顺利。但我面临问题。 这是我原来的标志 http://prntscr.com/n922rd 眨眼版 https://prnt.sc/n9238z 闭眼版 http://prntscr.com/n923xs

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

Answer 1

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

<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,600' rel='stylesheet' type='text/css'>
<svg viewBox="0 0 841.9 595.3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin">


  <path fill="#3a32b3" d="M750,5.2c-20.4-1-60.5,0.7-127.4,17.6c0,0-325.5,58.9-535.4,306.6c0,0-83.3,78.9-55.5,191.1   c0,0,28.9,106.6,160,61.1c0,0,79.8-26.1,189.9-163.7c5.6-7,15.9-7.8,22.6-1.9c37.7,33.1,150.9,130.8,199.6,155.6   c0,0,80.3,51.3,137.3-34.2c9.2-13.8,15.8-29,20.5-44.8c10.5-35.1,32.6-116.7,40-202.3c0.7-8.1,1.5-16.3,2.6-24.4   c5.5-39.5,22.2-181.9-14.2-238.3C781.2,14,766,6,750,5.2z" />


<path class="logo" fill="#222" d="M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7   c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,514.9   c0,0-25,60.4-90,22.2c0,0-38.2-16-191.7-145.9c-7-6-8.1-16.4-2.3-23.6c41.9-51.6,200.6-244.5,289.1-313.4   c5.4-4.2,11.4-7.7,17.9-10.1c13.8-5.1,34.1-6.9,37,24.2C769.3,68.4,785.9,377.2,709.3,514.9z" />
<path class="oneclosed" fill="#3a32b3" d="M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7   c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,398.4c0,0-25,7.6-90,2.8   c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3   C769.3,342.1,785.9,381.1,709.3,398.4z" />
<path class="bothclosed" fill="#3a32b3" d=" M203.8,409.2C90.5,420.1,65,403.4,65,403.4c-33.3-26.5,120-29.3,120-29.3   c82.6-2.2,135.1,2.3,159.1,5.2c8.7,1,10.5,3.3,3.8,4.8C261,403.5,203.8,409.2,203.8,409.2z M709.3,398.4c0,0-25,7.6-90,2.8   c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3   C769.3,342.1,785.9,381.1,709.3,398.4z" />

</svg>

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

<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,600' rel='stylesheet' type='text/css'>
<svg viewBox="0 0 841.9 595.3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin">
<path class="logo" fill="#3a32b3" d="M750, 5.2 
           C729.6, 4.2 689.5, 5.9 622.6, 22.8 
           C622.6, 22.8 297.1, 81.7 87.2, 329.4 
           C87.2, 329.4 3.9, 408.3 31.7, 520.5 
           C31.7, 520.5 60.6, 627.1 191.7, 581.6 
           C191.7, 581.6 271.5, 555.5 381.6, 417.9 
           C387.2, 410.9 397.5, 410.1 404.2, 416 
           C441.9, 449.1 555.1, 546.81 603.8, 571.6 
           C603.8, 571.6 684.1, 622.9 741.1, 537.4
           C750.3, 523.6 756.9, 508.4 761.6, 492.6
           C772.1, 457.5 794.2, 375.9 804.2, 265.9 
           C809.7, 226.4 826.4, 84 790, 27.6 
           C781.2, 14 766, 6 750, 5.2 Z


                                     M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7   c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,514.9   c0,0-25,60.4-90,22.2c0,0-38.2-16-191.7-145.9c-7-6-8.1-16.4-2.3-23.6c41.9-51.6,200.6-244.5,289.1-313.4   c5.4-4.2,11.4-7.7,17.9-10.1c13.8-5.1,34.1-6.9,37,24.2C769.3,68.4,785.9,377.2,709.3,514.9z" />
<path class="oneclosed" fill="#3a32b3" d="M750, 5.2 
           C729.6, 4.2 689.5, 5.9 622.6, 22.8 
           C622.6, 22.8 297.1, 81.7 87.2, 329.4 
           C87.2, 329.4 3.9, 408.3 31.7, 520.5 
           C31.7, 520.5 60.6, 627.1 191.7, 581.6 
           C191.7, 581.6 271.5, 555.5 381.6, 417.9 
           C387.2, 410.9 397.5, 410.1 404.2, 416 
           C441.9, 449.1 555.1, 546.81 603.8, 571.6 
           C603.8, 571.6 684.1, 622.9 741.1, 537.4
           C750.3, 523.6 756.9, 508.4 761.6, 492.6
           C772.1, 457.5 794.2, 375.9 804.2, 265.9 
           C809.7, 226.4 826.4, 84 790, 27.6 
           C781.2, 14 766, 6 750, 5.2 Z
                                          M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7   c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,398.4c0,0-25,7.6-90,2.8   c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3   C769.3,342.1,785.9,381.1,709.3,398.4z" />
<path class="bothclosed" fill="#3a32b3" d="M750, 5.2 
           C729.6, 4.2 689.5, 5.9 622.6, 22.8 
           C622.6, 22.8 297.1, 81.7 87.2, 329.4 
           C87.2, 329.4 3.9, 408.3 31.7, 520.5 
           C31.7, 520.5 60.6, 627.1 191.7, 581.6 
           C191.7, 581.6 271.5, 555.5 381.6, 417.9 
           C387.2, 410.9 397.5, 410.1 404.2, 416 
           C441.9, 449.1 555.1, 546.81 603.8, 571.6 
           C603.8, 571.6 684.1, 622.9 741.1, 537.4
           C750.3, 523.6 756.9, 508.4 761.6, 492.6
           C772.1, 457.5 794.2, 375.9 804.2, 265.9 
           C809.7, 226.4 826.4, 84 790, 27.6 
           C781.2, 14 766, 6 750, 5.2 Z
                                           M203.8,409.2C90.5,420.1,65,403.4,65,403.4c-33.3-26.5,120-29.3,120-29.3   c82.6-2.2,135.1,2.3,159.1,5.2c8.7,1,10.5,3.3,3.8,4.8C261,403.5,203.8,409.2,203.8,409.2z M709.3,398.4c0,0-25,7.6-90,2.8   c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3   C769.3,342.1,785.9,381.1,709.3,398.4z" />
</svg>

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