Облегчение animateMotion в SVG - PullRequest
Новая
       14

Облегчение animateMotion в SVG

1 голос
/ 12 апреля 2019

Я хочу применить замедление к тегу animateMotion.

Я не понимаю, какие атрибуты имеют отношение к анимации фигуры: если я правильно понял, calcMode = "spline" - этотребуется вместе с определением keyTimes и keySplines ;а как насчет использования keySplines и значений ?

Однако я попытался вставить время в мою анимацию, но что-то пошло не так: 

        <g style="transform-origin:50%;transform: rotate(180deg);">
          <path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
          <circle cx="0" cy="0" r="5" fill="#333333">
            <animateMotion dur="0.2s" repeatCount="once" fill="freeze" calcMode="spline" keyPoints="0.25;0.50;0.75;1" keyTimes="0;0.25;0.75;1">
              <mpath xlink:href="#verticalMotionPath"/>
            </animateMotion>
          </circle>
        </g>

Моя цель - применить к этому примеру время, которое можно извлечь изинструменты типа этот

Ответы [ 2 ]

2 голосов
/ 12 апреля 2019

Вы указываете calcMode="spline", но вы не указали атрибут keySplines.

Значение keySplines можно просто скопировать из инструмента редактирования сплайнов. 

<circle cx="0" cy="0" r="5" fill="#333333">
  <animateMotion dur="2.2s" repeatCount="once" fill="freeze"
                 calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
    <mpath xlink:href="#verticalMotionPath"/>
  </animateMotion>
</circle>

Полная демонстрация (я замедлил анимацию, чтобы вы могли видеть, что она работает). 

<!DOCTYPE HTML>
  <html>
    <body>
      <?xml version="1.0"?>
    <svg width="400" height="400" viewBox="0 0 200 200"
        xmlns="http://www.w3.org/2000/svg" version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink" style="background:aquamarine">
        <style>
        path {
          animation-name:animateDash;
          animation-duration:5s;
          animation-iteration-count:once;
          animation-fill-mode:forwards;
        }
        @keyframes animateDash {
          from{stroke-dasharray:0,2305}
          to  {stroke-dasharray:2305,0}
        }
        </style>

        <g style="transform-origin:50%;transform: rotate(180deg);">
          <path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
          <circle cx="0" cy="0" r="5" fill="#333333">
            <animateMotion dur="2.2s" repeatCount="once" fill="freeze"
                           calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
              <mpath xlink:href="#verticalMotionPath"/>
            </animateMotion>
          </circle>
        </g>

        <g style="transform-origin:50%;transform: rotate(60deg);">
          <path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round" />
          <circle cx="0" cy="0" r="5" fill="#333333">
            <animateMotion dur="0.2s" repeatCount="once" fill="freeze">
              <mpath xlink:href="#verticalMotionPath"/>
            </animateMotion>
          </circle>
        </g>

        <g style="transform-origin:50%;transform: rotate(-60deg);">
          <path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="blue" fill="none" stroke-linecap="round" stroke-linejoin="round" />
          <circle cx="0" cy="0" r="5" fill="#333333">
            <animateMotion dur="0.2s" repeatCount="once" fill="freeze">
              <mpath xlink:href="#verticalMotionPath"/>
            </animateMotion>
          </circle>
        </g>

    </svg>
  </body>
</html>
1 голос
/ 12 апреля 2019

Вот как бы я это сделал, хотя я не использую animateMotion.

Поскольку ваш путь состоит из линий, вы можете определить значения для <animateTransform> следующим образом: 

Your path's          d="M100, 100 L100, 47 146, 73"
the animation's  values="100, 100; 100, 47;146, 73"

Это рабочий пример: 

<svg width="400" height="400" viewBox="0 0 200 200" style="background:aquamarine">

        <path id="theMotionPath" d="M100, 100 L100, 47 146, 73" stroke-width="5px" stroke="antiquewhite" fill="none" stroke-linecap="round" stroke-linejoin="round" />
  
  <circle r="5" >   
     <animateTransform 
    	attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="100,100; 100,47; 146,73" 
        keySplines= ".5 0 .5 1; 0 .75 .25 1";
        calcMode="spline" 
        dur="4s" 
        repeatCount="indefinite" />
  </circle>

</svg>

Длина keySplines должна быть равна длине значений - 1. В этом случае values.length = 3, таким образом, keySplines.length = 2, т. Е. Движение от первого до второго значения определяется первый ключевой сплайн; движение от второго к третьему значению определяется вторым сплайном ключа. Каждое значение keySplines определяет 2 контрольные точки кривой Безье.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...