Анимация линии SVG часть 3

4. Анимация линии посредством изменения её прозрачности.

Основная идея этого примера анимации заключается в том, что на фоне будут появляться линии одна за другой за счёт увеличения яркости. То есть уменьшения прозрачности линии – attributeName=”stroke-opacity” from=”0″ to=”1″

30-35 строка – отрисовка кнопки “Start”
40-46 Отрисовка 4-х линий, которые будут появляться
50-58 анимация первой линии
60-65 анимация второй линии
67-72 анимация третьей линии
74-80 анимация четвертой линии
83-90 изменение цвета прямоугольника

copy-ctrl – для копирования файла целиком нажать на иконку в шапке листинга ⇩

Более подробно об алгоритме последовательных анимаций – здесь.
⇚ Анимация линии часть 2 Анимация маркера⇛

Добавить комментарий