Анимация внутри SVG
Нам необходимо выполнить следующие действия.
- Загрузить svg изображение на страницу с помощью тега <embed>.
- Сгруппировать необходимые слои для дальнейшей работы.
- Создать анимацию с помощью @keyframes.
- Реализовать выполнение анимации при клике на SVG картинку.
Все манипуляции с SVG будем выполнять прямо внутри самого изображения. Таким образом нашу SVG анимацию можно будет использовать в других проектах.
2. Объединение нужных слоёв в группу
Чтобы сгруппировать необходимые элементы, обернём их в тег <g></g>
Было:
Стало:
Для проверки, верно ли мы объединили элементы, зададим группе какой-нибудь цвет, например зелёный
3. Создание SVG-анимации
Будем писать css код прямо внутри SVG, это позволит использовать изображение независимо от данного проекта.
CSS и JavaScript будем писать в теге <defs></defs>. Данный тег скрывает внутреннее содержимое от браузера и используется для создания эффектов и изменения стилей.
Нижний блок кода необходим для того чтобы, когда мы будем нажимать на SVG картинку, то ей будет добавляться class addAnimation, на который мы повешали проигрывание анимации
Так же я использовал два id, из которых, первый — я дописал самой svg картинке, второй — группе элементов, которую будем анимировать
Адаптивный SVG
Отличительная черта адаптивного дизайна – меняющийся макет. Контент, включая изображения, разрабатывается так, чтобы заполнить контейнеры и экран. Если адаптивный дизайн – это что-то новое для вас, то статья Итана Маркотта – это отличный способ начать его изучение. SVG очень хорошо подходит для адаптивного дизайна:
- Адаптивный дизайн гибкий. Как и SVG! Он отлично выглядит при любом размере.
- Адаптивный веб дизайн заботится о том, как веб сайт выглядит и ведет себя в разных браузерах. Сравнительно маленькие файлы и удивительно гибкая система SVG могут стать частью этого.
Но, наверное, самая очевидная связь SVG с адаптивным дизайном – это возможность взаимодействовать с CSS @media queries. Media queries двигает, прячет или показывает элементы с помощью CSS, исходя из высоты и ширины окна браузера. Это могут быть любые элементы: сайдбар, навигация, рекламный блок, что угодно. Так же это могут быть и SVG элементы.
Представьте логотип, который отображается с разным уровнем детализации в зависимости от того, сколько доступно места. Это как раз то, о чем думал Джо Харрисон (Joe Harrison), когда создавал демо, используя всем известный логотип.
В вебе у нас всегда есть возможность поменять картинку на другую. Но в этом случае картинка не меняется, это все – одна и та же картинка. Ну или может быть одной и той же. Подпись «D» — это все та же «D», что используется в более сложной версии логотипа. Легко и просто с CSS.
Допустим, мы организовали SVG таким образом:
Это, кстати, очень легко делается в Illustrator. Созданные группы и имена превратятся в ID в конечном SVG, и вы сможете использовать эти ID для стилизации. Хотя я все-таки предпочитаю использовать классы, потому что они не уникальны (на странице не окажется несколько одинаковых ID) и потому что у них более низкий и более управляемый уровень CSS специфики. Достаточно просто заменить ID на классы с помощью функции «найти и заменить» в редакторе кода.
CSS может быть примерно таким:
Имейте ввиду, что это выдуманный пример, скрывающий части изображения в разных контрольных точках, но именно так вы можете делать в подобных случаях. Также можно создавать разную анимацию для разных контрольных точек, изменять размер обводки, чтоб улучшить или обрезать иконку, изменять цвет заливки и т.д.
Все может быть даже еще забавнее! Учитывая то, как используется SVG, media queries могут быть разными. У SVG, используемого как img, iframe или object, есть свой собственный viewport. Это значит, что CSS, встроенный внутри него, взаимодействует с media queries, основываясь на ширине SVG, а не на ширине всего окна браузера. То есть, вы можете написать media queries, зависящие от ширины картинки, а не всей страницы.
Это очень интересная идея: элемент, который сам себя настраивает на основе своих собственных атрибутов, а не атрибутов страницы. «Я могу быть шире? Ок. Я могу быть выше? Ок.» По этому, SVG быстрее реагирует на ситуацию, чем документ, частью которого он является.
Как я писал, SVG упоминается как «элемент запросов» в CSS, но пока что такого термина не существует в официальном HTML/CSS.
Быстрый обзор структуры SVG, группировки и связывания (переиспользования) элементов в SVG.
Существует 4 основных элемента, которые используются для определения, задания структуры и связей в SVG коде. Эти элементы делают переиспользование кода проще, сохраняя его чистым и читаемым.
Вот эти элементы: , , и .
Элемент (короткое от «group») используется для логической группировки набора связанных графических элементов. С точки зрения графических редакторов, таких как Adobe Illustrator, элемент имеет ту же функциональность, как и Group Objects. Можно также представлять группу как слой в графическом редакторе.
Группировка элементов полезна, когда мы хотим применить общий стиль, и особенно, если хотим анимировать группу элементов, сохраняя при этом их относительное расположение.
Элемент применяется для определения элементов, которые будут использоваться позднее. Определение элементов через полезно, когда вы хотите создать своего рода «шаблон», который будет использоваться несколько раз в документе. Элементы, определенные внутри не отображаются, пока не будут «вызваны» где-то в документе.
Элемент сочетает в себе преимущества и и , т.к. может использоваться в качестве группировки элементов, определяющих шаблон, на который можно ссылаться из любого места документа. В отличие от , как правило, не используются для определения шаблонов, а в основном используется, чтобы определить символы (например иконки), на которые имеются ссылки по всему документу.
Элемент имеет важное преимущество: он принимает атрибут , который позволяет масштабироваться внутри любого вьюпорта, в котором происходит отрисовка. Элемент используется для ссылки на другие элементы, определенные где-то в документе
Он позволяет повторно использовать существующие элементы, давая вам возможность, аналогичную копированию-вставке в графическом редакторе. Он может применяться для переиспользования как отдельного элемента, так и группы, заданной через , или
Элемент используется для ссылки на другие элементы, определенные где-то в документе. Он позволяет повторно использовать существующие элементы, давая вам возможность, аналогичную копированию-вставке в графическом редакторе. Он может применяться для переиспользования как отдельного элемента, так и группы, заданной через , или .
Для использования элемента передаем ссылку на него внутри атрибута, а также устанавливаем и . Вы можете применять стили к , и эти стили каскадно применятся к содержимому элемента.
Но откуда берется содержимое ? Где происходит клонирование? И как CSS работает с этим содержимым?
Прежде чем отвечать на эти вопросы, стоит упомянуть несколько статей для лучшего понимания этих элементов и атрибута , который использует :
- Структурирование, группировка и привязка в SVG — элементы <g>, <use>, <defs> и <symbol>
- Понимание координатной системы SVG (часть 1): viewport, viewBox и PreserveAspectRatio
Анимированная заливка fill с помощью CSS
На встроенном SVG очень легко анимировать цвет заливки с помощью небольшого CSS кода.
Представим, что на вашей странице есть встроенный элемент SVG с идентификатором . Вы применяете следующий CSS, чтобы сделать его с непрозрачностью по умолчанию равной 0, и класс с непрозрачностью 1 (с переходом). Затем, когда анимация закончится, класс можно добавить в SVG.
CSS
/* Style */
#mySVG * {
fill-opacity: 0;
transition: fill-opacity 1s;
}
#mySVG.finished * {
fill-opacity: 1;
}
|
1 |
/* Style */ #mySVG * { fill-opacity; transitionfill-opacity1s; } #mySVG.finished * { fill-opacity1; } |
JavaScript
/* JavaScript */
new Vivus(‘mySVG’, {}, function (obj) {
obj.el.classList.add(‘finished’);
});
|
1 |
/* JavaScript */ newVivus(‘mySVG’,{},function(obj){ obj.el.classList.add(‘finished’); }); |
ПРЕДУПРЕЖДЕНИЕ. Этот хак не может работать с изолированными решениями, такими как использование тега объекта .
Конструктор
Конструктор Vivus запрашивает 3 параметра:
- Идентификатор (или объект) элемента DOM для взаимодействия.
Это может быть встроенный SVG или элемент-обертка для добавления тега объекта из опций файла - Опция объекта (описано в следующем |
- Обратный вызов для вызова в конце анимации (необязательно)
Настройки
| Имя | Тип | Описание |
|---|---|---|
| string | Определяет, какой тип анимации будет использоваться: отложенная, синхронизация, по одному, скрипт, сценарий или сценарий-синхронизация. | |
| string | Ссылка на SVG для анимации. Если установлено, Vivus создаст тег объекта и добавит его к элементу DOM, данному конструктору. Будьте осторожны, используйте обратный вызов перед игрой с экземпляром Vivus. | |
| string | Определяет, как запустить анимацию (, когда SVG находится в области просмотра, инструкция дает вам свободу вызывать метод draw для запуска, запускает его прямо сейчас). | |
| integer | Продолжительность анимации, в кадрах. | |
| integer | Время между рисованием первого и последнего пути в кадрах (только для отложенных анимаций). | |
| function | Функция вызывается, когда экземпляр готов к воспроизведению. | |
| function | Функция анимации времени для каждого элемента пути SVG. Проверьте . | |
| function | Функция анимации времени для полного SVG. Проверьте . | |
| integer | Расстояние дополнительный запас между линиями. Увеличьте его в случае сбоев в начальном состоянии анимации. | |
| boolean | Заставьте браузер перерисовать все обновленные элементы пути. По умолчанию значение только для IE. (проверьте раздел «устранение неполадок» для более подробной информации). | |
| boolean | Обратный порядок исполнения. Поведение по умолчанию — рендеринг с первого «пути» в SVG до последнего. Эта опция позволит вам отменить заказ. | |
| boolean | Удаляет все лишние стили в SVG и оставляет его оригинальным. |
Методы
| Имя | Описание |
|---|---|
| Воспроизведение анимации со скоростью, указанной в параметре. Это значение может быть отрицательным, чтобы двигаться назад, между 0 и 1, чтобы двигаться медленно,> 1, чтобы идти быстрее, или <0, чтобы идти назад от текущего состояния. . Обратный вызов выполняется после завершения анимации (необязательно) | |
| Останавливает анимацию. | |
| Реинициализирует SVG в исходное состояние: неиспользованный. | |
| Set the SVG to the final state: drawn. | |
| Установите прогресс анимации. Прогресс должен быть числом от 0 до 1. | |
| Получить статус анимации между началом , прогрессом , концом | |
| Сбросьте SVG, но сделайте экземпляр не по порядку. |
Эти методы возвращают объект, чтобы вы могли связать действия в цепочку.
JavaScript
const myVivus = new Vivus(‘my-svg-id’);
myVivus
.stop()
.reset()
.play(2);
|
1 |
constmyVivus=newVivus(‘my-svg-id’); myVivus .stop() .reset() .play(2); |
Воспроизвести метод обратного вызова
Вместо того, чтобы использовать глобальный обратный вызов конструктора при создании объекта Vivus, вы можете добавить обратные вызовы, которые будут выполняться для определенных вызовов методов воспроизведения .
JavaScript
const myVivus = new Vivus(‘my-svg-id’);
myVivus.play(1, function() {
// вызывается после завершения анимации
});
// поочередно, если вы оставите параметр скорости пустым и используете значение по умолчанию, вы
// может передать обратный вызов в качестве первого параметра, например, так.
myVivus.play(function() {
// вызывается после завершения анимации
});
|
1 |
constmyVivus=newVivus(‘my-svg-id’); myVivus.play(1,function(){ // вызывается после завершения анимации }); // поочередно, если вы оставите параметр скорости пустым и используете значение по умолчанию, вы myVivus.play(function(){ // вызывается после завершения анимации }); |
Timing an animation
The first thing to stress is that SMIL (and therefore SVG) animation is time-based, as opposed to frame-based. Frame-based animation is something traditional animators are used to, because they actually draw each image of the animation on a separate celluloid sheet, and the timing is related to the rate of images per second the camera will capture. When animation is done on a computer, the animator doesn’t draw every image but only some key images (or keyframes) and then the animation software creates all the necessary images for him (the so-called in-betweens). That means the animator can focus back to a (real-)time based timing. Each keyframe is positioned on a timeline with real time values (instead of frame numbers). Of course at the end the animation is discrete and there is a fixed number of images computed inbetween two keyframes, but the neat property of specifying keyframes at time position is that the final animation frame rate is scalable and the animator doesn’t have to care about it anymore. He just tells the software to produce 24 images each second if he targets a theatre film or say 10 images per second for low-bandwidth web animation. The animator doesn’t need to reposition the keyframes.
In-betweening by interpolation
Creating the inbetween images on a computer is done by mean of interpolation. Interpolation is a mathematical tool that can reconstruct a the continuous evolution of a parameter given a set of discrete values of this parameter over time.
The following image illustrates that. We know that some attribute A must take value A0, A1, A2 and A3 at times t0, t1, t2 and t3. The red curves is one of the possible continuous function that be used to compute inbetween values of A in the interval .
The animation’s time interval
The first aspect that characterizes an animation is the interval of time on which it applies: when does it begin, when does it end or how long does it run.
Any of the above mentioned accept the attributes , and .
The attribute values
To specify the values taken by the attribute over the time interval, one need to tell the value that the parameter must have at the begin and at the end of the interval. here again those values are specified by combinations of three attributes: , and . The attribute correspond to the begin value, the attribute correspond to the end value. The attribute let you define either the initial and final values relative to the other one, that is to = from + by or from = to — by. The following image illusttrate this setup for our hypothetical attribute A
The values of A are simply interpolated linearly in between begin and end. This is the more simple form of animation function that can defined: by the two extremal pairs of (time, attribute value): (begin, from) and (end, to).
More complex timing
It’s possible to specify a whole set of (keytime, keyvalue) pairs to define the animation function. Each item of the pairs are actually given separately:
- the set of attribute values (keyvalues) are given by the attribute.
- the set of time values (keytimes) are given by the attribute.
Each set as the form of a semicolon-separated list of values. The thing to notice is that the keytimes are actually normalized to , which means that 0 maps to begin and 1 maps to end, and those values must start and end the list of keytimes. The image below illustrates all this:
The keyTimes list can actually be omitted, in which case the keytimes are evenly distributed in the interval (or equivalently, evenly in the interval )
The (keytime, keyvalue) pairs are joined by straight lines in the above graph, which means that linear interpolation is used for computing the inbetween values.
When applied to the position of an object, linear interpolation results in un-natural robot-like motions (which may be the effect wanted). SMIL allows smoother animations to be defined by using spline-based interpolation between two (keytime, keyvalue) pairs. For each interval (t0, A0) — (t1, A1) a spline can be defined by two control points defining the tangents of the spline at t0 and t1. Those control points are passed in the attribute .
Two other interpolation modes are possible:
- discrete: this is a degenerate form of interpolation, because the resulting animation function is not continuous. For each interval (t0,A0) — (t1, A1), the attribute value is set to A0 for the whole interval. It jumps to A1 right when t1 is reached and so on.
- paced: in this interpolation mode, the attribute is interpolated so that its evolution over time has constant speed. Because the animation function is defined implicitly, the attribute is not taken into account. This mode is mainly useful for the element.
Motion Path Module
Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.
В этой спецификаии есть 3 свойства:
- motion-path;
- motion-offset;
- motion-rotation;
motion-path — это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.
Пример:
motion-path: path('M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z');
motion-offset — это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.
Пример:
@keyframes airplane-fly {
0% { motion-offset: 0; }
100% { motion-offset: 100%; }
}
motion-rotation — это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах (‘-45deg’, ’30deg’ и т.д).
Пример:
motion-rotation: auto;
К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.
Шаг 1. Рисуем иллюстрацию для svg анимации
Итак, запускайте редактор и задайте в свойствах документа альбомную ориентацию (shift+ctrl+D). Начнем рисовать с неба. Нарисуйте прямоугольник и задайте любой градиент, подойдет как радиальный так и линейный. В качестве цвета можно выбрать любой темно-синий цвет, все-таки у нас ночь.
В нижней части рисунка добавьте прямоугольник. Он должен занимать менее половины рисунка. Верхнюю сторону прямоугольника сделайте в виде дуги. Для этого оконтуриваем объект Контур-оконтурить объект. После этого достаточно потянуть мышку вверх и мы получим дугу. Таким образом мы получили холм.
Звезды получить проще всего. Рисуем несколько кругов белого цвета и дублируем необходимое количество раз.
Для создания изображения тумана рисуем несколько кругов, накладываем их друг на друга, выделяем и применяем операцию Сумма Ctrl+. Для тумана лучше задать радиальный градиент.
Полученное облако дублируем пару раз, изменяем размер и отражаем по горизонтали. Затем размещаем за холмом.
С помощью инструмента кривые Безье рисуем контур произвольного дерева и задаем заливку черным цветом (дерево можно создать и с помощью векторизации растрового изображения реального дерева).
Далее сова. Нарисуйте контур совы и задайте заливку цветом чуть более светлым чем небо.
Сова должна быть едва видна. Контур совы можно нарисовать из пары эллипсов. После оконтуривания эллипсов придаем им нужную форму.
Вот что у меня получилось.
Последний объект это Луна. Здесь все просто. Рисуем круг белого цвета.
И с помощью Page Down опускаем его за туман.
Все, иллюстрация готова. Можно заняться анимацией.
animateMotion
The element can animate the movement of a shape along a path. It can also rotate the shape to match the slope of the path, like a car driving up and downhill or taking turns on a curved path. In this case, we are providing with the path inside a mPath attribute so that the shape moves along the path you have provided.
There are few settings that can be made with the help of rotate attribute. ‘rotate’ attribute can take one of these 3 values
- : Indicates that the object is rotated over time by the angle of the direction (i.e., directional tangent vector) of the motion path.
- : Indicates that the object is rotated over time by the angle of the direction (i.e., directional tangent vector) of the motion path plus 180 degrees.
- a number : Indicates that the target element has a constant rotation transformation applied to it, where the rotation angle is the specified number of degrees.
Note: You can combine one or more animations with having more number of animate tags inside the element you want to animate.
Final Words
This is just the basics of the SVG animations. There is more of it to come when you go deep inside in the name of morphing the shapes, adding additional properties to animation in the form of key splines, co-ordinating animation within a single element and many more.
A lot of very impressive effects can be created, especially ones involving morphing and transforming shapes. The sky’s the limit.
Hope you had fun reading the article. 
Что ещё важно
Моушн-дизайн отличается от работы со статической графикой тем, что важную роль в нём играет время. Хороший тайминг в анимации не менее важен, чем композиция, цвета и качество графики.
Движения на экране должны быть просты для человеческого восприятия. Они не могут происходить слишком быстро — но и от сильного замедления пользователь, вероятно, будет нервничать. Моушн-дизайнер ищет оптимальную скорость, чтобы пользователь успел понять, что происходит на экране, но не успел заскучать.
Обычно скорость движения в интерфейсах нелинейная. Равномерное движение может смотреться неестественно, потому что в реальном мире предметы так не движутся. Они замедляются или ускоряются по законам физики
Объектам в интерфейсе тоже придают либо замедление, чтобы задержать внимание пользователя, либо ускорение — чтобы показать изменение состояния
Изображение: Aurélien Salomon / Dribbble
Когда объекты на экране совершают несколько движений одновременно, встаёт вопрос координации. Часто для разных эффектов анимации нужны разные временные интервалы и скорость — всё это учитывает моушн-дизайнер.
Примеры кода
Весь этот набор атрибутов не только позволяет гибко управлять паттерном, но и немного взрывает мозг при попытке их использовать.
По моему опыту, самый удобный код получается при одновременном использовании , и . определяет размер видимой области до применения какого-либо масштабирования, то есть какую часть содержимого паттерна нужно использовать как плитку — это немного похоже на применение инструмента «Crop» в фотошопе. Затем, указав ширину и высоту, можно управлять размером полученной плитки. То есть изначально плитка может быть любого размера, а нужный размер можно настроить потом.
Важный момент: чтобы между плитками не было пустых мест, нужно в и сохранять пропорции, указанные во . Значения размеров при этом не должны зависеть от размеров фигуры или SVG-элемента, следовательно, нужно добавить ещё один необходимый атрибут — со значением (то есть нужно использовать систему координат всего SVG-элемента).
Пример кода:
Результат:
Изменяем размеры паттерна, он послушно масштабируется. При этом размеры фигуры на паттерн не влияют:
Для своих экспериментов я обычно выбираю этот вариант, с ним удобнее работать.
А что если паттерн должен реагировать на изменение размеров элемента?
Вариант 1. Нужно задать атрибуту значение . То есть внутри паттерна система координат должна строиться относительно элемента, к которому применён паттерн.
Пример кода:
Напомню, что при размеры и координаты внутри паттерна можно задавать только в числах от 0.0 до 1.0, проценты работать не будут. Так как все размеры содержимого задаются относительно размеров фигуры, тянуться они так же будут вместе с ней, без сохранения пропорций. Это видно на демо:
Вариант 2. Он проще и удобнее, потому что содержимое паттерна сохраняет свою систему координат и единицы измерения. При этом способе не задаётся, потому что используется значение по умолчанию: . Размеры плитки паттерна задаются в процентах или в значениях от 0.0 до 1.0, они будут зависеть от размеров фигуры. Чтобы содержимое паттерна ресайзилось вместе с ним, нужно добавить , а чтобы оно при этом заполняло всю плитку, хоть и с искажениием пропорций, — :
Результат:
Таким образом можно с минимальными усилиями сделать резиновый паттерн.
Примеры эффектов анимации
Итак, с задачами моушн-дизайна в интерфейсах мы разобрались. Но одна и та же задача может решаться с помощью разных эффектов. Рассмотрим некоторые из них.
Плавное перемещение
Это один из основных эффектов, часто встречающийся в интерфейсах. С помощью плавного перемещения могут меняться страницы, появляться всплывающие окна, осуществляться скроллинг.
Изображение: Eldin Herić / Dribbble
Параллакс
Эта техника заключается в том, что объекты переднего плана по отношению к зрителю движутся быстрее, чем объекты заднего плана или фон. Так это выглядит:
Изображение: Julia / Dribbble
Параллакс, в отличие от обычного перемещения объектов на экране, делает интерфейс более «живым» и концентрирует внимание пользователя. Эффект может использоваться для демонстрации контента или для скроллинга — есть даже отдельный термин «параллакс-скроллинг»
Например, здесь скорость пролистывания блоков ниже, чем скорость появления иллюстраций на них:
Изображение: Rohit / Dribbble
Маскирование
Эффект маски заключается в полном или частичном перекрытии одного изображения другим. При этом два изображения могут двигаться независимо друг от друга. Маскирование чаще всего используется для навигации по сайту. По мере того как пользователь читает информацию, заполняет данные или скроллит, масками можно закрывать старые блоки и открывать новые.
Triggers
These parameters take almost any input based DOM event, but with one very special constraint: The SVG data has to be embedded in the DOM. If you have your SVG in a file and are referencing it in an image tag or whatever, the DOM events won’t trigger.
Trigger events can be expanded further by not only using the DOM event of an element itself, but also by referencing to an event by another element. For instance, allows us to trigger the animation once a certain element with the id of has been clicked.
This gives us a multitude of possibilities. Look at that the following example:
Here we start the second animation once the first one has already started.
Specifying the target element and property
There are 2 ways to tell which element a given animation will target. The first one is to embed the as a child tag of the element to animate. Here is an example:
<circle cx="100px" cy="100px" r="20px"> <animate attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px"> </circle>
The element targets the radius () property of the parent element. Starting 1 second after the document start, the radius will grow for 2 seconds from 20 pixels to 50 pixels. When nothing else is specified, the animation only applies in its interval of time, here seconds; from 0 to 1 second and then from 3 second and after, the circle’s radius is set back to its static attribute value, here 20 pixels.
The other way to specify the target element is to reference it in via an attribute of the animation element. the previous animation could be written this way:
<circle id="balloon" cx="100px" cy="100px" r="20px" /> <animate xlink:href="#balloon" attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px" />
Использование CSS-переменной currentColor для стилизации содержимого
Использовуя в сочетании с описанной техникой, можно указать два разных цвета на элементе вместо одного. Fabrice Weinberg описал этот способ в своем Codepen блоге около года назад.
Идея заключается в том, чтобы применить к оба свойства ( и ). Давайте сразу перейдем к примеру кода, чтобы увидеть как это работает.
Предположим, что мы хотим стилизовать простой логотип Codrops, используя два цвета — один для передней капельки, второй для задней — и сделаем несколько экземпляров.
Для начала сделаем разметку для этого примера: должен быть , содержащий определение нашей иконки и 3 экземпляра .
Если мы установим на элемент , этот цвет будет применяться к обоим , и получатся две одноцветные капельки — это не то, чего мы хотим.
Здесь мы будем использовать для разделения цветов. Вставляем в том месте, где хотим применить другой цвет. Это должно быть в определении нашей иконки, т.е. внутри элемента . Получаем следующий код:
Далее мы должны удалить атрибут представления для второй капельки, позволив применить цвет заливки , без использования техники наследования.
Если мы будем использовать ключевое слово для того, чтобы атрибуты представления унаследовали свои значения от , тогда оба будут иметь одинаковые значения цвета, и мы не увидим никакого эффекта от использования . В нашем случае нужно удалить атрибут, который хотим устанавливать через CSS, и оставить только один path со значением .
Теперь, используя свойства и , мы можем стилизовать капельки:
Каждый элемент получает свои значения и . Для каждого цвет наследуется от первого , который не имеет атрибута , и значение свойства color используется в качестве атрибута для второго .
Вот результат:
Эта двухцветная техника весьма полезна для простых двухцветных логотипов. В своей статье Fabrice делает три разных варианта логотипа Sass, изменяя цвет текста и цвет фона.
На сегодня — это единственная доступная переменная в CSS. Однако, если бы у нас было больше переменных, мы бы смогли передать больше значений в содержимое . Amelia Bellamy-Royds представляла эту концепцию в записи своего Codepen блога около года назад. Давайте посмотрим, как это работает.
Итого
CSS-анимации позволяют плавно, или не очень, менять одно или несколько свойств.
Они хорошо решают большинство задач по анимации. Также мы можем реализовать анимации через JavaScript, более подробно об этом – в следующей главе.
Ограничения CSS-анимаций в сравнении с JavaScript-анимациями:
Достоинства
- Простые анимации делаются просто.
- Быстрые и не создают нагрузку на CPU.
Недостатки
- JavaScript-анимации более гибкие. В них может присутствовать любая анимационная логика, как например «взорвать» элемент.
- Можно изменять не только свойства. Мы можем создавать новые элементы с помощью JavaScript для анимации.
Большинство анимаций может быть реализовано с использованием CSS, как описано в этой главе. А событие позволяет запускать JavaScript после анимации, поэтому CSS-анимации прекрасно интегрируются с кодом.
Но в следующей главе мы рассмотрим некоторые JavaScript-анимации, которые позволяют решать более сложные задачи.
