Вопросы Теги

Как я могу анимировать путь SVG через anime.js? [Дубликат]

Основная проблема с кодом, показанным OP, заключается в том, что i никогда не читается до второго цикла. Чтобы продемонстрировать, представьте, что вы видите ошибку внутри кода 

funcs[i] = function() {            // and store them in funcs
    throw new Error("test");
    console.log("My value: " + i); // each should log its value.
};

Ошибка на самом деле не происходит до тех пор, пока funcs[someIndex] не будет выполнен (). Используя эту же логику, должно быть очевидно, что значение i также не будет собрано до этой точки. Как только исходный цикл завершится, i++ добавит i к значению 3, что приведет к сбою условия i < 3 и завершению цикла. На этом этапе i является 3, поэтому, когда используется funcs[someIndex](), и i оценивается, он равен 3 - каждый раз.

Чтобы пройти мимо этого, вы должны оценить i, поскольку он встречается. Обратите внимание, что это уже произошло в форме funcs[i] (где есть 3 уникальных индекса). Существует несколько способов захвата этого значения. Один из них - передать его в качестве параметра функции, которая уже несколько раз показана здесь.

Другой вариант - построить объект функции, который сможет закрыть эту переменную. Это может быть выполнено таким образом

jsFiddle Demo 

funcs[i] = new function() {   
    var closedVariable = i;
    return function(){
        console.log("My value: " + closedVariable); 
    };
};

1
задан nb_ck 13 June 2016 в 03:18
поделиться

2 ответа

Как работает анимация Se7ensky, так это то, что она использует стандартную технику тире анимации, но зажимает анимированный штрих контуром, изображающим рисованный внешний вид логотипа.

Таким образом, используется стандартная техника анимации тире следующим образом. Вы принимаете стандартную строку: 

<svg>
  <path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>

Затем вы добавляете к ней тире и анимируете ее позицию (stroke-dashoffset). 

.pen {
  stroke-dasharray: 280 280;
  stroke-dashoffset: 280;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 280;
  }

  to {
    stroke-dashoffset: 0;
  }
}
<svg>
  <path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>

Наконец, чтобы получить визуальную переменную ширину штриха примера Se7ensky, вы обрезаете эту строку с контуром вашего логотипа.

Итак, давайте притворимся, что этот простой путь ниже представляет ваш логотип: 

<svg>
  <path stroke="black" stroke-width="1" fill="lightgrey"
        d="M 40,50
           C 110,55 195,60, 265,55
           C 290,55 290,85 265,85
           C 195,85 110,85 40,100
           C 0,100 0,50 40,50 Z"/>
</svg>

Мы превращаем это в элемент clipPath и используем чтобы подрезать наш анимированный штрих до формы нашего логотипа: 

.pen {
  stroke-dasharray: 280 280;
  stroke-dashoffset: 280;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 280;
  }

  to {
    stroke-dashoffset: 0;
  }
}
<svg>
  <clipPath id="logo">
    <path d="M 40,50
             C 110,55 195,60, 265,55
             C 290,55 290,85 265,85
             C 195,85 110,85 40,100
             C 0,100 0,50 40,50 Z"/>
  </clipPath>
  
  <path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#logo)"/>
</svg>

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

Затем анимируйте этот путь, используя метод dashoffset while

Обновить

Вот заключительная демонстрация с более реалистичной формой буквы: 

.pen {
  fill: none;
  stroke: red;
  stroke-width: 18;
  stroke-linecap: round;
  clip-path: url(#logo);

  stroke-dasharray: 206 206;
  stroke-dashoffset: 206;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 206;
  }

  to {
    stroke-dashoffset: 0;
  }
}
<svg>
  <defs>
    <clipPath id="logo">
      <path d="m85.77 49.77c-10.59 8.017-27.38 21.95-41.58 21.95-6.396 0-12.99-2.481-12.39-9.735l0.3998-4.199c38.38-12.03 48.17-26.15 48.17-35.5 0-7.635-7.995-9.162-14.39-9.162-25.98-0.1909-54.97 25.39-54.17 50.39 0.3998 12.6 7.196 25.01 21.79 25.01 19.79 0 41.78-17.94 53.97-31.5zm-52.37-1.336c5.397-12.6 16.99-21.76 26.98-24.24 1.399-0.3818 2.399 0.7635 2.399 2.1 0.1999 3.245-11.79 16.42-29.38 22.14z"/>
    </clipPath>
  </defs>
  
  <path d="m39.02 51.1c5.361-1.771 10.04-4.182 15.98-7.857 6.019-3.933 9.841-7.728 12.77-10.71 1.403-1.369 12.03-15.97-7.857-13.93-9.824 1.01-19.62 8.3-26.16 14.91-6.538 6.61-10.42 14.51-11.96 22.23-2.559 12.76 1.807 26.19 21.07 23.48 13.96-1.965 32.59-14.55 43.66-25.54" class="pen"/>
</svg>

13
ответ дан Paul LeBeau 26 August 2018 в 09:33
поделиться

Пример выглядит как комбинация путей svg и отложенных анимаций.

Это сообщение в блоге от CSS-Tricks очень хорошо объясняет это (обратите внимание, что svg должен иметь штрихи для этого): https://css-tricks.com/svg-line-animation-works/

Ниже приведено руководство по использованию штрих-кода (используемого в примере), которое может быть полезно: https://css-tricks.com/almanac/properties/s/stroke-dashoffset/

1
ответ дан Diego 26 August 2018 в 09:33
поделиться
Другие вопросы по тегам:

Похожие вопросы: