Основа SVG и анализ ее приложений для анимации

Автор этой статьи: Цянь Хунчан (Flash Fire)

1. Почему мы используем svg

Сравните с png высокого разрешения

Продолжить сравнение

Те же текстуры высокого разрешения, векторная графика не боится увеличения, да и размер небольшой. Здесь следует отметить один момент: поскольку SVG хранит информацию о точках, линиях и поверхностях, она не имеет ничего общего с разрешением и размером графики, а только со сложностью изображения, поэтому пространство для хранения, занимаемое файлами изображений, обычно меньше, чем у png.
Мощный инструмент для оптимизации SEO и доступности, т. к. изображения SVG размечены с помощью XML (Extensible Markup Language [англ. Extensible Markup Language, сокращенно: XML]) тегов относятся к информационным символам, понятным компьютерам. Статьи, содержащие различную информацию и т. д.) чтобы разметить сборки, браузер печатает каждую точку и линию, рисуя их, а не заполняя определенные места предопределенными пикселями. Это гарантирует, что изображения SVG могут адаптироваться к разным размерам и разрешениям экрана.
Поскольку они определены в XML, изображения SVG более гибкие, чем изображения JPG или PNG, и мы можем взаимодействовать с ними с помощью CSS и JavaScript. Настройки изображения SVG могут содержать CSS и JavaScript. В рамках основанных на данных представлений, таких как react и vue, операции SVG более удобны. (Ниже мы поделимся с вами некоторыми небольшими практиками анимации SVG в нашем проекте)
На уровне приложений SVG предоставляет некоторые эффекты редактирования изображений, такие как маскирование и обрезка, применение фильтров и многое другое. А SVG — это просто текст, поэтому его можно эффективно сжать с помощью GZip.

2. Понимать общие элементы SVG и их использование

Большинство руководств можно найти в Интернете, вот некоторые моменты, которые, я думаю, стоит упомянуть.

2-1. SVG-теги

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg  width="300" height="300" viewBox="0, 0, 100, 200"  xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="49" stroke="black"
    stroke-width="2" fill="red" />
</svg>

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" viewBox="0, 0, 100, 200"  xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>

Это форма и некоторые атрибуты, которые будут отображаться в 99% SVG, включая два атрибута области просмотра, ширину и высоту, атрибут представления viewBox и атрибут xmlns. Давайте посмотрим построчно

Первая строка: содержит объявление XML, объявление XML на самом деле похоже на объявление DTD документа HTML. Аналогия объявления HTML5

<!DOCTYPE html>

Метод объявления документа SVG (акцент: вообще, если SVG используется в HTML, мы не можем написать такое объявление документа, но если это отдельный файл SVG, его нужно написать, иначе браузер может его не распознать)

<?xml version="1.0" standalone="no"?>

что мы видимstandaloneАтрибут должен указать, является ли объявление xml независимым, если не standalone="no", то внешний dtd будет введен позже, как показано во второй и третьей строках.versionАтрибут используется для указания версии спецификации, которой соответствует документ SVG. это разрешено только для корневого элемента<svg>использовать на. Это чисто иллюстрация и не влияет на рендеринг или обработку. Хотя он принимает любое число, допустимы только 1.0 и 1.1.

Четвертая строка: это начало содержимого SVG.

<svg width="300" height="300" viewBox="0, 0, 100, 200"  xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>

Атрибут xmlns — это пространство объявления XML для SVG, эта часть похожа на xmlns=" в HTML.www.w3.org/1999/xhtml"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Свойства ширины и высоты можно понимать как размер холста. Это правильный размер холста. Например:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=100 height="100">
    <circle cx="50" cy="50" r="49" stroke="black"
    stroke-width="1" fill="red" />
</svg>

Текущий размер холста этого SVG — холст 100*100, и мы рисуем круг с радиусом 49 и штрихом в 1 единицу. Просто залил без проблем. Что вы видите, то и получаете. Тогда давайте попробуем изменить ширину и высоту. Обнаружить

<svg  
    style="background:#007fff"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="300"
    height="300">
    <circle cx="50" cy="50" r="49" stroke="black"
    stroke-width="1" fill="red" />
</svg>

Мы видим, что синяя область — это заданные нами ширина и высота, а графическая часть — это по-прежнему круг, который не изменился. Итак, мы понимаем роль ширины и высоты.

viewBox, а затем с помощью свойства viewBox давайте изменим код

