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

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

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

Код HTML:

---

<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 Да нет, вопрос не в браузере. А в связке MasterSCADA с SVG. Примитивные вещи, например изменение цвета, делаются на ура. И есть в уроках. А вот ту же самую простую анимацию, допустим вращение квадрата, я найти нигде не могу.

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

Цитата:

---

Сообщение от melky

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

---

Выше я писал:

Цитата:

---

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

---

Цитата:

---

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

---

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

Цитата:

---

Сообщение от box210277

Выше я писал:



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

---

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

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

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

Цитата:

---

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

---

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

Цитата:

---

Сообщение от box210277

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

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

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

---

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

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

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

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

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

Цитата:

---

Сообщение от Юрий Горелый2

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

---

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

Цитата:

---

Сообщение от Юрий Горелый2

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

---

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

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

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

на

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


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