UI Animations with Lottie and After Effects: Create, render, and ship stunning animations natively on mobile with React Native

Understand and develop immersive animations along with animated stickers for Telegram using Bodymovin, After Effects and LottieFiles and integrate them in your React Native apps using this color guide to UI animations

Key Features:

• Explore key principles of storytelling, 2D digital animation, and design thinking
• Create animations in After Effects, learn how to export them with both Bodymovin and LottieFiles plugins, and tweak them using the LottieFiles platform
• Understand how to implement Lottie animations with React Native

Book Description:

Lottie is a small and scalable JSON-based animation file. LottieFiles is the platform where Lottie animations can be uploaded, tested, and shared. By combining the LottieFiles plugin and the LottieFiles platform, you'll be able to create stunning animations that are easy to integrate in any device. You'll also see how to use the Bodymovin plugin in After Effects to export your animation to a JSON file.

The book starts by giving you an overview of Lottie and LottieFiles. As you keep reading, you'll understand the entire Lottie ecosystem and get hands-on with classic 2D animation principles. You'll also get a step-by-step guided tour to ideate, sketch for storytelling, design an icon that will fulfill the needs and expectations of users based on UX, and finally animate it in Adobe After Effects. This will help you get familiar with the After Effects environment, work with vector shape layers, create and modify keyframes using layer properties, explore path and mask features, and adjust timing easily to create professional-looking animations.

By the end of this animation book, you'll be able to create and export your own Lottie animations using After Effects and implement them in mobile apps using React Native. You'll also have an understanding of 2D animation best practices and principles that you can apply in your own projects.

What You Will Learn:

• Get started with Lottie and integrate animations either by creating them from scratch or by downloading them through LottieFiles
• Explore the key principles of 2D classic animation
• Understand the basics to create your first animation using After Effects
• Export your animations into Lottie JSON files through Bodymovin
• Integrate your very first Lottie icon animation inside your React Native app
• Control your animation within the app through React APIs, while exploring best practices and common pitfalls

Who this book is for:

This book is for developers and engineers who are already familiar with React Native, as well as UX and UI designers who want to create their own animations and integrate them with their platforms through React Native. Basic knowledge of JavaScript programming is assumed. Beginner-level illustration skills are also preferred, although not necessary.

了解並開發使用Bodymovin、After Effects和LottieFiles的Telegram動畫和動畫貼圖，並使用此彩色指南將它們整合到React Native應用程式中的能力。

主要特點：
- 探索故事講述、2D數位動畫和設計思維的關鍵原則
- 在After Effects中創建動畫，學習如何使用Bodymovin和LottieFiles插件導出動畫，並使用LottieFiles平台進行微調
- 了解如何在React Native中實現Lottie動畫

書籍描述：
Lottie是一種小型且可擴展的基於JSON的動畫文件。LottieFiles是可以上傳、測試和分享Lottie動畫的平台。通過結合LottieFiles插件和LottieFiles平台，您將能夠創建令人驚嘆的動畫，並輕鬆整合到任何設備中。您還將了解如何使用After Effects中的Bodymovin插件將動畫導出為JSON文件。

本書首先概述了Lottie和LottieFiles。隨著閱讀的進展，您將了解整個Lottie生態系統，並親自體驗經典2D動畫原則。您還將進行逐步引導，進行故事講述的構思、設計符合用戶需求和期望的圖標，並在Adobe After Effects中對其進行動畫製作。這將幫助您熟悉After Effects環境，使用向量形狀圖層進行工作，使用圖層屬性創建和修改關鍵幀，探索路徑和遮罩功能，並輕鬆調整時間軸以創建專業外觀的動畫。

通過閱讀本動畫書籍，您將能夠使用After Effects創建並導出自己的Lottie動畫，並使用React Native在移動應用程式中實現它們。您還將了解2D動畫的最佳實踐和原則，可以應用於自己的項目中。

學到什麼：
- 開始使用Lottie，通過從頭開始創建或通過LottieFiles下載來整合動畫
- 探索2D經典動畫的關鍵原則
- 了解創建第一個動畫的基礎知識，使用After Effects
- 通過Bodymovin將動畫導出為Lottie JSON文件
- 在React Native應用程式中整合第一個Lottie圖標動畫
- 通過React API在應用程式中控制動畫，同時探索最佳實踐和常見問題

本書適合對React Native已有基本了解的開發人員和工程師，以及希望創建自己的動畫並通過React Native將其整合到平台中的UX和UI設計師。假設讀者具備基本的JavaScript編程知識，並且最好具備初級插圖技能，但這不是必需的。