<svg 
    style="background:#007fff"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    <!-- viewBox定义-->
    viewBox="0, 0, 100, 100"
    width="300"
    height="300" >
    <circle cx="50" cy="50" r="49" stroke="black"
    stroke-width="1" fill="red" />
</svg>

Мы видим, что синяя область остается прежнего размера, в то время как наш круг стал настолько большим, что заполняет весь холст. Да, ваша идея верна, так называемый атрибут viewBox можно понимать как операцию со скриншотом, когда мы общаемся в WeChat. Четыре параметра свойства viewBox, первые два представляют собой начальную точку снимка экрана, а последние два представляют собой конечную точку снимка экрана, оба из которых основаны на верхнем левом углу в качестве источника. Наконец, растяните скриншот и поместите его на холст SVG, и он станет SVG, который мы видели выше. Давайте снова изменим viewBox на 0, 0, 50, 50, чтобы понять

<svg 
    style="background:#007fff"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    viewBox="0, 0, 50, 50" 
    width="300"
    height="300" >
    <circle cx="50" cy="50" r="49" stroke="black"
    stroke-width="1" fill="red" />
</svg>

Так что вся логика наверное такая

2-2.path тег

В SVG вы можете думать о пути как о самом основном элементе рисования.Поскольку он является самым основным и неотделимым от своей оригинальности, он может создавать различные сложные эффекты рисования. Таким образом, контур — это самый простой и самый сложный элемент рисования.

Основные свойства пути и что они представляют

Нам известен тег пути, наиболее важным атрибутом является атрибут d, представляющий собой набор директив и параметров. В значении атрибута d мы видим кучу очень сложных командных строк.

<path d="
    M73.8616812,68.8664775
    L74.5015359,74.5939423
    L68.1746283,71.7969507
    C66.2299599,72.4159872 64.1377269,72.7711218 61.9444643,72.7711218
    C51.9719158,72.7711218 43.8883163,65.7823167 43.8883163,57.1611168
    C43.8883163,48.5399169 51.9719158,41.5511118 61.9444643,41.5511118
    C71.9164005,41.5511118 80,48.5399169 80,57.1611168
    C80,61.8286883 77.6181486,66.006419 73.8616812,68.8664775" id="Fill-1" fill="#FFFFFF"></path>

На самом деле, вам совершенно не нужно испытывать отвращение, я продолжаю ломать и ломать его.

эти директивы в атрибуте d

инструкция	параметр	имея в виду
M	x y	Переместите кисть в точку (x, y)
L	x y	Кисть рисует отрезок от текущей точки до точки (x,y)
H	x	Кисть рисует горизонтальный отрезок от текущей точки до точки (x, y0), y0 представляет собой координату кисти по оси y перед рисованием, то есть ось y остается неизменной
V	y	Кисть рисует вертикальный отрезок от текущей точки до точки (x0,y), x0 представляет собой координату кисти по оси x перед рисованием, то есть ось x остается неизменной
A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	Кисть рисует дугу из текущей точки в точку (x,y)
C	x1 y1, x2 y2, x y	Кисть рисует кубическую кривую Безье от текущей точки до точки (x,y)
S	x2 y2, x y	Специальная версия кубической кривой Безье (без первой контрольной точки)
Q	x1 y1, x y	нарисовать квадратичную кривую Безье в точку (x, y)
T	x y	Специальная версия квадратичной кривой Безье (контрольные точки опущены)
Z	нет параметров	Нарисуйте замкнутую фигуру, если в атрибуте d не указана команда Z, то вместо замкнутой фигуры нарисуйте отрезок.

Это все инструкции в пути пути, где утолщенная часть является общей базовой инструкцией, относительно проста для понимания. Каждая инструкция имеет соответствующие команды нижнего регистра. Например, соответствующий М 10,10 м 10,10. Капитал от имени абсолютной позиции,Так называемое абсолютное положение - это абсолютное положение происхождения верхнего левого угла SVG Canvas. Нижний регистр представляет относительное положение,Так называемое относительное положение основано на текущем положении кисти для определения местоположения..

A(дуга) Команда рисования дуги

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

<svg width="100%" height="100%">
    <path d="M0 0 A 45 45, 0, 0, 0, 45 45 L 45 0 Z" fill="green"/>
</svg>

Нарисуйте картинку, чтобы помочь понять

