javascript - 使用 TweenLite (JS) 淡入淡出文本不起作用

Question

目前我正在用 html5/javascript 制作横幅(也是我自己学习的一种方式，它对我来说仍然相对较新)并且我正在使用 tweenlite 库。我正在尝试在 html5 中制作横幅的最佳方法是什么，因此我正在尝试所有这些不同的插件来制作相同的横幅。现在轮到 Greensock 推出新的 GSAP v12。

我希望 atm 清楚地表明我不想使用 TweenLite/Max 以外的任何东西来解决此解决方案。即使我想，我也不能(文件大小限制)。

现在是我的问题了。我正在尝试使文本同时滑入和淡入。滑动工作完美且足够简单，但褪色似乎没有任何作用。

这是代码的一部分(请注意，我现在将其淡出，以便于测试):

TweenMax.to(ctxTitle, 0.5, { ypos:titleToYpos, css:{alpha:0}, ease:Power2.easeOut, onUpdate:loopTitle });

function loopTitle() {
  ctxTitle.clearRect(0, 0, width, height);
  ctxTitle.fillText(title, ctxTitle.xpos, ctxTitle.ypos);
}

如果我遗漏了什么，请随时询问! :)

Answer 1

我注意到一些事情:

1) 您尝试补间上下文本身的 css，而不是 Canvas 元素。

//BAD:
TweenLite.to(document.getElementById('canvas4').getContext('2d'), 0.5, {css:{alpha:0}});

//GOOD:
TweenLite.to(document.getElementById('canvas4'), 0.5, {css:{alpha:0}});

当然，您可以为处理 ypos 的上下文创建 1 个补间，为处理不透明度/alpha 的 Canvas 元素创建另一个补间。它们将完美同步运行。

2) 您使用的是非常旧版本的 GSAP 文件。从 http://www.greensock.com/v12/ 获取最新信息

如果您还需要任何其他信息，请随时访问 GreenSock 论坛:http://forums.greensock.com 。