Анимация в Masterscada 4D

[box210277]

Народ подскажите, может кто встречал примерчик как сделать анимацию SVG в MasterSCADA 4D.

Чет сижу туплю. Допустим простенький квадрат.


<svg width="200mm" height="200mm" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<rect x="100" y="100" height="110" width="110"
style="stroke:#ff0000; fill: #0000ff">
<animateTransform attributeName="transform" type="rotate"
from="0 155 155" to="360 155 155" dur="2s" repeatDur="indefinite"/>
</rect>

</svg>

[melky]

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

[box210277]

melky Да нет, вопрос не в браузере. А в связке MasterSCADA с SVG. Примитивные вещи, например изменение цвета, делаются на ура. И есть в уроках. А вот ту же самую простую анимацию, допустим вращение квадрата, я найти нигде не могу.

[melky]

Изменение цвета и анимация это разные вещи. Вы анимированный квадрат используете как картинку, он показывает исходный квадрат? если да, то браузер не понимает анимацию.
Opera, Chrome, Edge крутят ваш квадрат на ура.

[box210277]

Изменение цвета и анимация это разные вещи.

Выше я писал:
Примитивные вещи, например изменение цвета, делаются на ура. И есть в уроках.


Opera, Chrome, Edge крутят ваш квадрат на ура

Все замечательно крутится в браузерах. Как сделать чтобы он реагировал в Mastrscada, например есть параметр BOOL при 1 он крутится а при 0 нет? Я вот про это спрашиваю.

[Юрий Горелый2]

Выше я писал:



Все замечательно крутится в браузерах. Как сделать чтобы он реагировал в Mastrscada, например есть параметр BOOL при 1 он крутится а при 0 нет? Я вот про это спрашиваю.

https://www.youtube.com/watch?v=nitYduDHsak&t=823s

[box210277]

Юрий Горелый2

Писал выше уже:
Примитивные вещи, например изменение цвета, делаются на ура.

В видео нету анимации. Задал вопрос в техподдержку, у них нет ни видео ни документа, в котором описывался бы процесс создания.

[Юрий Горелый2]

Юрий Горелый2

Писал выше уже:

В видео нету анимации. Задал вопрос в техподдержку, у них нет ни видео ни документа, в котором описывался бы процесс создания.

мне кажется в видео показано, как Параметр svg файла связать с Параметром в Мастерскаде.
Соответственно лично я не вижу разницы в том, чтобы изменять цвет в svg файле или его скажем размер. Суть действий одинаковая.

Опять же достаточно не однозначный термин "анимация" . для меня изменения цвета более чем достаточно.

[box210277]

В общем ответила мне тех.поодержка, спасибо им огромное. Делается это приблизительно так:

Рисуем допустим в InkScape квадрат, получаем такой SVG



<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="60" height="60" version="1.1" viewBox="0 0 16.000 16.000" xmlns="http://www.w3.org/2000/svg">
<rect x="2.000" y="2.000" width="8.000" height="8.000" fill="none" stroke="#070707" stroke-linecap="round" stroke-linejoin="round" stroke-width=".47744">
</rect>
</svg>


Теперь немного его поправим:
1. Сделаем 2 квадрата, один в остановленном вид, другой вращается
2. Сгруппируем все, указав для вращающегося display=none.
3. Добавим стиль

В итоге получил вот что:



<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="60" height="60" version="1.1" viewBox="0 0 16.000 16.000" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
<![CDATA[
#rectangle.Start #rect_stoped{display:none;}
#rectangle.Start #rect_started{display:inline;}
]]>
</style>
<g id="rectangle">
<g id="rect_stoped" display="inline">
<rect x="2.000" y="2.000" width="8.000" height="8.000" fill="none" stroke="#070707" stroke-linecap="round" stroke-linejoin="round" stroke-width=".47744">
</rect>
</g>

<g id="rect_started" display="none">
<rect x="2.000" y="2.000" width="8.000" height="8.000" fill="none" stroke="#070707" stroke-linecap="round" stroke-linejoin="round" stroke-width=".47744">
<animateTransform attributeName="transform" type="rotate" from="0 6 6" to="360 6 6" dur="5s" repeatDur="indefinite"/>
</rect>
</g>
</g>
</svg>


Теперь как это все запихнуть в Masterscada4D

Создаем файл с таким же именем как и SVG только XML(у меня drawing.svg и drawing.xml) содержимое:



<?xml version="1.0"?>
<SvgDef xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" CreateCommonAvary="false">
<ParameterDefs>
<ParameterDef Name="Rotation" DisplayName="Вращение" Type="STRING" ParamType="Attribute" ItemId="rectangle" Path="class">
<Value DisplayName="Выкл">Stop</Value>
<Value DisplayName="Вкл">Start</Value>
</ParameterDef>
</ParameterDefs>
</SvgDef>


Ну и все, теперь импортируем его в Masterscada соответственно при импорте появляется окошко в котором уже можно выбирать:

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

Вот и все теперь вставляем его куда надо а на появившееся свойство Вращение кидаем параметр. Как то так.

[box210277]

мне кажется в видео показано, как Параметр svg файла связать с Параметром в Мастерскаде.

Там увы только 4 параметр fill, stroke, height, width



Опять же достаточно не однозначный термин "анимация" . для меня изменения цвета более чем достаточно.

Ну как бы в SVG это совсем не так, тот же цвет это изменение свойства SVG, тоже самое относится и к толщине

[box210277]

В продолжение темы анимации, мой друг посмотрел на все это хозяйство сказал ну его нафиг, будем делать все через CSS. В итоге SVG приобрел такой вид:



<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="60" height="60" version="1.1" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
<![CDATA[
#rectangle {
width:40px;
height:40px;
}
#rectangle.Start{
-webkit-animation: shakeY 2s infinite linear;
}
@keyframes shakeY {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

20%,
40%,
60%,
80% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
}
]]>
</style>
<g id="rectangle">
<rect x="10" y="10" width="40" height="40" fill="none" stroke="#070707" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/>
</g>
</svg>


Сама прыгалка shakeY найдена на просторах интернета, немного поправим XMLку:



<?xml version="1.0"?>
<SvgDef xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" CreateCommonAvary="false">
<ParameterDefs>
<ParameterDef Name="Jump" DisplayName="Прыгать" Type="STRING" ParamType="Attribute" ItemId="rectangle" Path="class">
<Value DisplayName="Выкл">Stop</Value>
<Value DisplayName="Вкл">Start</Value>
</ParameterDef>
</ParameterDefs>
</SvgDef>



Ну и далее все как обычно Новое окно, Импорт SVG, вставляем куда нужно, привязываем параметр. И вуаля.

[melky]

В отличии от первоначального варианта в браузере ничего не попрыгало...

[box210277]

melky

Чтобы в обычном браузере посмотреть надо поправить
<g id="rectangle">

на

<g id="rectangle" class="Start">


Так как этот класс дергается через xml Masterscada'ой. Тогда при открытии браузером квадрат будет прыгать.