javascript - 使用 Vivus.js 和 GSAP 对最初隐藏的元素进行动画处理
问题描述
所以我有这个 GSAP 时间线,它应该首先为淡入文本设置动画,并且 onComplete 它应该触发它所做的 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();
解决方案
我对 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});
如果您有任何其他问题,我建议您查看https://greensock.com/forums/上的 GSAP 论坛。这是一个很棒的社区(不是 Stack Overflow 不是 - 只是 GreenSock 论坛完全致力于解决与 GSAP 相关的问题)。快乐的动画!
推荐阅读
- dictionary - 为什么这个 Google 应用程序脚本中忽略了“if”?
- c++ - C++ 模板的模板编译失败
- css - 通过 SASS 迭代 props 一个类
- javascript - HTML 清空 div 内容
- powershell - 如何获取下载链接返回的文件名?
- redirect - 非标准 HTTPS 端口的 VirtualBox 端口重定向问题
- javascript - 使用 Ajax 获取数据未定义
- reactjs - 如何将参数传递给 reactJS 应用程序
- mysql - 我有 2 个数据库查询,并希望将它们作为一个查询
- google-colaboratory - 如何删除 google colab 标准路径中的文本文件?