Question

目前我正在用html5 / javascript制作横幅（也是一种自学的方式，对我来说还是比较新的）我正在使用tweenlite库。我正在尝试在html5中制作横幅的最佳方式是什么，所以我正在尝试所有这些不同的插件来制作相同的横幅。现在，Greensock推出了新的GSAP v12。

我希望很明显，除了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/

获取最新消息

如果您还需要其他任何内容，请随时通过http://forums.greensock.com的GreenSock论坛进行讨论。

使用TweenLite（JS）淡化文本无法正常工作

1 个答案: