LINUX.ORG.RU

анимация координат атрибута «d» элемента «path» в svg

 


0

1

такое возможно? например,

<path d="10,20 60,20 110,20"></path>
и я хочу плавный переход первой пары координат на 10,60 (y + 40px) можно ли такое как то реализовать? Перебором в цикле 30 промежуточных значений заканчивая финальным? Или как?


Ответ на: комментарий от crutch_master

ага, про плангин понял. щас покурю факи на хабре, а вот по терминологии как искать, я правильно создал условие, речь про координаты7?

ghett ()
Ответ на: комментарий от ghett

Перебором в цикле 30 промежуточных значений заканчивая финальным? Или как?

Возможно, что так. Посмотри сорцы.

crutch_master ★★★★★ ()
Ответ на: комментарий от crutch_master

значит. у меня отрезок - от начального положения до конечного. Блиать, как давно это было! Допустим, у меня есть 500 миллисекунд на анимацию, мне нужно разбить отрезок на, например 15 частей, если в секунде 30 кадров (вроде бы уже да...). Вычислить шаг, и загнать его как счётчик в if?

ghett ()
Ответ на: комментарий от crutch_master

animate

у меня смена части значения атрибута path, animate применим к значению атрибута целиком, но ни как не глубже. или я чего то не понимаю? пруфы?

ghett ()
Ответ на: комментарий от ghett

animate применим к значению атрибута целиком

Точно. Значит, скорее всего, дёргать DOM скриптом.

crutch_master ★★★★★ ()
Последнее исправление: crutch_master (всего исправлений: 1)

1) SVG анимирует атрибуты целиком.

2) У вас невалидный путь.

3) Смена только первой координаты = равно перемещение всего пути. Всё верно. Тогда animateMotion и вперёд.

RazrFalcon ★★★★★ ()
Ответ на: комментарий от RazrFalcon

про анемейтмоушн не понял, к чему он, в статье http://css-live.ru/articles/rukovodstvo-po-svg-animaciyam-smil.html рассказывается, про движение вдоль курвы. А вот предыдущая глава «Пример <animate>: морфинг контуров» содержит нужную инфу

Чтобы анимировать SVG-контур, нужно задать для attributeName значение d, а затем указать для from и to значения, соответствующие начальной и конечной формам.

но не работает, ЧЯДНТ?*?Г!?

<!DOCTYPE html>
<html>
<head>
  <title>share</title>
</head>
<body>
<svg width="100%" height="100" viewBox="500 0 100 170">
  <g>
    <path
       style="fill:none;stroke:#00ba00;stroke-width:7.2;stroke-linecap:round;stroke-opacity:0.43349755;"
       d="M 403.05087,51.301032 645.48748,67.463473 481.84276,137.164"
       id="path4136">
       <animation
        attributeName="d"
        dur="500ms"
        repeatCount="undefined"
        from="M 403.05087,51.301032 645.48748,67.463473 481.84276,137.164"
        to="M 403.05087,67.463473 242.43661,0 -10e-6,69.700527"></animation>
    </path>
  </g>
</svg>
</body>
</html>

ghett ()
Ответ на: комментарий от RazrFalcon

объясните

кликаешь на path с тремя «точками» и две крайние меняют своё местоположение

Советую

спасибо

ghett ()
Ответ на: комментарий от RazrFalcon

Курю это http://codepen.io/noahblon/post/an-intro-to-svg-animation-with-smil , пока не работает

<svg width="100%" height="100" viewBox="500 0 100 170">
    <path
       style="fill:none;stroke:#00ba00;stroke-width:7.2;stroke-linecap:round;stroke-opacity:0.43349755;">
       <animation
        attributeName="d"
        dur="500ms"
        repeatCount="undefined"
        values="
          M 403.05087,51.301032 645.48748,67.463473 481.84276,137.164;
          
          M 403.05087,67.463473 242.43661,0 -10e-6,69.700527;"
        />
    </path>
</svg>

ghett ()
Ответ на: комментарий от RazrFalcon

действительно, чёт не проснулся ещё, извините. в общем, подставил свои значения в работающий пример и добавил начало по клику

<svg viewbox="0 0 600 600">
  <style>
    #push {
      stroke: #1EB287;
      stroke-width:3;
      fill:none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  </style>
  <path id="push" 
  d="m 105,32.362205 40,5 -25,10;">
    <animate 
             attributeName="d" 
             dur="550ms" 
             repeatCount="1"
             begin="push.click"
             fill="freeze"
             values="m 105,32.362205 40,5 -25,10;

             M 119.89975,37.286699 145,37.362205 l 0.001,14.924494;"/>
  </path>
</svg>
только вот можно ли как то штатными средствами svg запретить срабатывание анимации при повторном клике? или через query всё таки придётся?

ghett ()
Ответ на: комментарий от ghett

Насколько я знаю, в begin можно указать js код, в котом уже можете проверять, как-то.

RazrFalcon ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.