LINUX.ORG.RU
Форум — Web-development  

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

 


0

1

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

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

★

Последнее исправление: ghett (всего исправлений: 2)
← Своя HomePage в Firefox
webpack - как запаковать bootstrap 4 в bundle? →
Ответ на: комментарий от crutch_master

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

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

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

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

Вычислить шаг, и загнать его как счётчик в if?

Нет. https://developer.mozilla.org/ru/docs/Web/SVG/Элемент/animate Вот пример: view-source:https://mdn.mozillademos.org/files/3258/animate.svg

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

animate

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

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

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

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

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

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

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

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

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

типа, мне в морфинг контуров?

ghett ★
() автор топика
Ответ на: комментарий от 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 ★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Своя HomePage в Firefox
Web-development
webpack - как запаковать bootstrap 4 в bundle? →