В соответствии с шагами на рисунке мы можем нарисовать два удовлетворенных круга, поэтому мы видим, что в команде A есть три 0. Мы не объясняем это. Просмотрите команду A и объедините эту картинку, чтобы лучше понять

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Кривая Безье

Про Безье Кривой, Чжан Эта статья сделала очень понятно, чтобы поставить ее очень легко понятьГлубокое понимание путей SVG, рекомендуется студентам, которые хотят узнать больше о путях svg.

2-3. Базовая графика

Основные графики относительно просты для понимания, поэтому мы приведем их прямо в таблицу, не вдаваясь в подробности.

графика	Этикетка	шаблон	имея в виду
прямоугольник	< rect >	`<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>`	x: абсцисса начальной точки, y: ордината начальной точки, rx: радиус фаски в направлении оси x, ry: радиус фаски в направлении оси x, width: ширина, высота: высота
круглый	< circle >	`<circle cx="100" cy="100" r="50" fill="#fff"></circle>`	cx: абсцисса центра окружности, cy: ордината центра окружности, r: радиус
овал	< ellipse >	`<ellipse cx="75" cy="75" rx="20" ry="5"/>`	CX: Эллиптическое пространство сердца, CY: Эллиптическое сердце Шанда, RX: Эллипс Радиус направления оси X, RY: Радиус направления оси Y эллипса
прямая линия	< line >	`<line x1="10" x2="50" y1="110" y2="150"/>`	x1, y1: начальная точка, x2, y2: конечная точка
Полилиния	< polyline >	`<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>`	Каждые две точки соединяются пробелом в качестве координатной точки, разделенной запятыми, чтобы сформировать набор координат. Соедините в сложенную линию.
многоугольник	< polygon >	`<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>`	Подобно полилинии, разница в том, что последняя точка автоматически закрывает первую точку, образуя замкнутый контур.

2-4.символьная этикетка

Тег символа является основным техническим моментом, реализованным платформой управления иконками нашей команды прямых трансляций. Его функция эквивалентна компоненту, который находится в нашем наборе инструментов, например следующему:

<svg class="svg-sprite">[工具箱]
	<symbol id="icon-wave_add" viewBox="0 0 76 76"><path d="M38 0a4 4 0 014 4v30h30a4 4 0 110 8H41.999L42 72a4 4 0 11-8 0l-.001-30H4a4 4 0 110-8h30V4a4 4 0 014-4z" fill="currentColor" fill-rule="evenodd" opacity="none"></path></symbol>
	<symbol id="icon-time" viewBox="0 0 10 10"><path d="M5 0a5 5 0 110 10A5 5 0 015 0zm0 1.5a.5.5 0 00-.5.5v3.02l.008.088a.5.5 0 00.238.343L7.02 6.794l.082.039a.5.5 0 00.603-.215l.039-.082a.5.5 0 00-.216-.603L5.5 4.735V2l-.008-.09A.5.5 0 005 1.5z" fill="rgba(153,153,153,1)" fill-rule="evenodd" class=" "></path></symbol>
	<symbol id="icon-wave_delete" viewBox="0 0 40 40"><g fill="none" fill-rule="evenodd"><circle fill="#000" opacity="0.2" cx="20" cy="20" r="20"></circle><path stroke="#FFF" stroke-width="4" stroke-linecap="round" d="M13 13l14 14M27 13L13 27"></path></g></symbol>
</svg>

Поместите одну копию для неограниченного цитирования. Когда он находится в панели инструментов, мы его не видим (страница его не отображает), только используем<use>Мы можем видеть его на странице только тогда, когда у тега есть ссылка на экземпляр:

<use xlink:href="#icon-time"></use>

Мы используем<symbol> + <use>Легко ли реализовать комбинацию изображения спрайта svg?

У некоторых студентов могут возникнуть сомнения Тег символа и тег g, по-видимому, определяют многоразовый модуль в defs, так в чем же разница между ними? Насколько я понимаю, самая большая разница между символом и тегом g заключается в том, что символ может добавлять атрибуты представления и атрибуты области просмотра к повторно используемым блокам кода. Удобно сразу приспосабливаться к соответствующему размеру использования (печати), когда берете его.

3. Анимация SVG и ее применение

3-1.svg резюме анимации

На самом деле о SVG-анимации можно говорить очень много, в этой статье мы в основном говорим о некоторых основных атрибутах и навыках применения SVG-анимации.
1. СМИЛ драйвер
2. Драйвер JavaScript
3. CSS-управление

