Как интеллектуально достигается эффект «стереть», анимированный эффект DIRECTIONAL слева направо

Question

Я не понимаю, что такое «эффект стирания» или DIRECTIONAL Fade-In «интеллектуально», что происходит, когда мы видим, как кто-то «делает это».Чтобы обеспечить некоторый контекст, вот мое графическое окружение:

Слой 3: при необходимости я тоже могу использовать (обратите внимание, что графическое окружение во время выполнения позволяет только «простое добавление» слоев, вот и все. Я использую GIMPчтобы сделать изображения, программа с открытым исходным кодом похожа на программу для фотошопа, но мне все равно инструмент, я пытаюсь понять его интеллектуально).

Слой 2: это будет меньшее изображение PNG, которое я хочусделать «эффект стереть» или DIRECTIONAL постепенно, например, слева направо (или справа налево), на полном фоне ниже.

Слой 1: это будет любое полное фоновое изображение, которое я хочу.

Эта среда (холст в html) позволяет регулировать значение непрозрачности (или альфа) всего слоя, и у меня естькод для этого со временем (это легко).Моя проблема в том, что я не понимаю «интеллектуально», что мне нужно сделать, чтобы создать изображение (png), которое исчезает в «слева направо».

Например, если бы я создалс градиентом черного на альфа-слой 3, я тоже могу это сделать, но я думаю, что если я не сделаю так, чтобы он точно соответствовал контуру рисунка, на котором я пытаюсь исчезнуть, это будет одинаково «мешать» фону, верно?Итак ... как это делается "интеллектуально", пожалуйста?Мне даже нужно 3 слоя, или 2 хорошо?Спасибо.

Итак, я могу «написать код», я не ищу там никаких «раздаточных материалов»;Я изо всех сил пытаюсь интеллектуально увидеть, что мне нужно сделать, чтобы создать этот довольно распространенный тип анимации.

Answer 1

Если бы мне пришлось создать градиентный слой от черного к альфа-слою 3, я тоже могу это сделать, но я думаю, что если я не сделаю так, чтобы он точно соответствовал контуру рисунка, который я хочу вывести, он будет одинаково«беспокоить» фон, верно?

Нет, поскольку слой 3 настроен как маска на уровне 2. Таким образом, он влияет только на слой 2 и влияет только на его прозрачность.

---

Итак, допустим, вы начинаете с маски, которая в четыре раза больше ширины слоя 2. Создайте маску следующим образом:

/ opaque /  grad  /  ient  / transp /

Секция 1 непрозрачна, секции 2и 3 - градиент от непрозрачного до прозрачного, а участок 4 - прозрачный.Итак, начните с этой маски, расположенной так, чтобы ее правый конец касался правого конца слоя 2. Затем раздел 4 покрывает слой 2, так что слой 2 является прозрачным и невидимым.Теперь анимируйте маску вправо, пока ее левый конец не коснется левого конца слоя 2. Теперь раздел 1 охватывает слой 2, поэтому слой 2 непрозрачен и полностью виден.

Между ними слой 2 исчезал слева направо.

Вот демонстрация:

Обратите внимание, что текст постепенно исчезает слева направо, но цвет фона не изменяется.