UI Animations with Lottie and After Effects: Create, render, and ship stunning animations natively on mobile with React Native
暫譯: 使用 Lottie 和 After Effects 的 UI 動畫:在 React Native 上原生創建、渲染和發佈驚豔動畫

Ruiz, Mireia Alegre, Martinez, Emilio Rodriguez

  • 出版商: Packt Publishing
  • 出版日期: 2022-06-30
  • 售價: $1,860
  • 貴賓價: 9.5$1,767
  • 語言: 英文
  • 頁數: 302
  • 裝訂: Quality Paper - also called trade paper
  • ISBN: 1803243805
  • ISBN-13: 9781803243801
  • 相關分類: After EffectsReact使用者介面 UI
  • 海外代購書籍(需單獨結帳)

相關主題

商品描述

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.

商品描述(中文翻譯)

了解並開發沉浸式動畫以及用於 Telegram 的動畫貼紙,使用 Bodymovin、After Effects 和 LottieFiles,並利用此顏色指南將它們整合到您的 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 編程知識。雖然初學者級別的插畫技能是優先考慮的,但並非必要。