Технология	описывать	Примечание
SMIL	Очень мощная и чистая анимация вкладок	Хотя SMIL устарел после Chrome 45, он по-прежнему поддерживается, и поддержка основных браузеров очень хорошая.
CSS	CSS может реализовывать только простые анимации	offset-path имеет плохую совместимость. Анимации CSS не подходят для интерактивных анимаций.
JavaScript	Сложные анимации будут использовать JS, в том числе некоторые библиотеки анимации SVG в мире, которые также реализованы JS.

SVG — это основанный на XML язык описания векторной графики, который можно примерно понимать как HTML, поэтому он может взаимодействовать с JS и CSS. особый Вместо CSS мы можем использовать CSS3 для анимации SVG. Но имейте в виду, что это работает только в том случае, если HTML содержит встроенный файл SVG. Только тогда мы можем использовать CSS для его стилизации.В этой статье мы нацелены на обычный CSS3 + HTML, которого добиться непросто. Соответственно будет представлено несколько сценариев, которые можно быстро и легко реализовать с помощью SVG.

3-2. Практика анимации SVG

1. Изменения по прямой
2. Путь пути реализует плавное изменение графики
3. Анимация хода
4. Укажите траекторию движения

3-2-1 Смена прямой

На картинке ниже иконка GIF, объем около 156Кб, после сжатия.

Если мы сделаем это с помощью SVG. Что я должен делать. Мы делим его на следующие два способа, и совместимость с про тестом в порядке.

Кодовая практика реализации CSS+SVG

Кодовая практика, основанная на реализации SMIL

Резюме и объяснение:

Пункт знаний 1:В SVG есть много свойств, которые мы можем описать с помощью CSS. На основе CSS анимация трех мушкетеров (анимация, трансформация, переход). Мы управляем некоторыми свойствами для достижения желаемого эффекта анимации. Стоит отметить следующие два момента:

transform: Существует два варианта использования преобразования: одно — это атрибут преобразования, записанный в теге SVG, а другое — преобразование, записанное в файле CSS, и они существенно различаются.

<rect transform="rotate(45deg) ..."  ... />

rect {
    transform: rotate(45deg)
}
/** 行内的 transform 属性，他的执行基点是在我们 svg 元素的左上角也就是 svg 的坐标原点。**/
/** 而 CSS 的 transform 原点则在元素本身的中心点。**/

Описательные свойства CSS: во многих статьях говорится, что CSS может управлять SVG для создания анимации, но в реальном процессе разработки мы захотим узнать больше о том, какими атрибутами мы можем управлять с помощью CSS.Вот некоторые общие атрибуты, которые вы можете использовать с уверенностью.

Имя управляемого свойства CSS	Реализуемые сценарии
Теоретически всеми свойствами отображения можно управлять с помощью CSS, в том числе: ширина штриха, цвет, заливка и т. д.Свойства отображения SVG	Большинство стилей отображения изменяются динамически
x	Мы знаем, что прямоугольник имеет атрибуты x, y, его значение — начальная точка, управление x, мы можем динамически управлять смещением прямоугольника по оси X.
y	Управляя y, мы можем динамически управлять смещением прямоугольника по оси Y.
cx	`<circle cx="100" cy="100" r="50" fill="#fff" />`Это круг, и управление cx может управлять смещением оси X круга (или эллипса).
cy	Управление cy может управлять смещением оси Y круга (или эллипса).
r	r - радиус круга, управляя r, можно контролировать размер круга.
rx	rx — это радиус эллипса по оси X, и, управляя rx, можно управлять размером эллипса.
ry	ry — радиус эллипса по оси Y, и, управляя ry, можно управлять размером эллипса.
d	Атрибут d тега пути управляет информацией о пути d и может управлять изменением графа (Атрибут d не поддерживает описание CSS в сафари. Мы подробно объясним ниже)
PS: если вы не уверены, можно ли управлять этим свойством с помощью css в повседневной разработке, вот ссылка для запроса для вас	Свойства, связанные с SVG, контролируемые CSS, не поддерживаются.

