Анимация SVG с плагином от Greensock
See the Pen Animating SVG With GreenSock by Petr TIchy (@ihatetomatoes) on CodePen.
Начнем с того, что подключим к нашему index.html библиотеку для анимации TweenMax.
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script> |
Для того, чтобы анимировать отдельные части логотипа, зададим им классы:
1 2 3 4 5 | .bracketLeft .bracketRight .tomatoLeft .tomatoRight .tomatoLeaves |
Логотип будет состоять из 5 частей.
Группируем SVG
Помидор состоит из трех частей, которые надо объединить в группу. Используем для этого тег <g> и зададим ему id tomato.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="ihtLogo" x="0" y="0" viewBox="0 0 308.8 152.1" xml:space="preserve" enable-background="new 0 0 308.8 152.1"> <style> .tomatoLeft, .tomatoRight{ fill:#D74022; } .bracketLeft, .bracketRight{ fill:#4D4D4F; } .tomatoLeaves{ fill:#95D600; } </style> <polygon points="238.3 152.1 225.6 139.3 283.4 81.5 225.6 23.8 238.3 11 308.8 81.5 " class="bracketRight"/> <polygon points="70.5 152.1 0 81.5 70.5 11 83.2 23.8 25.5 81.5 83.2 139.3 " class="bracketLeft"/> <g id="tomato"> <path d="M139.7 17.2C106 18.3 78.6 45.7 77.5 79.4 76.9 98 84.2 114.9 96.3 127l91-91C175.2 23.9 158.3 16.6 139.7 17.2z" class="tomatoLeft"/> <path d="M122.3 127c12.1 12.1 29 19.4 47.6 18.8 33.7-1.1 61.1-28.5 62.2-62.2 0.6-18.6-6.7-35.5-18.8-47.6L122.3 127z" class="tomatoRight"/> <path d="M128.6 10.9c0-1.5 0-3 0.1-4.5 0.1-1.4 0.8-3.1 0.3-4.5 -0.8-2.5-4.3-2.6-5.5-0.3 -1.8 4.5-2.5 9.2-2.4 14 -6.7 3.2-17 2-24-0.2 5.1 4 11.2 6.7 18 7.5 -6.5 3-12.5 7-17.6 11.9 13.7-9.2 32.4-7.6 44.4 3.7 -1.3-4.6-3.5-8.7-6.4-12.3 7.3-5.2 16.3-7.4 25.1-6.3 -7-2.1-14.2-3-21.5-2.8 3.2-2.1 6-4.7 8.3-7.7 -6.3 3.5-11.4 4.1-18.5 4.4C128.8 13.2 128.7 11.6 128.6 10.9" class="tomatoLeaves"/> </g> </svg> |
Инициализация переменных
Создадим файл main.js и зададим переменные:
1 2 3 4 5 6 7 | var tomato = $("#tomato"), bracketRight = $(".bracketRight"), bracketLeft = $(".bracketLeft"), tomatoLeft = $(".tomatoLeft"), tomatoRight = $(".tomatoRight"), tomatoLeaves = $(".tomatoLeaves"), tl; |
Создадим timeline (определяет последовательность анимаций) для SVG анимации.
1 | tl = new TimelineMax(); |
Объединим две части томата в один объект:
1 2 3 | tl.set([tomatoLeft], {xPercent: 23.6}); tl.set([tomatoLeaves], {xPercent: 41}); tl.set([tomato], {left: 10, rotation: 13, transformOrigin:"center center"}); |
С помощью transformOrigin:"center center" мы задаем центр вращения объекта.
Удаляем объекты с экрана
Теперь мы можем удалить объекты с экрана. Воспользуемся функцией .set , которая устанавливает стили для элементов без анимации.
1 2 3 | tl.set(tomato, {yPercent: -100}); tl.set(bracketRight, {xPercent: 100}); tl.set(bracketLeft, {xPercent: -100}); |
При загрузке страницы элементы будут иметь значения стилей указанные в .set .
Зададим последовательность анимации
Анимация состоит из следующих этапов:
- Скобки (.bracketRight,.bracketLeft) возвращаются в свое начальное положение xPercent: 0
- Томат падает сверху(#tomato) yPercent: 0
- Томат вращается по часовой стрелке и приходит с свое начальное положение
- Томат разделяется на две части
Timeline SVG анимации будет следующим:
1 2 3 4 5 6 | tl.to([bracketRight,bracketLeft], 0.3, {xPercent: 0, ease:Power4.easeOut}, 2) .to(tomato, 0.5, {yPercent: 0, ease:Bounce.easeOut}) .to(tomato, 0.2, {rotation: 0, xPercent: -4}) .to([tomatoLeft, tomatoLeaves], 0.2, {xPercent: 0}, "split") .to(tomato, 0.2, {rotation: 0, xPercent: 0}, "split") .to(tomatoRight, 0.2, {xPercent: 2}, "split"); |
Анимируем текст
Последний элемент, который мы анимируем — это текст ihatetomatoes.
Воспользуемся методом .staggerFrom .
1 2 3 4 5 6 7 | tl.to([bracketRight,bracketLeft], 0.3, {xPercent: 0, ease:Power4.easeOut}, 2) .to(tomato, 0.5, {yPercent: 0, ease:Bounce.easeOut}) .to(tomato, 0.2, {rotation: 0, xPercent: -4}) .to([tomatoLeft, tomatoLeaves], 0.2, {xPercent: 0},"split") .to(tomato, 0.2, {rotation: 0, xPercent: 0},"split") .to(tomatoRight, 0.2, {xPercent: 2},"split") .staggerFrom(letters, 0.01, {autoAlpha: 0}, 0.03); |
У каждой буквы по очереди меняется прозрачность от 0 до 1 с интервалом 0.03 миллисекунды.
See the Pen Animating SVG With GreenSock by Petr TIchy (@ihatetomatoes) on CodePen.