Анімаційний рух плавно за допомогою CSS

1. О БОЖЕ МІЙ! Книга анімації Автор Кірупа? !!
2. Скажіть привіт перекладу translate3d ()
3. Перехід
4. Анімація
5. Не забувайте про префікси постачальника
6. Переклад за допомогою JavaScript
7. Що не так із встановленням поля, верху, ліворуч тощо?
8. Непотрібні розрахунки компонування
9. Апаратне прискорення
10. Що про JavaScript?
11. Бог благословить перетворює
12. БІЗНЕС КИРУПА

Значна частина того, що робить анімацію цікавою, - це можливість переміщати речі по екрану. Коли зі смаком виконано та належним чином використовується, рух - це чудовий спосіб додати певного життя до вмісту, привернути увагу до якогось інтерфейсу користувача, надати активний зворотний зв'язок тощо. Це взагалі досить круто.

Цей рух може бути чимось трохи божевільним, як:

Цей рух також може бути дещо витонченішим, таким було те, що ви бачите, коли ви наводите курсор на квадрати в наступному прикладі:

В обох цих прикладах рух здійснюється повністю за допомогою лише CSS. І CSS-анімація, і Переходи дозволяють вам надзвичайно легко перейти від чогось статичного до того, щоб щось рухалося. Незважаючи на те, наскільки це легко, є деякі речі, які слід пам’ятати, щоб забезпечити безперебійну роботу анімації. Цей підручник допоможе показати вам, як.

Вперед!

О БОЖЕ МІЙ! Книга анімації Автор Кірупа? !!

Щоб вигнати свої навички анімації у стратосферу, все, що потрібно, щоб бути експертом з анімації, доступне як у м'якій обкладинці, так і в цифровому виданні.

КУПИТИ НА АМАЗОНІ

Скажіть привіт перекладу translate3d ()

Коли ви переміщуєте елемент, те, що ви змінюєте, - це поєднання його вертикального та горизонтального положення. Існує кілька властивостей CSS, які можуть допомогти вам змінити позицію, але одна, яку я вам рекомендую використовувати, - це функція translate3d властивості transform. Я виправдовую, чому я використовую цю властивість над звичайними підозрюваними, такими як маржа, підкладка, ліворуч, верх, тощо, в наступному розділі, але в основному це відбувається тому, що translate3d створює більш плавні та більш текучі анімації.

Функція translate3d має три аргументи, але ми розглянемо в першу чергу лише перші два, які обертаються навколо горизонтально і вертикально, переміщуючи ваш вміст:

Аргумент x дозволяє вказати, наскільки далеко ви хочете перемістити вміст по горизонталі. Аргумент y вказує, наскільки далеко ви хочете перемістити вміст вертикально. Наприклад, якщо ви хочете перемістити вміст на 20 пікселів вправо і вгору, ваша функція translate3d виглядатиме так:

.foo {перетворення: translate3d (20px, 20px, 0px); }

Одне, на що ми не збираємося дивитися, - це третій аргумент, який визначає ваш рух у z-просторі, що виходить з вашого екрана. Оскільки нас насамперед цікавить рух 2d, просто ігноруйте аргумент z , встановивши його значення 0px, щоб він нічого не робив.

Як бачимо, функція translate3d не є особливо глибокою або складною. У наступному розділі перейдемо ще на крок далі і подивимось, як ви використовували б його як частину фактичного переходу CSS або анімації для імітації руху.

Перехід

Щоб використовувати цю властивість під час переходу, у вас є два кроки. На першому кроці ви визначаєте властивість перетворення як властивість, до якої потрібно прослуховувати ваш перехід:

.pictureContainer img {позиція: відносна; вгорі: 0px; перехід: перетворення .2s простота-виведення; }

Визначивши перехід, ви можете вказати властивість перетворення разом з функцією translate3d:

.pictureContainer img: навести курсор {перетворення: translate3d (0px, -150px, 0px); }

Як показано в прикладі вгорі цієї сторінки, наведення курсору на кожен елемент зображення призведе до перетворення, яке змушує зображення зміщуватися вгору ... на 150 пікселів.

Анімація

Для анімації переконайтеся, що ключові кадри у вашому правилі @keyframes містять декларацію перетворення за допомогою translate3d:

@keyframes bobble {0% {transform: translate3d (50px, 40px, 0px); анімація-функція синхронізації: простота; } 50% {перетворення: translate3d (50px, 50px, 0px); анімація-функція синхронізації: полегшення роботи; } 100% {перетворення: translate3d (50px, 40px, 0px); }}

Приклад в Все про анімації CSS підручник містить усе, що потрібно, щоб воно працювало, тому я не повторюсь тут.

Не забувайте про префікси постачальника

Щоб забезпечити розмітку для найбільшої кількості веб-переглядачів, обов’язково надайте префікси постачальника для властивості трансформації або використовуйте дивовижну бібліотеку, наприклад -префікс . Щоб дізнатися більше, ознайомтесь моє відео на цю тему .

Переклад за допомогою JavaScript

Якщо вам пощастить, ви будете оживляти положення речей у JavaScript. Ці ж правила діють і тут. Ви хочете встановити позицію за допомогою перетворення translate3d , а це трохи складніше в JavaScript.

Фрагмент коду, який вам знадобиться, виглядає приблизно таким чином:

