SVG Два пути и один шар анимации - PullRequest
Новая
       16

SVG Два пути и один шар анимации

2 голосов
/ 07 марта 2019

Эй, это мой первый раз с SVG и анимацией, но я не понимаю ... У меня есть такой код: 

.ball {
  offset-path: path('M417.000,237.000 L54.000,237.000 C26.386,237.000 4.000,214.614 4.000,187.000 L4.000,4.000 M425.500,237.000 L718.500,237.000 C746.114,237.000 768.500,259.386 768.500,287.000 L768.500,470.000');
  offset-distance: 0%;

  animation: red-ball 10s linear infinite;
}

@keyframes red-ball {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="775px" height="474px">
  <path fill-rule="evenodd"  stroke="rgb(79, 191, 159)" stroke-width="4px" stroke-dasharray="2, 8" stroke-linecap="round" stroke-linejoin="bevel" fill="none"
  d="M417.000,237.000 L54.000,237.000 C26.386,237.000 4.000,214.614 4.000,187.000 L4.000,4.000 "/>
  <path fill-rule="evenodd"  stroke="rgb(79, 191, 159)" stroke-width="4px" stroke-dasharray="2, 8" stroke-linecap="round" stroke-linejoin="bevel" fill="none"
  d="M425.500,237.000 L718.500,237.000 C746.114,237.000 768.500,259.386 768.500,287.000 L768.500,470.000 "/>
  <path class="ball" fill-rule="evenodd"  stroke="rgb(79, 191, 159)" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" fill="rgb(79, 191, 159)"
                                  d="M4.500,0.500 C6.709,0.500 8.500,2.291 8.500,4.500 C8.500,6.709 6.709,8.500 4.500,8.500 C2.291,8.500 0.500,6.709 0.500,4.500 C0.500,2.291 2.291,0.500 4.500,0.500 Z"/>
</svg>

Что я хочу сделать:

  1. Я не могу создать комбинацию этих двух первых путей к одному, чтобы получить линейный тонкий шаранимация (когда я конвертирую две фигуры в одну, у меня получается что-то вроде этого: 

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="775px" height="473px">
<path fill-rule="evenodd"  stroke="rgb(79, 191, 159)" stroke-width="4px" stroke-dasharray="2, 8" stroke-linecap="round" stroke-linejoin="bevel" fill="none"
 d="M425.500,236.000 L718.500,236.000 C746.114,236.000 768.500,258.386 768.500,286.000 L768.500,469.000 L425.500,236.000 ZM4.000,186.000 L4.000,3.000 L417.000,236.000 L54.000,236.000 C26.386,236.000 4.000,213.614 4.000,186.000 Z"/>
</svg>
Строка в иллюстраторе имеет круги, но в генерации SVG у нас есть строки .. (предварительное изображение показывает, как я хочу выглядеть): enter image description here Некоторая идеяанимировать шарик из круга в круг, не линейный, а один за другим ... Возможно ли это без JavaScript?

1 Ответ

1 голос
/ 07 марта 2019

  1. Я переписал ваш путь, изменив второй и соединив их в один путь.Я использую тот же путь для offset-path в CSS.

  2. для второй части вашего вопроса, которую я использую stroke-dasharray:.1, 8;.Обратите внимание, что удары очень маленькие: 0,1 единицы.Также я использую stroke-linecap:round; Это добавит круглые "заглавные буквы" к очень маленьким штрихам, делая их похожими на круги.

  3. Чтобы уменьшить многословность и сделать код более читабельнымЯ переместил атрибуты представления для путей в CSS.

Надеюсь, это то, что вы хотели. 

path{stroke:rgb(79, 191, 159);
  stroke-linecap:round; 
  fill:none;
  stroke-width:4px;
  stroke-dasharray:.1, 8;
  stroke-linejoin:round;
}

.ball {
  stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;fill:rgb(79, 191, 159);
  offset-path: path("M768.500,470.000 L768.500,287.000C768.500,259.386 746.114,237.000 718.500,237.000L425.500,237.000L54.000,237.000 C26.386,237.000 4.000,214.614 4.000,187.000 L4.000,4.000");
  offset-distance: 0%;

  animation: red-ball 10s linear infinite;
}

@keyframes red-ball {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 775 474">
  <!---<path  
  d="M417.000,237.000 L54.000,237.000 C26.386,237.000 4.000,214.614 4.000,187.000 L4.000,4.000 "/>
  <path 
  d="M425.500,237.000 L718.500,237.000 C746.114,237.000 768.500,259.386 768.500,287.000 L768.500,470.000 "/>-->
  
  <path 
  d="M768.500,470.000 L768.500,287.000C768.500,259.386 746.114,237.000 718.500,237.000L425.500,237.000L54.000,237.000 C26.386,237.000 4.000,214.614 4.000,187.000 L4.000,4.000"/>
  
  <path class="ball" d="M4.500,0.500 C6.709,0.500 8.500,2.291 8.500,4.500 C8.500,6.709 6.709,8.500 4.500,8.500 C2.291,8.500 0.500,6.709 0.500,4.500 C0.500,2.291 2.291,0.500 4.500,0.500 Z"/>
</svg>

ОБНОВЛЕНИЕ

ОП прокомментировал:

Можете ли вы объяснить немного больше о переписанном

Чтобы полностью изменить путь, вам нужно все изменить.В этом примере: 

 <path 
   d="M425.500,237.000 
      L718.500,237.000 
      C746.114,237.000 768.500,259.386 768.500,287.000
      L768.500,470.000" />

Обратный путь начинается там, где заканчивается предыдущий путь: 

d="M768.500,470.000...

Затем я рисую линию до точки, где заканчивается кривая Безье: 

d=".....
   L768.500,287.000

Теперь я переворачиваю кривую Безье: вторая контрольная точка становится первой, а первая контрольная точка теперь второй.Кривая Безье заканчивается там, где закончилась предыдущая строка: 

d=".....
C768.500,259.386 746.114,237.000 718.500,237.000

Наконец, я рисую линию, которая заканчивается там, где началась предыдущая кривая: 

d="...
   L425.500,237.000"

Собираем все вместе :, этообратный путь: 

 <path 
   d="M768.500,470.000
      L768.500,287.000
      C768.500,259.386 746.114,237.000 718.500,237.000
      L425.500,237.000" />
...