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

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

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

Анимации: 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 ответ


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

введите описание изображения здесь

Свойства перехода 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 и т. Д., И они также будут анимироваться. Нулевой 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


Есть идеи?

10000