Анимация SVG в MasterSCADA 4D

[moskvichov]

Уважаемые форумчане.

Начал тут смотреть, изучать MasterSCADA 4D, дошел до построения маленького проекта. И вот тут никак не могу понять, и найти информацию в интернете. Может кто из Вас поможет.

Вопрос в анимации SVG объекта. Как ее сделать? Импорт стандартных из библиотеки работает на ура, но хочется своего.

Если можно объясните на пальцах, пусть простой квадрат в SVG, при изменении BOOL параметра в 1 вращается, при 0 останавливается.

Заранее спасибо.

[petr2off]

Посмотри в Ютубе. Там ролик обучающий есть.
Примитивный правда, но все основные моменты отражены.

[moskvichov]

Это тот который со светофором? Так там нет анимации, а другой я что то не нашел.

[petr2off]

Проблем с вращение квадрата вообще не вижу.
Есть атрибут у квадрата (как у многих фигур) - Угол поворота.
Написал процедурку вида:
ANG := 360*SIN(T);
T:=T + 0.1;
If T > 12 then T:= 0; END_IF
ANG - выходной параметр. T локальная переменная.
Выход ANG связал с атрибутом и все - квадрат вращается.

[moskvichov]

petr2off А если это не квадрат будет????

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

Рисуем допустим в 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

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

[moskvichov]

В продолжение темы анимации, мой друг посмотрел на все это хозяйство сказал ну его нафиг, будем делать все через 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, вставляем куда нужно, привязываем параметр. И вуаля.