Анимация логотипа svg c помощью javascript
Для начала понадобится логотип в формате svg. Анимацию будем делать с помощью библиотеки SnapSvg.
See the Pen Logo animation with Snap.svg by Matt (@whiskeyface) on CodePen.
Для того, чтобы анимация работала, понадобится одинаковое количество точек на всех кадрах анимации. Начните с окончательной формы логотипа. Работая в обратном направлении, надо создать каждый кадр анимации.
Последовательность форм анимации логотипа:
Когда векторные изображения готовы, создадим в HTML документе svg элемент.
1 | <svg id="mysvg" class="" width="100%" height="100%" viewBox="0 0 640 800" preserveAspectRatio="xMaxYmax"></svg> |
В javascript файле создадим две переменные. Одна указывает SnapSvg какой элемент использовать. Вторая содержит path для первого кадра анимации.
1 2 3 4 5 6 | var s = Snap('#mysvg'), path = s.path("M497.5,21.8L497.5,21.8L497.5,21.8L497.5,21.8L497.5,21.8L497.5,21.8L497.5,21.8L497.5,21.8v21.1l0,0l0,0H0l0,0h0.4L0,0h497.5l0,0l0,0l0.7,0.1L497.5,0l0,0V21.8L497.5,21.8L497.5,21.8z").attr({ fill: "#fff", stroke: "#fff", strokeWidth: 2 }); |
Есть несколько путей анимировать svg переходя от одного кадра к другому. В этом примере будем использовать функцию setTimeout().
Первая функция:
1 2 3 4 5 | function frameZero() { path.animate({ d: "M42.2,21.8L42.2,21.8L42.2,21.8L42.2,21.8L42.2,21.8L42.2,21.8L42.2,21.8L42.2,21.8v21.1l0,0l0,0H0l0,0h0L0,0h42.2l0,0l0,0l0.1,0.1L42.2,0l0,0V21.8L42.2,21.8L42.2,21.8z" }, durLong, animType, function(){ setTimeout(frameOne,timeOutDelay); }); } |
Переменные для управления временем анимации:
1 2 3 4 5 6 7 8 | var durLong = 300, durShort = 100, durXShort = 50, timeOutDelayXLong = 1500, timeOutDelayLong = 300, timeOutDelay = 50, timeOutDelayXShort = 0, animType = mina.elastic; |
Если вас интересует создание сайта, мы можем помочь.