使用 Vivus.js 和 GSAP 对最初隐藏的元素进行动画处理

Question

所以我有这个GSAP时间线，它应该首先对淡入文本进行动画处理，然后在Complete上它应该触发Vivus.js构造函数。但是，SVG 元素在动画发生之前是可见的，这不是所需的效果。我试图以某种方式操纵它，但问题仍然存在 - 我可能错过了什么..？

期望的效果是在绘制自身时淡入。

这是一支笔： https://codepen.io/anon/pen/ELGawo

function initialAnimation() {
var introText = $(".text-intro"),
tlIntro = new TimelineLite({ onComplete: introFadeIn });
tlIntro.from(introText, 1, { autoAlpha: 0 });
}
// Fade in and draw elements
function introFadeIn() {
var graphic1 = $(".graphic1");
tlIntrofadeIn = new TimelineLite({ onComplete: gr1Animate });
tlIntrofadeIn
.from(graphic1Elem, 1, { autoAlpha: 0 });
}
function gr1Animate() {
new Vivus(
"gr1",
{
type: "delayed",
onReady: function(myVivus) {
myVivus.el.style.visibility = "inherit";
}
},
function(obj) {
obj.el.style.visibility = "visible";
}
);
}
initialAnimation();

Answer 1

我不熟悉Vivus，但是GSAP有一个工具(DrawSVGPlugin(，它可以做与Club GreenSock福利相同的事情(以及更多(，并且它无缝集成，因此您的30行左右的代码可以压缩为3行： https://codepen.io/GreenSock/pen/de8f2fa2a6813213d0e258113b2b15bd/?editors=0010

var introTL = new TimelineLite({delay:0.5});
introTL.from(".text-intro, #gr1 circle, #gr1 text", 1, {autoAlpha:0})
.from("#gr1 path", 2, {drawSVG:"0%", autoAlpha:0});

如果您有任何其他问题，我建议您查看 GSAP 论坛 https://greensock.com/forums/。这是一个很棒的社区(并不是说Stack Overflow不是 - 只是GreenSock论坛完全致力于与GSAP相关的问题(。动画快乐！