функція getSupportedPropertyName (властивості) {for (var i = 0; i <properties.length; i ++) {if (typeof document.body.style [властивості [i]]! = "undefined") {return properties [i]; }} повернути нуль; } var transform = ["перетворення", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var item = document.querySelector ("# theItem"); var transformProperty = getSupportedPropertyName (перетворення); if (transformProperty) {item.style [transformProperty] = translate3d (someValueX, someValueY, 0px); }

Цей код здається складним просто тому, що ми перевіряємо наявність префіксів постачальника та гарантуємо, що використовується правильна версія функції перетворення. Ви можете дізнатися більше про те, як працювати з префіксами постачальника в JavaScript, а саме з цим фрагментом коду в наступний підручник .

Що не так із встановленням поля, верху, ліворуч тощо?

Це питання, яке мені задають весь час, коли я обговорюю використання translate3d для переміщення речей. Для цілей анімації, якщо у вас немає конкретної потреби, не встановлюйте властивості CSS поля, вкладки, верх, ліворуч, знизу чи право. Правильно ... Я це сказав! Оскільки ви, ймовірно, дуже багато використовуєте ці властивості для різних завдань, пов’язаних з позиціонуванням, я знаю, що це може здатись дуже протизаконним. Причина моєї єретичної позиції пов'язана з виконанням. Дозволь пояснити...

Непотрібні розрахунки компонування

Кожен раз, коли ви змінюєте значення, встановлені для шести властивостей CSS, які я перерахував, ваш веб-переглядач виконує додаткову роботу, щоб обчислити, як це впливає на макет всього документа. Я не проти, щоб ви використовували ці властивості, щоб допомогти у вашій компоновці. Нечасто використовувати ці властивості як частину завантаження або зміни розміру документа. Використовуючи ці властивості та змінюючи їх значення шістдесят разів на секунду як частина анімації чи переходу, безумовно, не чудово.

Ви можете встановити положення елементів, до яких рухаєтесь, фіксованими або абсолютними. Це дозволяє уникнути того, що веб-переглядачу не доведеться обчислювати макет для всього документа. Хоча це краща оптимізація, ваш браузер все ще робить розрахунки, пов’язані з компонуванням елемента, що рухається, як частина обчислення коробкової моделі. Це все-таки непотрібно, враховуючи, що кінцевий результат використання translate3d ідентичний результату встановлення поля, прокладки тощо. Добре, це не на 100% ідентично, як ви побачите у наступному розділі.

Апаратне прискорення

У роботі з відображенням речей на екрані, обчислення, що стоять за цим усім, можна виконати або процесором, або графічним процесором (він же графічною картою). Загалом, ви повинні покладатися на свій графічний процесор максимально для будь-яких завдань, що стосуються дисплея ... особливо для таких завдань, як анімація:

Причина полягає в тому, що ваш GPU призначений лише для одного - для обробки завдань, що стосуються дисплея. З іншого боку, ваш процесор повинен жонглювати багатьма різними речами. Переконайтесь, що ваша анімація плавно відображається, можливо, не дуже сильно в її переліку. Ця різниця в цілеспрямованості менш виражена на потужному робочому столі або ноутбуці і більш виражена на мобільних пристроях, таких як iPhone або iPad, де, з особистого досвіду, анімації, що використовують процесор, як правило, більш спритні, ніж ті, що використовують графічний процесор.

Як забезпечити роботу анімації в апаратному режимі на графічному процесорі? Використовуючи translate3d! Коли ви трансформуєте елемент за допомогою translate3d, цей елемент знаходиться в країні GPU у веб-браузерах, таких як Chrome і Safari (якими користуються ваші iPhone та iPad), Internet Explorer 9/10 та останніх версіях Firefox. Це робить translate3d досить очевидним переможцем у моїй книзі.

Що про JavaScript?

Для анімацій, створених повністю в JavaScript, де вся інтерполяція обробляється кодом, я дійсно не знаю, чи входить GPU чи ні. Що я знаю, це те, що використання JavaScript для встановлення CSS переходів та анімацій із властивістю translate3d отримує допомогу від GPU. Причина має сенс. Хоча ви використовуєте JavaScript для встановлення важливих властивостей анімації чи переходу, інтерполяція між початковою і кінцевою точкою елемента все ще робиться анімаційною системою браузера. Сині кола, які анімують у моєму прикладі до початку цього підручника, є свідченням цього.

Бог благословить перетворює

Причина перетворень є більш ефективною в цілому тому, що вони не впливають на будь-який інший елемент. Будь-які маніпуляції, які ви проводите, стосуються лише цього елемента, тому ваш веб-переглядач не повинен перефарбовувати все вікно. Він перефарбовує лише ту частину екрану, яка містить рухомий вміст. Це не залежить від участі у вашій GPU чи ні. З перетворенням translate3d переваги локального перефарбовування все ще застосовуються ... оскільки це все ще є перетворення. Завдяки цій конкретній трансформації, ви також отримуєте додаткову перевагу в тому, що всю роботу виконує GPU.

Якщо у вас є запитання щодо цієї чи будь-якої іншої теми, найпростіше - прокоментувати нижче або перейти наші форуми де купа найдружніших людей, до яких ви коли-небудь зіткнетесь, буде раді допомогти вам!

БІЗНЕС КИРУПА

Отримайте круті поради, підказки, селфі та інше ... особисто вручну доставляється у вашу поштову скриньку!

( Переглянути минулі випуски для уявлення про те, що ви пропускали весь цей час! )