使用 TweenLite 为 HTML5 横幅中的单个字母设置动画

Question

我的客户希望我在 HTML5 横幅的标题中逐个字母地制作动画。标题的字体不是网络字体，它是 Museo Slab，所以我将它作为 PNG 包含在背景图像上。背景图像不是纯色的，它是一个人的图片。我曾想过让一张背景图片覆盖标题并慢慢将其动画化以提供相同的效果，但效果不如使用纯色背景图片来实现这个想法。

我想知道是否有一种方法可以使用TweenLite 在 PNG 标题图像中设置动画，这会让人觉得这个 PNG 是一个字母一个字母地出现。有任何想法吗？我唯一能想到的就是为每个字母保存一个单独的 PNG 并一个一个地为它们设置动画，但这将需要很长时间才能实现，并且会增加广告的整体大小。有没有更好的办法？

感谢您的帮助！

Answer 1

您可以为字母使用精灵图像，并使用 tweenlite 更改字母的位置。