Страница 2 из 2 ПерваяПервая 12
Показано с 11 по 13 из 13

Тема: Анимация в Masterscada 4D

  1. #11

    По умолчанию

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

  2. #12
    Пользователь
    Регистрация
    27.11.2011
    Адрес
    Краснодар
    Сообщений
    10,583

    По умолчанию

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

  3. #13

    По умолчанию

    melky

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

    на

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


    Так как этот класс дергается через xml Masterscada'ой. Тогда при открытии браузером квадрат будет прыгать.
    Последний раз редактировалось box210277; 01.08.2022 в 14:41.

Страница 2 из 2 ПерваяПервая 12

Похожие темы

  1. GIF Анимация для MasterSCADA
    от mkv в разделе Master SCADA 3
    Ответов: 5
    Последнее сообщение: 01.04.2022, 12:02
  2. Анимация при отсутсвии связи
    от 1982lm в разделе Master SCADA 3
    Ответов: 2
    Последнее сообщение: 12.10.2020, 13:21
  3. Собственная анимация в MASTERSCADA
    от Vitorgan в разделе Master SCADA 3
    Ответов: 23
    Последнее сообщение: 11.11.2019, 14:49
  4. Анимация заполнение резервуара
    от kingoff в разделе ПЛК (среда MasterSCADA 4D)
    Ответов: 1
    Последнее сообщение: 30.05.2019, 21:15
  5. Анимация в визуализации
    от Шура в разделе ПЛК1хх
    Ответов: 7
    Последнее сообщение: 10.04.2009, 18:52

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •