Есть svg, нужно отображать его рисуя линии (его кривые) в зависимости от прокручивания колесика. То есть крутишь колесико, рисуются линии. Когда один свг нарисовался, нужно чтобы он медленно исчез и появился другой. На нем тоже нужно отрисовать одну линии крутя колесико. и тд. Так 25 слайдов.
Подскажите куда глядеть, и что для этого лучше всего подойдет?
Ответ
Сначала измеряется длина пути патча с помощью команды getTotalLength
Ниже пример измерения длины линии зеленого чекбокса.
Далее полученная цифра подставляется в stroke-dasharray и stroke-dashoffset при этом получается, что длина пробела становится равной длине линии. Затем начинается плавное уменьшение stroke-dashoffset. Таким образом достигается эффект анимации рисования линии с чистого листа. У stroke-dasharray два атрибута. Первый задает длину штриха, второй - пробел, но если они равны, можно ставить только одну цифру. В примере ниже я сделал двойной эффект - сначала исчезновение контура, затем его рисование с чистого листа. Для стирания контура stroke-dashoffset ставится в минимальное значение, затем следует плавное увеличение до максимума. Другими словами, если stroke-dashoffset стремится к нулю, то происходит рисование линии. Если stroke-dashoffset увеличивается, то идет процесс стирания линии. Практика и теория здесь
Ещё пример
Комментариев нет:
Отправить комментарий