Анимация рисования линии

icon Lion-break

В последнее время набирают популярность анимационные эффекты рисования линий с чистого листа. Магические картинки анимации игровой консоли или дядьки в кресле копируются с сайта на сайт. Конечно это круто выглядит и наверняка у вас появилось желание сделать, что нибудь подобное для своего сайта. Для этого есть несколько плагинов реализации эффекта анимации линий. Но, я не буду перечислять их, объяснять как они работают, как плагины можно “заточить” под себя. При желании всё это можно найти.
Задача данной статьи иная – понять, как реализуется эффект анимации, отчего зависит направление, последовательность и продолжительность рисования линий.
Почему один файл SVG можно заставить отрисовываться, а другой нет.
Далее будет логично заняться более интересными вещами – последовательной и параллельной анимацией нескольких фрагментов изображения, реализацией плавного преобразования одной векторной картинки в другую.
Продолжить чтение

Анимация многоугольников

  1. Вращение пятиугольника
  2. Увеличение размеров пятиугольника
  3. Увеличение размеров с одновременным вращением фигуры
  4. Скачать примеры анимации

Продолжить чтение

Анимация иконки – разбитое сердце

Иконка - Идея этой анимации навеяна великолепным докладом Владимира Кузнецова об использовании SVG в сайтостроении. Иконка – “разбитое сердце” составлена из двух половинок, которые нарисованы с помощью двух путей – path. heart-whole Анимация происходит за счет вращения – ‘rotate’ этих путей в разные стороны, относительно одной общей точки. Как нарисовать в векторном редакторе эти половинки сердца, чтобы они идеально, без шва соединялись друг с другом, я расскажу в отдельной статье.
Продолжить чтение

Горизонтальный параллакс с помощью viewBox

Горизонтальный параллакс
Эта статья поможет вам разобраться, как создать для своего сайта интересные, визуальные эффекты, используя уникальное свойство SVG – наличие перемещаемого viewBox на бесконечном полотне SVG.
Немного теории. Пользователь видит на своем мониторе только один фрагмент полотна SVG – viewport, остальные фрагменты изображения скрыты от него левее или правее, выше или ниже viewport.
Перемещая viewBox вдоль оси х-ов полотна SVG мы реализуем тем самым – горизонтальный параллакс – смещение фонового изображения влево или вправо относительно viewport. Осуществляется это с помощью изменения первого атрибута viewBox“min-x”. см. подробнее о viewBox
Для большей наглядности процесса – взаимодействия “viewport” и “viewBox” смотри картинку ниже.

Продолжить чтение

Добавление звука к SVG файлам

Задача – добавить звук к существующей анимации, то есть к кнопкам запуска и остановки гоночных машинок привязать включение и отключения звука гоночных моторов.
racing car sound of racing motors

Продолжить чтение

Анимация SVG path – гонки автомобилей

На этом примере анимации – движение гоночных машинок вдоль пути “path”, разбирается параметр “animateMotion”, который управляет направлением, началом, продолжительностью и окончанием движения.
race cars

Продолжить чтение