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

Question

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

我想知道是否有一种方法可以使用 TweenLite 在 PNG header 图像中制作动画，给人的印象是这个 PNG 是一个字母一个字母地出现的。有任何想法吗？我唯一能想到的就是为每个字母保存一个单独的 PNG 并将它们一个一个地动画化，但这将永远实施并且会增加广告的整体尺寸。有没有更好的方法？

感谢您的帮助！

Answer 1

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