Lottie – це бібліотека, створена компанією AirBnb. За її допомогою можна створювати різноманітну анімацію для додатків легко та без зайвих витрат часу. CEO & Director в Untime studio Антон Пінкевич, який спеціалізується на анімації інтерфейсів, дає 10 порад по роботі з Lottie та попереджає про помилки, яких можна запобігти.
Читайте також: Навіщо UI/UX і вебдизайнерам навички програмування
Автор усіх зображень: Антон Пінкевич
Lottie
Lottie – це чудова open-source бібліотека від Airbnb. В ній є інтерфейси для роботи з React-native, iOS і Android. Бібліотека дає змогу використовувати *.json файли, отримані за допомогою Bodymovin, і відтворювати їх на мобільних пристроях.
Bodymovin – це open-source бібліотека для експорту анімацій з After Effects в код.
Вона дозволяє робити парсинг всієї анімації в АЕ і створює* .json файл з усіма необхідними даними. Після цього можна використовувати цей файл на сайті або в додатку. Тобто відтворити його за допомогою плеєра, який буде збирати анімацію з *.json файлу.
Користуватися Bodymovin дуже просто, достатньо завантажити extension і дати програмісту посилання. Єдиний мінус цієї бібліотеки в тому, що вона важить дуже багато (240 kb minified copy). В іншому, вона підтримує дуже багато анімованих параметрів і їх зв’язки між собою.
Найбільший біль: композиції та Lottie
Забудьте про використання композицій в проєкті – у Lottie немає для них підтримки. Точніше, вона є, але дуже дивна і не описана в документації. Сподіваюся, скоро це виправлять. Я одразу про це пишу, тому що це стало для нас великим сюрпризом: довелося переробляти більшу частину проєкту заново. Композиції працюють просто як групи.
А ось приклади того, що не працює:
Trim композиції
Будь-яка зміна transform параметрів
Time Remap
Як бачимо з прикладу, це саме те, для чого взагалі використовуються композиції.
Наші поради по роботі з анімацією для Lottie:
1. Всі шари бажано тримати в одній композиції.
Це незручно, особливо якщо проєкт складається зі складної анімації, але доводиться терпіти заради результату. Цього можна уникнути таким чином: розділити проєкт по сценах або логічним елементам і зробити їх анімацію в окремих композиціях.
А потім збирати це разом.
Плюс такого підходу в тому, що так простіше і логічніше працювати. Але великий мінус в тому, що перед рендером потрібно обов’язково скопіювати всі шари. Це особливо болісно, коли проєкт виростає.
Ще можна використовувати нашу власну розробку.
2. Забути про ефекти і находити вихід за допомогою стандартної анімації шейпів.
У 2019 році в lottie додали невелику підтримку ефектів. Але це стосується базових ефектів, які можуть бути зроблені за допомогою svg анімації. Тому краще продумувати анімацію таким чином, щоб обійтися з використанням тільки шейпової анімації. Це спростить ваше завдання і розв’яже руки.
Список підтримуваних ефектів можна знайти тут.
3. Краще обійтися без експрешенів
У 2019 році в lottie додали підтримку експрешенів. Але деякі з них працюють некоректно, інші можуть поводитись по-різному при кожному завантаженні сторінки/екрана. Ми радимо обходитися без експрешенів в своїх проєктах. Але, якщо ви все-таки користуєтеся ними, то нижче можете знайти два відео, які показують як можна «запекти» будь-який експрешен і зменшити розмір фінального файлу.
Lottie + AE – how to use expressions with lottieLottie
Lottie + AE – how to reduce final file size
А тут ще трохи інформації від розробника з приводу експрешенів.
4. Використовувати якомога менше Alpha matte і Alpha inverted matte.
Замість них краще використовувати маски, тому як іноді ці ефекти дають непередбачений результат і знайти проблему стає дуже складно.
5. Використовувати 48 fps.
Це досить нестандартне значення, але ми звикли працювати в 24 fps – дуже зручно для анімації. Тому 48 fps працює для нас найкращим чином. Якщо 60 fps вам підходить, то працюйте при такій кількості кадрів. Тоді ви отримаєте максимально реалістичну картину анімації.
6. Використовувати якомога менше точок в масках і keyframes
Вони дуже сильно збільшують вагу фінального файлу.
У нас була складна анімація фону, яка не працювала в Lottie, тому довелося зробити Auto-trace. Звідси й така дивна маска на фоні.
На скріншоті вище все разом дає 2 мегабайти до ваги фінального файлу: /
7. Як тестувати анімації
Є веб-сервіс, на якому можна переглядати *.json файли за допомогою web-плеєра lottie. А в підвалі сайту можна знайти посилання на iOS і Android додатки, щоб подивитися анімацію за допомогою відповідних плеєрів.
8. Зміна деяких параметрів за допомогою коду
Деякі параметри файлів lottie можна пізніше змінювати і редагувати за допомогою коду. Нижче невеликий приклад, як це можна зробити для web версії.
Додати потрібні селектори в шар
Ці селектори додадуться в html код
Пізніше їх можна змінювати за допомогою css
Опис від розробника для web можна знайти тут. Для iOS – тут.
9. Не lottie єдиним
Ми підготували порівняння всіх можливих методів експорту анімації з АЕ і порівняли їх між собою (не враховуючи створення анімації тільки за допомогою коду).
Додаткові матеріали на тему: