Необычная анимация SVG букв на CSS и anime.js

Необычная анимация SVG букв на CSS и anime.js

Сегодня я хотел бы показать вам немного вдохновляющей анимации символов с помощью SVG и anime.js. Для достижения такого эффекта, мы оживим ход каждой буквы несколько раз.

Сложность

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

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

svg анимация букв

Структура

Каждая буква вырисовывается три раза. Следовательно, технически мы должны создать один и тот же путь три раза. Для того, чтобы все выглядело красиво и правильно работало, мы также должны учитывать, что в некоторых буквах анимируются отдельные части. Например, в нашем примере буква "L" состоит из двух частей, вертикальной и горизонтальной линии. Принимая во внимание все эти условия, мы сталкиваемся со следующей структурой разметки:

<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-1">
    <!--W-->
    <g class="letter letter--1">
        <g class="letter__part">
            <path class="letter__layer color-6" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
            <path class="letter__layer color-1" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
            <path class="letter__layer color-2" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
        </g>
    </g>
    <!--I-->
    <g class="letter letter--2">
        <g class="letter__part">
            <path class="letter__layer color-6" d="M100,20.3l8.4,58.4" />
            <path class="letter__layer color-2" d="M100,20.3l8.4,58.4" />
            <path class="letter__layer color-3" d="M100,20.3l8.4,58.4" />
        </g>
    </g>
    <!--L-->
    <g class="letter letter--3">
        <g class="letter__part">
            <path class="letter__layer color-6" d="M126.4,70.8l27.6,0.5" />
            <path class="letter__layer color-3" d="M126.4,70.8l27.6,0.5" />
            <path class="letter__layer color-4" d="M126.4,70.8l27.6,0.5" />
        </g>
        <g class="letter__part">
            <path class="letter__layer color-6" d="M128.9,15.6l-2.3,60.2" />
            <path class="letter__layer color-3" d="M128.9,15.6l-2.3,60.2" />
            <path class="letter__layer color-4" d="M128.9,15.6l-2.3,60.2" />
        </g>
    </g>
    <!-- ...and so on -->
</svg>

Мы добавили некоторые классы для определения SVG элементов, каждой буквы, части буквы и слоя. Благодаря этому мы сможем установить цвета и эффекты для каждого примера.

svg animate letter

Стиль

Нам просто нужно добавить несколько стилей для SVG анимации и путей. Важно отметить, что мы используем свойство stroke-linejoin: bevel, чтобы наши линии начинались там, где начинается путь и не раньше (как это было в случае со значениями square и round).

.letters {
    position: relative;
    display: block;
    min-height: 400px;
    max-height: 70vh;
    margin: 0 auto;
}


/* Путь */

.letter__layer {
    fill: none;
    stroke-miterlimit: 3;
    stroke-linecap: butt;
    stroke-linejoin: bevel;
}

/* Эффект 1 */

.letters--effect-1 .letter__layer:first-child {
    stroke-width: 9px;
}

.letters--effect-1 .letter__layer:nth-child(2) {
    stroke-width: 9.5px;
}

.letters--effect-1 .letter__layer:nth-child(3) {
    stroke-width: 10px;
}


/* Цвета */

.color-1 { stroke: #dea521; }
.color-2 { stroke: #f84242; }
.color-3 { stroke: #3758a7; }
.color-4 { stroke: #f79c8c; }
.color-5 { stroke: #84b5bd; }
.color-6 { stroke: #feefde; }

Штрихи для каждого слоя, в нашем первом примере, устанавливаются немного жирнее для каждого нового слоя, для того чтобы не возникало просветов.

Действие

Для анимации мы используем библиотеку anime.js, которая позволяет легко настраивать свойства анимации и обрабатывать различные типы анимации, которые мы имеем. В частности, у нас есть два основных типа анимации: движение каждой буквы (внутренних и внешних) и линии. Анимация линии делается как обычно, с установкой параметров stroke-dasharray и stroke-dashoffset к длине пути, чтобы скрыть его, а затем установить значение 0 для stroke-dashoffset чтобы нарисовать путь.

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

Phrase.prototype.options = {
    // Если true, все слои / линии каждой части буквы (за исключением последнего) будут анимировать непрозрачность до 0.
    // При этом, мы избегаем любого перекрытия пути позади последнего.
    pathOpacityAnim: false,
    // Параметры анимации для 'out' (когда мы нажимаем на кнопку и буквы исчезают). Мы используем библиотеку anime.js поэтому синтаксис остается одинаковым.
    outAnimation: {
        translateY: [0, 15],
        opacity: [1, 0],
        duration: 250,
        easing: 'easeInOutQuad'
    },
    // Параметры анимации для 'in' (когда буквы появляются снова).
    inAnimation: {
        properties: {
            translateY: {
                value: [-30, 0],
                duration: 900,
                elasticity: 600,
                easing: 'easeOutElastic'
            },
            opacity: {
                value: [0, 1],
                duration: 500,
                easing: 'linear'
            },
        },
        delay: 40
    },
    // Параметры анимации линий
    pathAnimation: {
        duration: 800,
        easing: 'easeOutQuint',
        delay: 200
    }
};

ДЕМО СКАЧАТЬ Перевод статьи Fancy SVG Letter Animation

Тэги: animateSVG

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.