Эта анимация SVG, кажется, не хочет плавного перехода, как мне решить эту проблему? - PullRequest
Новая
       14

Эта анимация SVG, кажется, не хочет плавного перехода, как мне решить эту проблему?

0 голосов
/ 24 ноября 2018

Я пытаюсь сделать SVG-анимацию, используя объявление SMIL, но вместо плавного перехода между двумя путями я получаю немедленный переход от одного к другому, и он, кажется, не зависит от времени дляпродолжительность анимации.Может кто-нибудь помочь мне с этим, я действительно хотел бы сделать этот плавный переход, и желательно в SMIL из-за размера файла.

Вот код: 

<svg
   width="130mm"
   height="130mm"
   viewBox="0 0 130 130">
    <path d="M29.392899 105.03816999999998C31.388397 106.80194999999998 33.532246 108.42680000000001 35.757774 109.88056 37.428773 110.97210000000001 39.145833 111.96722 40.880677 112.85228000000001L35.993332 109.52785Z" fill-rule="nonzero" fill="#070707">
        <animate dur="8s" repeatCount="indefinite" attributeName="d" values="M29.392899 105.03816999999998C31.388397 106.80194999999998 33.532246 108.42680000000001 35.757774 109.88056 37.428773 110.97210000000001 39.145833 111.96722 40.880677 112.85228000000001L35.993332 109.52785Z;M27.107598 102.89224000000002C31.114479 106.89909999999998 36.14859 110.43669 41.10393 112.96472999999997L30.967228 104.24995000000001 21.295187 95.93468999999999C23.088927 98.51334000000003 24.941479 100.72611999999998 27.107598 102.89224000000002Z;M29.392899 105.03816999999998C31.388397 106.80194999999998 33.532246 108.42680000000001 35.757774 109.88056 37.428773 110.97210000000001 39.145833 111.96722 40.880677 112.85228000000001L35.993332 109.52785Z" fill="freeze"
          calcMode="spline"
          keySplines="0.1 0 0.51 1; 0.61 0.01 0.89 1">
   </path>
</svg>

1 Ответ

0 голосов
/ 25 ноября 2018

Как сказал Роберт, вам нужно одинаковое количество и тип команд пути в том же порядке для каждого анимированного значения.Это то, для чего редактирование в графическом интерфейсе полезно только частично.В вашем случае это может показать вам два отрезка и два кубических Безье в одном и том же порядке, но этого недостаточно: пути должны имеют некоторые свойства, которые большинство графических интерфейсов не показывают

  • (топологически) одна и та же начальная точка,
  • в том же направлении,
  • , и для замкнутых путей вы должны точно так же записать последнюю точку: либо вы повторяете начальную точкукак конечную точку все время, или вы оставляете ее отключенной и все время закрываете путь неявным образом.

Короче говоря: чтение команд пути невозможно.

Ваш первый путь (округлен до нормальных значений и повторяет все команды пути для ясности) 

M 29.3929,105.038
C 31.3884,106.802 33.5322,108.427 35.7578,109.881
C 37.4288,110.972 39.1458,111.967 40.8807,112.852
L 35.9933,109.528
Z

, тогда как второй путь был 

M 27.1076,102.892
C 31.1145,106.899 36.1486,110.437 41.1039,112.965
L 30.9672,104.25
L 21.2952,95.9347
C 23.0889,98.5133 24.9415,100.726 27.1076,102.892
Z

Его четвертая точка (в конце второй команды L) должна быть начальная точка, затем продолжайте с пятой / первой (идентичной), второй, третьей, затем имплицитно закройте путь с помощью команды Z. 

M 21.2952,95.9347
C 23.0889,98.5133 24.9415,100.726 27.1076,102.892
C 31.1145,106.899 36.1486,110.437 41.1039,112.965
L 30.9672,104.25
Z
...