Создание окон для клиента визуализации > Рекомендации по созданию окон > Динамизация SVG элементов > Практические сценарии динамизации

Сценарий: Вращать SVG-иконку с помощью CSS-анимации.

Ссылка на ресурсы документации: https://disk.yandex.ru/d/4FoWnt4_QXEVPQ

1.Текущий код SVG:

</svg>

SVG_scenarii_vrashenie_1

2.В первую очередь обратим внимание на тег path:

В него нужно добавить новый атрибут id со значением rotate_icon, чтобы XML смог к нему обратиться. Записывается это следующим образом: id="rotate_icon".

</svg>

3.Теперь внутри SVG нужно вызвать новый тег style, для того, чтобы в нем прописать селектор, который активирует поворот и анимацию поворота.

Важно! Если в SVG используется тег style, то для него нужно обязательно добавить экранирование <![CDATA[]]>. Это предотвращает возможные ошибки при импорте SVG.

Пример экранирования для style:

/* Здесь ваш CSS код */

]]>

</style>

Итоговый код с добавлением style и экранирования:

/* Здесь ваш CSS код */

]]>

</style>

</svg>

4.Добавим два селектора, первый селектор #rotate_icon.Off будет отвечать за отключенное состояние, второй #rotate_icon.On - за включенное.

Для "#rotate_icon.Off" выставим отключенную анимацию, делается это с помощью свойства "animation: none;"

Для "#rotate_icon.On" выставим анимацию для запуска вращения с помощью свойства animation: "animation: rotate360 2s linear infinite;"

rotate360 отвечает за имя анимации, которое добавим позже, 2s продолжительность одного цикла анимации, linear - линейная скорость анимации (равномерное вращение), infinite указывает, что анимация будет бесконечной.

#rotate_icon.Off {

animation: none;

}

#rotate_icon.On {

animation: rotate360 2s linear infinite;

}

]]>

</style>

</svg>

5.Теперь добавим анимацию под названием rotate360 с помощью ключевого слова @keyframes.

Внутри нее пропишем from - начальное состояние анимации поворота 0 градусов и to - конечное состояние анимации поворота 360 градусов.

Само свойство transform: rotate() отвечает за трансформацию поворота SVG в градусах.

#rotate_icon.Off {

animation: none;

}

#rotate_icon.On {

animation: rotate360 2s linear infinite;

}

@keyframes rotate360 {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

]]>

</style>

</svg>

Проведем отладку кода, чтобы убедиться, что анимация CSS работает.

Временно добавим в path атрибут class и в него напишем "On":

#rotate_icon.Off {

animation: none;

}

#rotate_icon.On {

animation: rotate360 2s linear infinite;

}

@keyframes rotate360 {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

]]>

</style>

</svg>

6.При отладке можно заметить, что SVG иконка вращается, но только от левого верхнего угла SVG (опорной точки по умолчанию).

7.Изменим опорную точку, чтобы она находилась в центре с помощью свойства transform-origin: center;

Для этого создадим новый селектор, который будет ссылаться только на id="rotate_icon":

Вновь проверяем SVG, теперь она вращается от центра:

#rotate_icon {

transform-origin: center;

}

#rotate_icon.Off {

animation: none;

}

#rotate_icon.On {

animation: rotate360 2s linear infinite;

}

@keyframes rotate360 {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

]]>

</style>

</svg>

8.Перед тем как перейти к настройке XML нужно изменить отладочный атрибут на class="Off".

Это нужно для того, чтобы в выпадающем списке было два элемента: "Off" и "On" и по умолчанию выбранный будет "Off".

Если не задать класс, то по умолчанию будет выбрано пустое состояние, которое в данном сценарии не используется.

#rotate_icon {

transform-origin: center;

}

#rotate_icon.Off {

animation: none;

}

#rotate_icon.On {

animation: rotate360 2s linear infinite;

}

@keyframes rotate360 {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

]]>

</style>

</svg>

9.SVG готов. Теперь с помощью XML настроем выбор нужного класса "Off" или "On".

10.Сделаем базовый импорт SVG, чтобы автоматически сгенерировался начальный XML, который потом нужно изменить. В окне импорта создадим Параметр и присвоим ему следующие значения:

Имя параметра	Id элемента SVG	Атрибут элемента SVG
Вращение	rotate_icon	class

SVG_scenarii_vrashenie_2

Нажимаем Применить.

В MasterSCADA 4D добавился параметр как поле ввода:

SVG_scenarii_vrashenie_3

Уже на данном этапе можно использовать SVG. Трудность заключается в том, что в конвертации связей нужно вручную прописать какой селектор использовать для запуска SVG.

Пример как это будет выглядеть в конвертации связей:

Источник	Приемник
False	Off
True	On

SVG_scenarii_vrashenie_4

Но сценарий предполагает использовать выпадающий список, а не поле ввода.

Изменим поле ввода на выпадающий список.

11.Перейдем в XML файл settings.xml:

12.Обратим внимание на тег ParameterDef с атрибутами DisplayName, Type, ParamType, ItemId, Path.

После всех атрибутов в конце тега присутствует закрывающий слэш "/". Его нужно убрать, потому что для выпадающего списка необходимо создать полноценный закрывающий тег </ParameterDef>:

Важно! ParameterDefs и ParameterDef - это два разных тега. ParameterDefs нужен для создания списка всех параметров и не содержит в себе какие-либо атрибуты. ParameterDef - уникальный параметр, который содержит в себе атрибуты для настройки параметра, например: DisplayName, Type, ParamType, ItemId, Path и т.д.

13.Теперь между открывающим и закрывающим тегом ParameterDef добавим два новых тега Value.

Для XML это означает, что был создан выпадающий список. Где каждый отдельный Value - элемент списка.

- Первый: <Value DisplayName="Выкл">Off</Value>;

- Второй: <Value DisplayName="Вкл">On</Value>.

На примере <Value DisplayName="Выкл">Off</Value> нужно обратить внимание, что "Off" - это текстовое содержимое тега Value, поэтому для него нужно обязательно указывать закрывающий тег </Value>.

14.Повторно импортируем SVG. Теперь благодаря настройке XML появится выпадающий список.

В самом окне импорта просто нажмем Применить.

SVG_scenarii_vrashenie_5

15.После импорта в панели свойств появится выпадающий список со значением по умолчанию "Off":

SVG_scenarii_vrashenie_6

Если его раскрыть, то можно увидеть только "Off" и "On":

SVG_scenarii_vrashenie_7

16.Сделаем небольшое окно для проверки. Разместим в него кнопку с фиксацией и SVG:

SVG_scenarii_vrashenie_8

17.Теперь связываем с помощью зажатия ПК мыши свойство Нажата кнопки с фиксацией со свойством Вращение SVG:

SVG_scenarii_vrashenie_9

Нажмем на SVG и проверим конвертер связей:

SVG_scenarii_vrashenie_10

18.Выставляем тип конвертации Точечная и следующие настройки, если они не выставились автоматически:

Источник	Приемник
False	Off
True	On

SVG_scenarii_vrashenie_11

Закрываем окно конвертации.

19.Назначаем Окно как стартовое и запускаем проект на исполнение:

При нажатии на кнопку с фиксацией у начинает вращаться SVG и при повторном нажатии SVG останавливается.

svg_scenarii_vrashenie_finish_svg_rotate

SVG_scenarii_vrashenie_12

Вращение SVG иконки

Вращение SVG иконки