Пункт знаний 2:Вы можете использовать SMIL для анимации SVG, например, тот же эффект анимации, следующий код можно получить без CSS

 export default function App() {
   return (
     <div className="App">
       <svg width="100%" height="100%" viewBox="0 0 100% 100%">
         {[1, 2, 3, 4, 5].map((it, index) => (
           <line
             key={index}
             stroke="#000"
             strokeWidth="2"
             x1={15 + index * 5}
             y1="8"
             x2={15 + index * 5}
             y2="22"
           >
             <animate
               attributeName="y1"
               values="8; 15; 8"
               dur="1s"
               begin={`${(5 % (index + 1)) * 0.2}s`}
               repeatCount="indefinite"
             />
             <animate
               attributeName="y2"
               values="22; 15; 22"
               dur="1s"
               begin={`${(5 % (index + 1)) * 0.2}s`}
               repeatCount="indefinite"
             />
           </line>
         ))}
       </svg>
     </div>
   );
 }

ТакЧто такое SMIL для SVG??
Я не хочу повторяться здесь, потому что в Интернете есть много статей, в которых это уже объяснялось более подробно.SMIL анимация палец бар,Детали анимации анимации SVG SMIL. Эта статья хочет сообщить вам, как выбрать между SMIL-управляемым и CSS-управляемым.
Хотя говорят, что еще в Chrome 45 хром официально объявил, что SMIL будет объявлен устаревшим, но пока поддержка основных производителей браузеров для него такова.

Chrom объявил о прекращении поддержки SMIL, потому что он хочет поддерживать разработку анимации CSS и веб-анимации, поэтому мы можем понять, что в настоящее время он находится в переходном состоянии.Действительно, есть некоторые эффекты анимации, которые CSS еще не поддерживает или поддерживает плохо. Смил может легко закончить. Тем не менее, исходя из общей тенденции развития технологии веб-анимации, рекомендуется, чтобы приоритетом нашей схемы реализации SVG-анимации был CSS-управляемый -> JS-управляемый (мы можем использовать некоторые фреймворки, и мы порекомендуем некоторые полезные фреймворки в ближайшее время). конец этой статьи) -> управляемый SMIL

3-2-2.Смена траектории пути (графика меняется плавно)

Изменения логотипа Code Practice, реализованные с помощью CSS+SVG

Изменение логотипа Code Practice на основе реализации SMIL

Практика кода, реализованная с помощью CSS+SVG Пауза воспроизведения

Практика кода на основе реализации SMIL play pause

Резюме и объяснение:

Пункт знаний 1:через пару<path/>Для управления атрибутом d мы можем добиться множества анимационных эффектов.В настоящее время существует два способа управления атрибутом d: один через управление CSS, а другой через управление SMIL.сафари не поддерживаетОписано с помощью CSS<path>Атрибут d метки. Поэтому использование CSS не рекомендуется для достижения эффекта плавной деформации формы. Для реализации рекомендуется использовать SMIL или стороннюю библиотеку.

На основе CSS:

    path {
      transition: ease all 0.3s; // 就像对dom一样的对待svg

      &.play { //这里是播放状态下的<path />路径
        d: path("M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z");
      }

      &.pause { //这里是播放状态下的<path />路径
        d: path(
          "M 12,26 16.33,26 16.33,10 12,10 z M 20.66,26 25,26 25,10 20.66,10 z"
        );
      }
    }

На основе SMIL (т.е.<animate>реализовать пару<path>динамическое управление атрибутом d):

  const pathMap = {
    from: "M 12,26 16.33,26 16.33,10 12,10 z M 20.66,26 25,26 25,10 20.66,10 z",
    to: "M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"
  };
  <svg class="icon" viewBox="0 0 120 120" width="400" height="400">
    <path
      d="M 12,26 16.33,26 16.33,10 12,10 z M 20.66,26 25,26 25,10 20.66,10 z"
      fill="#000000"
    >
      <animate
        attributeName="d"
        from={play ? pathMap.from : pathMap.to}
        to={play ? pathMap.to : pathMap.from}
        dur="0.3s"
        begin="indefinite" // 这里设置开始时间为无限以达到不自动播放的效果
        fill="freeze"
      />
    </path>
  </svg>

Переключение двух вышеуказанных путей может привести к эффекту плавного перехода.

Пункт знаний 2:
Все графические изменения, которые мы видим, должны следовать принципу, принципу выравнивания точек. Что это значит? Мы можем увидеть демо ниже, пятиконечная звезда на 10 полигонов (многоугольники не очень хорошо нарисованы, извините... 😜). , оба являются переходами от 10 контрольных точек к 10 контрольным точкам. Так что эффект плавный

