Question

我不知道“擦拭效果”或“方向性淡入”是“智力上的”是什么，当我们看到有人“这样做时”会发生什么。为了提供一些上下文，这是我的图形环境：

第3层：如果需要，我也可以使用（请注意，运行时图形环境仅允许“简单添加”图层，仅此而已。我使用GIMP制作图像，该开源程序类似于photoshop，但我不在乎该工具，我想从智力上理解它。

第2层：这是一张较小的PNG图片，我想进行“擦除效果”或DIRECTIONAL淡入，例如从左到右（或从右到左），在下面的整个背景中。

第1层：这将是我想要的任何完整背景图像。

此环境（HTML中的画布）允许调整整个图层的不透明度（或Alpha）值，并且我有一段代码可以随时间做（这很容易）。我的问题是，我不理解要从“从左到右”渐隐的东西（png）图像的外观，我需要“智力”地理解。

例如如果我要创建渐变的黑色到alpha图层3，我也可以这样做，但是我认为，除非我使其完全符合我要淡入的图形的轮廓，否则它将“干扰”背景，对？那么……这是如何“智力地”完成的？我什至需要3层，还是2层好？谢谢。

因此，我可以“编写代码”，在这里我不需要任何“讲义”；我正在努力地了解自己需要做什么，以制作这种相当普通的动画类型。

Answer 1

如果要在alpha层3上创建渐变的黑色，我也可以这样做，但是我认为，除非我使它与要淡入的图形轮廓完全匹配，否则它同样会“干扰”背景，对吧？

否，因为第3层在第2层上配置为 mask 。因此，它仅影响第2层，并且仅影响其透明度。

所以，假设您从一个第二层宽度四倍的蒙版开始构建蒙版：

/ opaque /  grad  /  ient  / transp /

部分1是不透明的，部分2和3是从不透明到透明的渐变，部分4是透明的。然后，从此遮罩开始，该遮罩的右端接触第2层的右端。然后第4部分覆盖第2层，因此第2层是透明且不可见的。现在，向右动画遮罩，直到其左端接触到第2层的左端。现在，第1部分覆盖了第2层，因此第2层是不透明的并且完全可见。

介于两者之间，第2层从左到右淡入。

这是一个示范：

请注意，文本从左到右淡入，但背景颜色不受影响。