Как создается эта JS анимация? - PullRequest
Новая
       23

Как создается эта JS анимация?

0 голосов
/ 08 февраля 2020

Stripe и другие сайты используют этот стиль "демонстрации скринкаста" на своих маркетинговых страницах. Вместо того, чтобы показывать видео своей платформы или GIF, они создают анимацию стилиста c JS с использованием реальных HTML элементов.

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

Анимации: https://stripe.com/billing

JS Скрипт Пример: https://b.stripecdn.com/site-srv/assets/compiled/js/sprockets-js-v3/billing/interactive-invoice-806d1d5b2d4f6d9c5c27.min.js

Я вижу уменьшенные JS файлы с веб-страницы, которые включены для создания анимации. Трудно сказать, написали ли они это JS сами (кажется кропотливым, учитывая, сколько у них анимаций на их сайте), или они используют настольное приложение (например, Adobe AfterEffects или подобное), или они используют пакет JS (как GreenSock).

Итак, какие инструменты, вероятно, используются для их создания?

1 Ответ

3 голосов
/ 08 февраля 2020

Если вы проверите элементы с помощью F12 и go на вкладке «Вычисленные», вы увидите, что они имеют свойства CSS transition:

enter image description here

CSS свойства перехода просто говорит браузеру анимировать свойство CSS из текущего значения в новое значение. Это действительно простой и эффективный способ создания анимации. Я настоятельно рекомендую их.

Вот фрагмент с демонстрацией, которую я только что сделал: 

setTimeout(function() {
    document.querySelector(".yay").classList.add("anim");
}, 1000);
.yay {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    transition: background-color 500ms, top 500ms, left 500ms;
}
.anim {
    top: 100px;
    left: 100px;
    background-color: blue;
}
<div class="yay" />

Вам просто нужно изменить его переходные свойства CSS с помощью JavaScript, изменив его класс (как это демо) или изменив объект Свойства стиля напрямую. Браузер сделает все остальное. Довольно круто на самом деле. Вы даже можете изменить свойства с помощью псевдоселекторов, таких как ::hover, ::active и др. c, и они также будут анимироваться. Принимается ноль JavaScript!

Они должны анимировать эти свойства с помощью CSS, и они просто устанавливают целевые позиции / размеры / независимо от того, что каждые X секунд.

Добавление : Легко, что все анимации создаются с помощью внешнего инструмента, который преобразует все в CSS переходы, но потому что рынок заполнен десятками инструментов, и они не устанавливают подписи при экспорте в HTML5 , невозможно узнать, сделали ли они это вручную для каждого элемента или нет. Кстати, не так сложно создать пример, который вы показали вручную. Если вы привыкли к HTML5, в итоге вы теряете то же время, когда делаете это с помощью внешнего инструмента. «Пакеты JS» содержат пакеты, которые используют переходы CSS, и другие, которые имеют собственную временную шкалу. GreenSock не использует CSS переходы, поэтому определенно не GreenSock.

В частности, в случае Stripe они используют «Animate Plus», как вы можете видеть здесь: https://b.stripecdn.com/site-srv/assets/compiled/js/sprockets-js-v3/external/animateplus-compat-2.0.1.js-490ccee558f4d2e2d207.min.js

...