Анимация в svg панели

Добрый день! Есть у кого нибудь опыт анимирования объекта? Допустим, по вентилятору кликнули - включилось реле и объект завертелся. Выключили - анимация остановилась.
Через AnimateTransform rotate подтягиваетя. Может можно объектом поверх закрыть и менять прозрачность?

1 Like

проще всего CSS анимации
в стиле определеяем:

@keyframes rotate {from{transform: rotate(0deg)}to{transform:rotate(360deg)}}

в описателе потом:

((val + 0) > 0) ? 'animation: rotate 1s infinite linear;' : ''

Подскажите, пожалуйста, еще, где стили подключаются, в каком файле и что значит в описателе ?

SVG отображается как часть кода страницы. Поэтому проще всего прописать в коде SVG в теле тега <svg>

<style>
...
@keyframes rotate {from{transform: rotate(0deg)}to{transform:rotate(360deg)}}
...
</style>

В стилях может быть еще много всего - зависит от вашего SVG. Стили меняютмя перед загрузкой на контроллер(в блокноте или в специальном редакторе если он вдруг у вас есть).
Потом он загружается в контроллер и открывается для редактирования “Edit Dashboard”.
В описателе - значит что при редактировании схемы выбираете элемент щелкнув по нему - скорее всего выберется “Bind: PATH”
ставите галочку “Style” - управлять стилем элемента.
И в поле “Value” описываете как управлять стилем элемента - в данном случае по значению 0 и 1. По 1 - задаем анимацию или по 0 - убираем а нимацию(пустая строка).
val+0 - преобразует строку в число
((val+0)>0) - сравнивает с нулем
И тренарный оператор, который по условию выбирает из двух значений.

2 Likes

Спасибо за подробные разъяснения. Я с css и html хорошо знаком и редактор найду ))), но больше я хотел узнать где условия как раз пишутся (Вы написали это) и еще сам файл стилей где цепляется, в каком месте его прописать. Я с этим тут не сталкивался, если честно.