我正在使用TweenMax时间线为徽标创建动画。而且我收到了奇怪的错误。它造成了某种故障。
这里是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
我需要眨眨眼的徽标，然后眨眨眼才能看到徽标。现在徽标已全部关闭。
答案 0 :(得分：2)
问题是由每条路径的第一部分即外部遮罩引起的。一个简单的解决方案是删除此部分，并使用它来制作不变形的其他路径。其余的您需要将颜色更改为＃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部分。希望您会发现它有用。