Управление анимацией задвижек

Управлять анимацией задвижки очень просто. Для управления откройте файл .svg с помощью обычного блокнота.

Анимация управляется двумя параметрами в коде, а именно в секцииях:
@keyframes mymove шкала с процентами - это цикл.
use.zcolor которая идет сразу после шкалы с процентами - это шаги в цикле.

В шкале с процентами, мы меняем плавность появления и исчезания заливки цветом, т.е. меняя значения {fill-opacity} от 0.0 до 0.5 мы назначаем прозрачность конкретного шага в цикле, а в use.zcolor время выполнения всего цикла. Если значение {fill-opacity} установить более 0.5, то заливка станет более темного цвета.

Далее на "живых" примерах, Вы увидите каким образом меняеется анимация в зависимости от изменения в коде. Вы можете лекго экспериментировать и тренироваться в данных фреймах, изменяя участок кода (в левой части фрейма), Вы будете сразу наблюдать изменение анимации (в правой части фрейма).

Итак...


В данном цикле, от 0% до 100% ровно 21 шаг, это кол-во строк со значениями. Чтобы моргание было не плавным, нужно резко изменить прозрачность в переходах между шагами от 0.0 до 0.5. В данном примере 21 шаг был разделен на 3, что бы мы получили 3 ровные части внутри цикла по 7 шагов, затем просто присвоили этим частям нужную прозрачность в нужный момент, время выполнения цикла 0.7 секунды (устанвлено в use.zcolor) таким образом мы получили следующую анимацию:

JS Bin on jsbin.com

Пример управления плавностью появления/исчезания:

Изменяя значение прозрачности fill-opacity от 0.0 до 0.5 не резко, а постепенно от шага к шагу, мы получаем медленное появление и затухание заливки, см. участок кода @keyframes mymove. И немного добавили время выполнения цикла use.zcolor до 1 секунды.

JS Bin on jsbin.com

Пример управления частотой моргания:

Регулировать частоту мограния можно установкой нужной продолжительности цикла animation: mymove в секции use.zcolor до 0.2 секунды:

JS Bin on jsbin.com

Меняем цвет заливки фигуры:

Меняем значение цвета в HTML на юбой нужный, коды цветов можно подсмотреть colorscheme.ru

JS Bin on jsbin.com