如何修复 TweenMax TimelineLite 故障
How to fix TweenMax TimelineLite glitch
我正在使用 TweenMax TimeLine 为我的徽标制作动画。而且我遇到了奇怪的错误。它造成了某种类型的故障。
这里是 codepen playground 来测试它。
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
我需要标志来眨眼，眨眼再标志。现在标志都关闭了。
问题是由每条路径的第一部分，即外掩码引起的。一个简单的解决方案是删除这部分并使用它来制作不变形的不同路径。对于其余部分，您需要将颜色更改为#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 部分。我希望你会发现它有用。
我正在使用 TweenMax TimeLine 为我的徽标制作动画。而且我遇到了奇怪的错误。它造成了某种类型的故障。
这里是 codepen playground 来测试它。 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
我需要标志来眨眼，眨眼再标志。现在标志都关闭了。
问题是由每条路径的第一部分，即外掩码引起的。一个简单的解决方案是删除这部分并使用它来制作不变形的不同路径。对于其余部分，您需要将颜色更改为#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 部分。我希望你会发现它有用。