4

Я пытаюсь повторить анимацию следующего GIF в SVG.

введите сюда описание изображения

Код:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100" height="100">
    <path d="M18.53.359h.225A16.684 16.684 0 0130.56 5.12a16.902 16.902 0 014.813 12.007A18.372 18.372 0 0130.18 29.66l-.671.672a18.215 18.215 0 01-11.99 5.163l-.436.012h-.13A16.757 16.757 0 015.12 30.662a16.845 16.845 0 01-4.74-12.08A18.35 18.35 0 015.513 6.114l.307-.311A18.203 18.203 0 0118.095.371l.435-.012zM16.413 2.6c-3.508 0-6.778 1.443-9.558 4.253-3.306 3.299-4.719 7.273-4.102 11.522.495 3.425 2.323 6.938 5.012 9.63l.31.303c4.452 4.235 13.288 7.796 20.265 1.086l.248-.244.236-.248.354-.344a12.592 12.592 0 003.686-11.167 17.578 17.578 0 00-4.95-9.618c-2.689-2.699-6.17-4.532-9.597-5.032-.63-.093-1.267-.14-1.904-.141z">
        <animate
            attributeName="d"
            from="start_path"
            to="end_path"
            dur="0.66s"
            fill="freeze"
            repeatCount="indefinite"   />
    </path>
</svg>

Свободный перевод вопроса Animate SVG path d=… coordinates without stroke от участника @w3debugger.

2

2 ответа 2

6

Возможно, самое простое решение - использовать круг в качестве маски. Затем анимируйте dash array круга

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100" height="100">
    <defs>
        <mask id="wipe">
            <circle cx="18" cy="18" r="16"
                    fill="none" stroke="white" stroke-width="5" stroke-dasharray="100.6" stroke-dashoffset="100.6"
                    transform="rotate(-35,18,18)">
              <animate attributeName="stroke-dashoffset"
                    from="100.6"
                    to="0"
                    dur="0.66s"
                    repeatCount="indefinite"/>
            </circle>
        </mask>
    </defs>
    <path d="M18.53.359h.225A16.684 16.684 0 0130.56 5.12a16.902 16.902 0 014.813 12.007A18.372 18.372 0 0130.18 29.66l-.671.672a18.215 18.215 0 01-11.99 5.163l-.436.012h-.13A16.757 16.757 0 015.12 30.662a16.845 16.845 0 01-4.74-12.08A18.35 18.35 0 015.513 6.114l.307-.311A18.203 18.203 0 0118.095.371l.435-.012zM16.413 2.6c-3.508 0-6.778 1.443-9.558 4.253-3.306 3.299-4.719 7.273-4.102 11.522.495 3.425 2.323 6.938 5.012 9.63l.31.303c4.452 4.235 13.288 7.796 20.265 1.086l.248-.244.236-.248.354-.344a12.592 12.592 0 003.686-11.167 17.578 17.578 0 00-4.95-9.618c-2.689-2.699-6.17-4.532-9.597-5.032-.63-.093-1.267-.14-1.904-.141z" mask="url(#wipe)"/>
</svg>

Возможно, вы захотите настроить анимацию, чтобы добавить короткую паузу в конце. И исчезновение цвета в соответствии с вашей версией GIF.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100" height="100" >
    <defs>
        <mask id="wipe">
            <circle cx="18" cy="18" r="16"
                    fill="none" stroke="white" stroke-width="5" stroke-dasharray="100.6" stroke-dashoffset="100.6"
                    transform="rotate(-35,18,18)">
              <animate id="an_dash" attributeName="stroke-dashoffset"
                    from="100.6"
                    to="0"
                    dur="0.8s"
                    repeatCount="indefinite"/>
            </circle>
        </mask>
    </defs>
    <path id="dash"  d="M18.53.359h.225A16.684 16.684 0 0130.56 5.12a16.902 16.902 0 014.813 12.007A18.372 18.372 0 0130.18 29.66l-.671.672a18.215 18.215 0 01-11.99 5.163l-.436.012h-.13A16.757 16.757 0 015.12 30.662a16.845 16.845 0 01-4.74-12.08A18.35 18.35 0 015.513 6.114l.307-.311A18.203 18.203 0 0118.095.371l.435-.012zM16.413 2.6c-3.508 0-6.778 1.443-9.558 4.253-3.306 3.299-4.719 7.273-4.102 11.522.495 3.425 2.323 6.938 5.012 9.63l.31.303c4.452 4.235 13.288 7.796 20.265 1.086l.248-.244.236-.248.354-.344a12.592 12.592 0 003.686-11.167 17.578 17.578 0 00-4.95-9.618c-2.689-2.699-6.17-4.532-9.597-5.032-.63-.093-1.267-.14-1.904-.141z" mask="url(#wipe)"/>
	 <animate attributeName="opacity" values="1;0" dur="0.8s" repeatCount="indefinite" /> 
</svg>

Свободный перевод ответа Animate SVG path d=… coordinates without stroke от участника @Paul LeBeau.

2

Что-то такое получилось:

let r = 90, 
    rx = 70 / 90,
    ry = 85 / 90,
    circle = Math.PI * 2;

function draw(t) {

  t = (t / 1000) % 1;

  let angle = t * circle,
      largeArc = angle % circle > Math.PI ? 1 : 0,
      x = r * Math.cos(angle),
      y = r * Math.sin(angle);

  path.setAttribute("d", [
   "M", r, 0,
   "A", r, r, 0, largeArc, 1, x, y,
   "L", x * rx, y * ry,
   "A", r * rx, r * ry, 0, largeArc, 0, r * rx, 0,
   "Z"
  ].join(" "));

  path.setAttribute("opacity", 1 - t);

  requestAnimationFrame(draw);
}

requestAnimationFrame(draw)
<svg width=90vw height=90vh viewBox="-100,-100,200,200" >
  <path id="path" transform=rotate(-45) ></path>
</svg>

3
  • 1
    you're as you always are, at your best 31 янв 2020 в 5:30
  • 1
    @Stranger in the Q Красивое решение, замечательно получилось! Только на Enso люди скупы, хотя их там намного больше :) 31 янв 2020 в 7:36
  • @Alexandr_TT они спят =) 31 янв 2020 в 7:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.