От 10 до 3 точек на картинке ниже нет такого плавного эффекта перехода (конечно, многие фреймворки SVG-анимации уже решили эту проблему.См. рекомендацию по фреймворку в конце статьи. )

3-2-3 Применение анимации штриха

Практика кода для реализации CSS+SVG — Star Ring

Практика кода, реализованная с помощью CSS+SVG — штрих LOGO

Практика кода на основе реализации SMIL - цикл выполнения

Резюме и объяснение:

Пункт знаний 1:
Мы можем использовать аналогичную анимацию обводки для создания многих эффектов, таких как индикаторы выполнения различных форм, такие как текстовые обводки, и плавные анимационные эффекты, такие как неоновые огни и водяные огни. Суть анимации штрихов заключается в том, что два атрибута отображения SVG — это stroke-dasharray и stroke-dashoffset.Как мы уже говорили выше, почти всеми атрибутами отображения можно управлять с помощью CSS, поэтому этот вид анимации рекомендуется использовать для разработки с помощью CSS. .

Атрибуты	пример значения	описывать	диапазон поддержки
stroke-dasharray	1 3 4 4	Его значение представляет собой последовательность, и можно передать несколько значений, указав длину линии короткого штриха и расстояние между линиями штриха. Несколько значений циклически повторяются по очереди. Если передаются три значения, это похоже на штрих-дашаррай: 1,2,3 . Он автоматически сделает копию	`<circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> <altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan>`
stroke-dashoffset	10	Смещение начального положения заштрихованного сегмента линии от начальной точки чертежа. Положительные и отрицательные значения могут определять направление по часовой стрелке или против часовой стрелки.	В соответствии с инсультом-dasharray

Представьте себе сцену, в которой обратный отсчет должен идти от 100 до 0, а соответствующий визуальный эффект — от полного хода до отсутствия штриха. Затем мы изначально устанавливаем первое значение stroke-dasharray равным 2πr (периметр), а второе значение — 2πr (периметр). Тогда мы получим полный круг.

В это время, если расширить круг, то можно увидеть вот такую сцену

Таким образом, на самом деле есть два варианта достижения динамических изменений в процессе.
Во-первых, изменить первое значение штриха-dasharray с 2πr (периметр) на 0. Черная часть на исходной диаграмме расширения исчезла (ее можно понимать как невидимую точку, как показано ниже), и только пунктирная часть представляет собой пустой пробел.

Второй — отрегулировать значение смещения штриха-тире от 0 до -2πr (или увеличить его до 2πr). Сравните первую картинку со следующей картинкой

Пункт знаний 2:
В реальной разработке мы столкнемся с более сложной графикой, которую нужно обвести.На данный момент у нас нет возможности получить ее периметр.На данный момент она разделена на два сценария. Во-первых, в CSS мы можем установить очень большое значение для второго значения stroke-dasharray, а затем настроить первое значение следующим образом:

    path {
        stroke-dasharray: 0(调整到合适的值) 99999999999999
    }

Если нам нужно динамически получить периметр в js, SVG предоставляет собственный API для получения периметра пути.

    const inPath = document.getElementById("inner-path");
    console.log(inPath.getTotalLength());

ps: В некоторых источниках говорится, что этот метод можно использовать только для<path />, но автор лично проверял, что на сафаире и хроме в принципе может поддерживать всю базовую графику и<path />,но<text />Если он не поддерживается, браузер сообщит об отсутствии функции.

Так как было сказаноgetTotalLength(), тогда кстатиgetPointAtLength(). getPointAtLength, как следует из названия, предназначен для получения координат точки в соответствии с расстоянием. Это означает получение координат точки, соответствующей заданному расстоянию, по расстоянию до начальной точки. Начало системы координат является начальной точкой графика. Мы можем использовать этот API для некоторых анимаций указывания.

3-2-4 Применение траекторной анимации движения

Кодовая практика, основанная на реализации SMIL — движение по траектории

Резюме и объяснение:

