1

目前我正在用 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);
}

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

4

1 回答 1

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 的画布元素创建另一个补间。它们将完美同步运行。

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

如果您还需要其他任何东西，请不要犹豫，访问http://forums.greensock.com上的 GreenSock 论坛。

于 2012-09-17T21:47:29.597 回答