Добрый день! Есть у кого нибудь опыт анимирования объекта? Допустим, по вентилятору кликнули - включилось реле и объект завертелся. Выключили - анимация остановилась.
Через AnimateTransform rotate подтягиваетя. Может можно объектом поверх закрыть и менять прозрачность?
1 лайк
проще всего CSS анимации
в стиле определеяем:
@keyframes rotate {from{transform: rotate(0deg)}to{transform:rotate(360deg)}}
в описателе потом:
((val + 0) > 0) ? 'animation: rotate 1s infinite linear;' : ''
1 лайк
Подскажите, пожалуйста, еще, где стили подключаются, в каком файле и что значит в описателе ?
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) - сравнивает с нулем
И тренарный оператор, который по условию выбирает из двух значений.
4 лайка
Спасибо за подробные разъяснения. Я с css и html хорошо знаком и редактор найду ))), но больше я хотел узнать где условия как раз пишутся (Вы написали это) и еще сам файл стилей где цепляется, в каком месте его прописать. Я с этим тут не сталкивался, если честно.