{/* 我们将整个飞机图形元件用g标签包起 */}
<g transform="translate(-100, -35) scale(0.1)">
  <path
    d="M164.485419 578.709313L196.274694 794.731891c0.722484 5.53904 8.188147 7.224835 11.078081 2.408278l75.860772-121.377234 740.063969-363.409219L164.485419 578.709313z"
    fill="#F68206"
  ></path>
  <path
    d="M2.167451 440.233302l159.668861 132.214487 857.828787-260.334901zM289.475071 679.375353l191.217309 153.407337 542.344309-518.743179z"
    fill="#FF9900"
  ></path>
  <path
    d="M204.222013 800.030103l125.23048-80.677328-48.888053-39.014111-76.342427 118.4873"
    fill="#D3650B"
  ></path>
  {/* 然后在这里，我们利用animateMotion，去做这个轨迹运动 */}
  <animateMotion
    path="M 0 450 Q 150 50 250 50 Q 350 0 400 50 Q 500 50 450 200 C 300 350 250 200 500 50 C 600 50 750 200 650 250 A 50 50 0 1 1 800 50 "
    begin="0s"
    rotate="auto"
    dur="20s"
    repeatCount="indefinite"
  />
</g>

Здесь мы используем SMIL<animateMotion />, свойство path в animateMotion, мы также можем использовать его вот так

    <defs>
        <path id="theMotionPath" d="xxx" />
    </defs>
    <animateMotion>
        <mpath xlink:href="#theMotionPath"/>
    </animateMotion>

В реальном производстве рекомендуется использовать SMIL для достижения требований к нашему траекторному движению.Конечно, у CSS также есть план реализации.«Использование CSS offset-path для перемещения элементов по неправильным путям». Однако совместимость CSS действительно не льстит, так что мне приходится уговаривать их бросить.

В-четвертых, напишите в конце

1, CSS-анимации рекомендуются для переходов без морфинга или простых анимаций. Особенно при аппаратном ускорении. CSS не нужно загружать другие ресурсы (обычно это сторонние библиотеки), а небольшие преобразования при наведении курсора могут улучшить взаимодействие. CSS рекомендуется, особенно если вам не нужны 3D, физическое движение или множество многослойных анимаций. Кроме того, простота отладки CSS также является большим преимуществом.

2, Для более длинных анимаций будет очень сложно разрабатывать и отлаживать, а также сложно настроить шкалу времени с помощью CSS, особенно когда нужно манипулировать какими-то малозаметными кадрами, лично я считаю, что SMIL больше подходит для заказа, Сцена из сложные сложенные группы анимации.

3, Для деформированной анимации рекомендуется использовать SMIL или стороннюю библиотеку. Ниже перечислены рекомендуемые сторонние библиотеки.

имя библиотеки	описывать
GSAP	Полное название GreenSock Animation Platform. Когда в прошлом был популярен флэш, GSAP существовал во всем мире. Существует две версии GSAP: одна версия для флэш-памяти, а другая — версия для javascript, которую мы называем GSAP js. . GSAP работает быстро. GSAP специально оптимизирует производительность анимации для достижения тех же высокопроизводительных анимационных эффектов, что и css, легкий и модульный;
Snap.svg,SVG.js,Velocity.js	Эти три библиотеки всегда будут сравниваться разработчиками.В основном будет использоваться jQuery, и будут использоваться эти три библиотеки.То есть он дружественный для начала.Snap.svg более склонен к поддержке современных браузеров,поэтому его размер также будет меньше. По сравнению с Snap.svg, SVG.js написан более понятным способом, обеспечивает лучший опыт при его использовании и претендует на то, чтобы обеспечить почти полное покрытие спецификаций SVG. Стиль Snap.svg больше похож на рыцаря. Его будет аккуратно писать, но нелегко читать. Velocity также очень мощный, простой в использовании, высокопроизводительный и многофункциональный.
anime.js	Хотя anime.js не такой мощный, как GASP, его объем весьма оптимистичен: после сжатия gzip он составляет всего около 9кб, чего достаточно для ежедневной разработки.
D3	Документы, управляемые данными, как следует из названия, больше подходят для создания графических сценариев визуализации данных.

4, Как использовать SMIL для аппаратного ускорения, использовать вместо этого и установить значения x, y, z (z равно 0). В принципе аналогично CSS, это переместит элемент на его собственный слой, чтобы он не перерисовывался при перемещении.

использованная литература

SVG анимированная панель пальцев (SMIL)
Учебник по SVG
Атрибуты SVG, поддерживаемые CSS
и некоторые из статей, упомянутых в статье

Эта статья была опубликована сКоманда внешнего интерфейса NetEase Cloud Music, Любое несанкционированное воспроизведение статьи запрещено. Мы набираем front-end, iOS и Android круглый год.Если вы готовы сменить работу и любите облачную музыку, присоединяйтесь к нам на grp.music-fe(at)corp.netease.com!