Недавно наш дизайнер сообщил, что хочет сделать анимацию загрузки следующим образом. Но либо экспортируемый GIF с хорошим эффектом очень большой, и после прочтения он больше 8M, либо эффект маленького GIF очень неясен. Затем я посмотрел на эффект и обнаружил, что использовать анимацию SVG должно быть относительно просто, поэтому я попросил дизайнера экспортировать исходную рукопись в SVG и обработал ее.
Поскольку Nuggets не поддерживает вставку видео, вы можете посетить адрес видео Tencent.V.QQ.com/Tianxian с/iframe/…Посмотрите задуманное дизайнером анимационное видео.
Airbnb произвела анимацию для преобразования анимации AE в анимацию SVG.LottieИнструмент. Через плагин AE Bodymovin может экспортировать анимационную информацию и материалы в формате JSON. а затем использовать на веб-страницеbodymovin.jsБиблиотека воспроизведения анимации загружает материал JSON для завершения преобразования анимации. Для конкретных руководств, пожалуйста, обратитесь к видео YoutubeКак экспортировать анимацию с помощью Bodymovin.
Пользоваться Bodymovin действительно удобно, но поскольку требуемый дизайнером эффект относительно прост, действительно нет необходимости каждый раз загружать для этого эффекта базовую библиотеку и JSON-файл размером в десятки КБ. Поэтому я реализовал это здесь на основе анимации SVG + CSS, и окончательный эффект выглядит следующим образом. Окончательный объем составляет 6 КБ, который будет меньше после сжатия. Давайте следовать за мной шаг за шагом, чтобы понять это! Я не буду здесь подробно описывать основные принципы каждого шага, если вы хотите понять основы SVG-анимации, вы можете прочитать статьи, которые я писал ранее.«Практика SVG-анимации».
Поскольку Nuggets не поддерживают вставку изображений SVG с анимацией (будут принудительно преобразованы в PNG), я сделал запись экрана SVG в формате GIF, чтобы вы могли предварительно просмотреть окончательный эффект. Окончательный эффект SVG можно посмотреть по следующему адресу.Да 3. Рейтинги Vaporizing Heat Die.com/static/post 195….
Анализ разделения анимации
Наблюдения показали, что анимация в основном использует анимационные эффекты, такие как перемещение, вращение, прозрачность, изменение свойств, таких как ширина и цвет. Этого можно достичь с помощью анимации CSS3, а остальное нам нужно сначала разделить на части и реализовать отдельно. Наконец, объедините их для достижения полного эффекта через определенное время.
Здесь я, наконец, разделил анимацию на следующие части:
- Эффект пульсации на внешнем кольце
- Волнистый эффект внешнего кольца 1
- Волнистый эффект внешнего кольца 2
- Волнистый эффект внешнего кольца 3
- растяжка тела
- Трансляционная растяжка зеленой части основного корпуса
- Пан-растяжка на зеленой части тела
- Пан растягивается под зеленой частью основного корпуса
- Эффект затухания основного белого шара
- Трансляционная растяжка синей части основного корпуса
- Эффект затухания основной белой горизонтальной полосы
- Вращение основного корпуса
- Трансляционная растяжка зеленой части основного корпуса
- Революционный эффект синего шара
Нам нужно обработать каждый отдельный эффект анимации, поэтому нам нужно организовать элементы экспортированного SVG, сгруппировать и отметить элементы, с которыми нам нужно работать. Поскольку файлы SVG, экспортируемые Sketch, будут содержать много избыточных элементов, я обычно использую такой инструмент, как svgo, для оптимизации содержимого перед ручной обработкой SVG. Вот рекомендация, написанная учителем Чжан Синьсюй.Онлайн-инструмент сжатия и слияния SVG, просто вставьте код SVG напрямую, очень просто. Ниже приведен схематический код для общей структуры SVG.
<svg width="552px" height="552px" viewBox="0 0 552 552" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--外圈-->
<g id="track-list">
<!--外圈1-->
<circle id="track-circle-1" />
<!--外圈2-->
<circle id="track-circle-2" />
<!--外圈3-->
<circle id="track-circle-3" />
</g>
<!--中间主体-->
<g id="main">
<!--主体绿色部分下-->
<g id="bottom-triangel">
<path d="..." />
</g>
<!--主体绿色部分上-->
<g id="top-triangel">
<path id="shadow" d="..." />
<path d="..." />
<!--主体白色圆球-->
<circle id="white-ball" />
</g>
<!--主体蓝色部分-->
<g id="right-triangel">
<path d="..." />
<!--主体白色横条-->
<rect id="white-line" />
</g>
</g>
<!--外圈蓝球-->
<circle id="blue-ball" />
</svg>
Вы можете видеть, что я переставил элементы в SVG и добавил все элементы, которыми нужно манипулировать.idАтрибуты, которые удобны для последующих операций за счет непосредственного использования селекторов CSS для выбора объектов. Кроме того, все элементы, которые требуют части операции, также используются<g />Теги группировки завернуты.
Эффект пульсации на внешнем кольце
Волновой эффект внешнего кольца заключается в том, что радиус круга постепенно увеличивается, и эффект сопровождается процессом сужения границы круга. Самый внутренний из трех кругов не нужно перемещать, нужно перемещать только два последних. Получив состояние конечного кадра из черновика дизайна, анимацию сделать проще.
#track-circle-2 {
animation-name: wave1;
animation-timing-function: ease-in-out;
animation-duration: 6s;
animation-iteration-count: infinite;
}
#track-circle-3 {
animation-name: wave2;
animation-timing-function: ease-in-out;
animation-duration: 6s;
animation-iteration-count: infinite;
}
@keyframes wave1 {
50% {
stroke-width: 4;
r: 219px;
}
}
@keyframes wave2 {
50% {
stroke-width: 3;
r: 274.5px;
}
}
**Адрес предварительного просмотра:**code.также 5 all.com/XO VE is/edit?…
растяжка тела
Эта часть является более сложной частью целого, но путем разделения мы обнаружили, что ее относительно просто реализовать, сначала реализовать перемещение внутренних элементов, а затем добавить общий эффект вращения. О переводе говорить особо нечего, проблема только в том, чтобы рассчитать расстояние, на которое нужно переместиться из положения начального кадра и конечного кадра. Позиция, отмеченная последней белой линией, как показано на рисунке, является необходимой нам позицией перевода.
#top-triangel { animation: topmove ease-in-out 2s infinite; }
#shadow { animation: shadowhide linear 2s infinite; }
#bottom-triangel { animation: bottommove ease-in-out 2s infinite; }
#right-triangel { animation-name: rightmove ease-in-out 2s infinite; }
@keyframes topmove {
from, to { transform: translate(0, 0); }
50% { transform: translate(-31px, -30px); }
}
@keyframes bottommove {
from, to { transform: translate(0, 0); }
50% { transform: translate(-31px, 30px); }
}
@keyframes rightmove {
from, to { transform: translate(0); }
50% { transform: translate(29px); }
}
@keyframes shadowhide {
30%, 70% { opacity: 0; }
}
Кстати, не забывайте, что в нашем анимационном разделении только что присутствует эффект затухания белых шаров и белых горизонтальных полос. Можно использовать эффект затуханияopacityПрозрачность достигается, но в дополнение к затуханию происходит изменение размера, и для выражения может быть более подходящим использовать эффект дыхания. Размер круга предназначен для изменения радиуса, а размер горизонтальной полосы можно напрямую изменить по ширине.
#white-ball { animation: balltransparent ease-in-out 2s infinite; }
#white-line { animation: linetransparent ease-in-out 2s infinite; }
@keyframes balltransparent {
50% {
opacity: 0;
transform: scale(0);
}
}
@keyframes linetransparent {
50% {
opacity: 0;
width: 0px;
}
}
Судя по разделению анимации только что, у нас осталось одно вращение в основной части, которое не было реализовано. При выполнении этой части нужно помнить о двух вещах. Во-первых, по умолчанию вращение основано на верхнем левом углу холста SVG, а вращение обычно основано на вращении центра, поэтому не забудьте установитьtransform-originкак центральная точка. Во-вторых, SVG, экспортируемый Sketch, будет иметь большое количествоtranslate()Операция атрибута перевода может находиться в определенной позиции, когда дизайнер впервые нарисовал ее, а позже посчитал, что перемещать ее неуместно, что будет отражено в SVG как преобразование перевода. В настоящее время, если мы напрямую используемtransformВ случае выполнения трансформации их первоначальный перевод будет перезаписан, что приведет к проблеме, связанной с неправильным ранее заданным центром вращения.
Так что в этом случае вам нужно использовать совместное преобразование, и вы можете добавить предыдущее преобразование перевода к преобразованию CSS, поэтому в коде есть еще два.translate()причина.
#main {
animation: mainrotate linear 6s infinite;
transform-origin: center center;
}
@keyframes mainrotate {
from {
transform: translate(0, 0) rotateZ(0deg) translate(-72px, -42px);
}
to {
transform: translate(0, 0) rotateZ(360deg) translate(-72px, -42px);
}
}
Ниже приведен окончательный эффект реализации. Как, ты чувствуешь, что победа не за горами!
Адрес предварительного просмотра: код. Также 5Jun.com/Dahagang/edit?…
Революционный эффект синего шара
Последним шагом в разделении анимации является эффект вращения синего шара. Из вышеизложенного мы знаем, что можем установить центр вращения для вращения. Вращение вращается вокруг себя, поэтому центр вращения является центром самого себя, в то время как вращение вращается вокруг солнца, поэтому центр вращения является центром солнца, что соответствует нашему эффекту движения, фактически является центром всего холста.
Здесь я также использую другую единицу CSS для выражения углаturn, что означает количество оборотов, а поворот на 360° означает1turn. КромеturnКроме того, угол CSS имеетgradГрадиент иradЭти две единицы - радианы.gradЭто разделить круг на 400 равных частей, повернуться на 360°, значит400grad. а такжеradРадиан в основном такой же, как и наше математическое представление в радианах.2πrad.
#blue-ball {
animation: spin linear 6s infinite;
transform-origin: center center;
}
@keyframes spin {
from { transform: rotate(0turn); }
to { transform: rotate(1turn); }
}
Адрес предварительного просмотра: код. Также 5Jun.com/May I/edit? О...
постскриптум
Наконец, приведенный выше код можно собрать воедино, чтобы добиться эффекта анимации в начале статьи.Это совсем просто? Также поддерживает встроенные теги SVG.<style>а также<script>теги, поэтому мы можем напрямую встроить стили в файл SVG, чтобы мы могли использовать его непосредственно как ссылку на GIF<img>Или используйте SVG в виде фоновых изображений без каких-либо дополнительных хлопот.Это прекрасно работает на некоторых сайтах Markdown, которые не поддерживают встроенные стили, таких как Github!