UI Animations with Lottie and After Effects E-Book

Mireia Alegre Ruiz

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 245

Veröffentlichungsjahr: 2022

Beschreibung

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.

Leseprobe

UI Animations with Lottie and After Effects

Create, render, and ship stunning animations natively on mobile with React Native

Mireia Alegre Ruiz

Emilio Rodriguez Martinez

BIRMINGHAM—MUMBAI

UI Animations with Lottie and After Effects

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Rohit Rajkumar

Publishing Product Manager: Vaideeshwari Muralikrishnan

Senior Editor: Keagan Carneiro

Content Development Editor: Abhishek Jadhav

Technical Editor: Shubham Sharma

Copy Editor: Safis Editing

Project Coordinator: Rashika Ba

Proofreader: Safis Editing

Indexer: Pratik Shirodkar

Production Designer: Alishon Mendonca

Marketing Coordinator: Teny Thomas and Elizabeth Varghese

First published: June 2022

Production reference: 1310522

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80324-380-1

www.packt.com

To Max, my family, my partner and my wonderful friends – you all know who you are.


Oh well, and to Grammarly too, without its suggestions this book couldn't have been possible.

– Mireia

To Eugenia and my family who supported me through thick and thin.

– Emilio

Contributors

About the authors

Mireia Alegre Ruiz as a head of UX/UI and is proficient as a UX product designer and Illustration - Visual designer with motion graphics and video editing skills. Mireia has more than 20 years of professional experience sketching, illustrating, and creating micro animations from scratch since the old Macromedia Flash days. With a graphic design background, she made a move and specialized in digital design back in the early 2000s. Over the past few years, she has worked as a product designer for both international advertising agencies and Barcelona-based start-ups as a product designer. Always with the user in the center of the picture, and based on design thinking and Agile methodologies, her principles are very clear: make people's lives easier through the fair use of technology.

Emilio Rodriguez Martinez is a senior software engineer who has been working on highly demanding JavaScript projects since 2010. He transitioned from web development positions into mobile development, and has released dozens of successful apps for iOS and Android. Emilio has helped the React Native community through contributions to React Native's core codebase but also by maintaining the lottie-react-native library which is one of the most popular libraries in the React Native ecosystem.

About the reviewers

Joseph Khan is an engineering manager working with Seera Group based out of Dubai, UAE. He leads the development efforts for their Lumi brand, which is a car rental application. He is an AWS certified engineer and is also a former Packt author. He is enthusiastic about web standards, JavaScript, JAMStack, and architecting cloud applications

He has a B.Tech in Computer Science from NIT Silchar, India. Besides his regular work, he likes to design cars and motorbikes, spend time with his family, and play cricket.

Igor Mandrigin is an experienced software architect and engineering leader who has launched products from zero-in startups and big internet corporations. His core experience is in mobile, distributed systems, and product security, and has other experience in blockchain and smart contracts, DevOps and high availability, and technical product management.

Marina Oorthuis is a skilled product designer based in Barcelona. She has been working in the ed-tech market for many years and loves creating experiences that facilitate the user's learning in an intuitive and meaningful way. She is an advocate of the use of animations to achieve such goals.

Table of Contents

Preface

Part 1 - Building a Foundation With After Effects and LottieFiles

Chapter 1: Get Started With Lottie

Technical requirements

How to use this book

Introduction to Lottie

Why is it called Lottie?

The man behind the scenes

What is Lottie?

Do you still need more reasons to start using Lottie?

What is LottieFiles?

What can I do with LottieFiles?

Tools to create Lottie animations and integrations

Adobe After Effects

The Lottie extension for Adobe Animate

The LottieFiles platform

Summary

Chapter 2: Creating the Illusion: Get Rolling With the Basic Principles of 2D Classic Animation

Technical requirements

Introduction to 2D animation

The 12 principles of 2D animation

Squash and stretch

Anticipation

Staging

Straight-ahead action and pose-to-pose

Follow through and overlapping action

Ease in and ease out

Arcs

Secondary action

Timing

Exaggeration

Solid drawing

Appeal

Frames, keyframes, and inbetweens

Frames

Keyframes

Inbetweens

Timeline, timing, and ease

Timeline

Timing and ease

Drawing our icon

Storyboarding

Summary

Chapter 3: Learning the Tools: Getting Familiar With After Effects

Technical requirements

Getting to know the AE workspace

Customizing our workspace

Project panel

Understanding compositions

Timeline

Understanding layers

Type of layers

Layer properties

Animating using the Parent & Link option

Keyframes and animation

Exploring ease

Easy ease

Graph Editor

Summary

Part 2 - Cracking Lottie Animations

Chapter 4: Move It! Animating Our First Lottie With After Effects

Technical requirements

Creating your first project in Adobe AE – an animated check icon

Importing our icon to After Effects

Importing files from Sketch to AE

Importing files from Figma to AE

Exporting assets from XD to AE

UX animation workflow

Adjusting our icon composition settings

Understanding our check icon layers

Adding Keyframes

Changing scale

Adjusting the Opacity

Trim Paths

Working with radial bursts

Adding ease

Summary

Chapter 5: Share It With the World: Working With LottieFiles

Technical requirements

Exporting our animation for handoff

Exporting our animation using Bodymovin

Exporting our animation using LottieFiles

Creating a user account in LottieFiles

Exploring the LottieFiles dashboard

My Downloads

My Likes

My Public Animations

My Purchases

My Private Animations

The importance of testing in desktop and mobile LottieFiles platforms

Previewing .json files using the LottieFiles plugin for AE

Uploading and previewing .json files on the LottieFiles platform

Previewing our Lottie animations in the mobile LottieFiles app

Creating and editing a Lottie without using AE

Lottie URL

Lottie properties

Layers

Converting SVGs to animated Lotties in seconds

Converting Lottie to GIF in just one click

Creating your own personal stickers for Telegram

Summary

Chapter 6: Don’t Stop! Exploring Plugins and Resources That Will Keep You Going

Technical requirements

Downloading and installing the necessary plugins and tools

Downloading and installing Adobe AE

Downloading and installing the Bodymovin plugin for AE

Downloading and installing the LottieFiles plugin for AE

Downloading and installing the AEUX plugin for Sketch and Figma

Installing ZXP Extension Manager

The LottieFiles platform

Supported Lottie features for iOS, Android, and the web

Shapes

Fills

Strokes

Transforms

Interpolation

Masks

Mattes

Merge paths

Layer effects

Text

Other

Keyboard shortcuts that will make your life easier

General shortcuts

Transform properties shortcuts

Frames and keyframes shortcuts

Layers shortcuts

Free graphic resources and UX/UI inspiration

Graphic resources

UX/UI inspiration

Summary

Part 3 - Adding Your Lottie Animations Into Mobile Apps

Chapter 7: An Introduction to lottie-react-native

How did lottie-react-native come into being?

What is lottie-react-native?

Why are we not using Animated or Reanimated?

The basics of lottie-react-native

The open source project

Platforms

Versions

The npm package

Summary

Chapter 8: Installing lottie-react-native

Basic installation

Using npm

Using Yarn

Other dependencies of lottie-react-native

Installation requirements

iOS devices

Android devices

Limited features of the lottie-react-native library

Installing previous versions

Summary

Chapter 9: Let’s Do Some Magic: Integrating Your First Lottie Animation

Understanding the Lottie file elements

Using a Lottie file in a React Native app

Using lottie-react-native in your TypeScript app

Finding documentation for lottie-react-native

Using remote Lottie files

Using Lottie files with assets

Summary

Chapter 10: How To Nail It: Controlling Your Animation

Technical requirements

The declarative API

speed

onAnimationFinish

colorFilters

textFiltersAndroid and textFiltersIOS

The imperative API

Summary

Chapter 11: Any Questions? lottie-react-native FAQs

1. I added an effect to my animation but it's not rendered in the app

2. The animation is not rendered at all in my app

3. The animation looks stretched

4. How can I pause an animation?

5. How can I reverse an animation?

6. My animation is rendered on an iOS device but not on an Android device

7. My animation is rendered on an Android device but not on an iOS device

8. My app won't build on iOS after installing lottie-react-native

9. Some frames are not showing in my animation

10. My animation is showing the wrong colors or no colors at all

11. How can I use my Lottie animation as a splash screen?

12. There are images missing in my animation

13. How can I center my animation in the app?

14. How can I play my animation a set number of times?

15. My animation has a low playback performance

16. How can I change the colors of my animation programmatically?

17. How can I use a remote Lottie animation file in my app?

18. My app is crashing on Android

19. An error shows on my app – Cycle dependencies between targets

20. An error shows on my app – Execution failed for task ':lottie-react-native:compileDebugJavaWithJavac'

Summary

Why subscribe?

Other Books You May Enjoy

Part 1 - Building a Foundation With After Effects and LottieFiles

In this first part, we will get familiar with After Effects and Lottie. We will learn about creating 2D animations from scratch.

We will cover the following chapters in this section:

Chapter 1, Get Started With LottieChapter 2, Creating the Illusion: Get Rolling With the Basic Principles of 2D Classic AnimationChapter 3, Learning the Tools: Getting Familiar With After Effects

Chapter 1: Get Started With Lottie

Nowadays, vector animation is used in almost every single mobile app and website. It enriches a good UX design, helps designers guide users through interactions, and brings any screen to life.

However, adding animations to our web, iOS, Android, or React Native applications wasn't always as easy as you would think. Back then, implementing animations used to be very time-consuming and would greatly increase the size of files. But then one day, Lottie was finally released, and light and color came into the world of animations, especially for mobile apps and websites.

In this chapter, we will show you how to use this book so that you can make the most of it. Also, you will learn what Lottie is, why it was created, and the great value that it provides to both designers and developers.

You will be introduced to the LottieFiles platform, what it is used for, and the difference between Lottie animations and LottieFiles.

Additionally, you will get to know the tools you are going to need to create Lottie animations and where to get them from.

By the end of this chapter, you will have complete knowledge of what a Lottie animation is and how it makes life easier for designers and developers. Also, you will gain an understanding of what the LottieFiles platform is used for and where to get all the essential tools so that you can be ready to start thinking about your first animation.

In this chapter, we are going to cover the following main topics:

How to use this bookIntroduction to LottieWhat are LottieFiles?Understanding the tools to create Lottie animations

Technical requirements

As mentioned earlier, in this chapter, we are going to talk about the essential tools we will need during the process of creating a Lottie animation. Most of these tools are free for you to use. Note that Adobe After Effects is not available for free; however, you can download a 7-day free trial version.

Additionally, you will require a browser of your choice, for example, Chrome or Safari.

How to use this book

In this section, we will guide you through the main aspects of this book and why we thought this would be the best way for you to learn how to create animations with Lottie. We don't want this book to be just another After Effects manual that teaches you how to animate an icon (of course, we will cover that too), but we think it is just as important to have the basics and be able to sketch your own ideas and bring them to life before opening any kind of software. You can jump straight to the chapter that matches your interests best, but we highly recommend going through the book from start to finish.

We want you to be conscious that creating an animation does not simply involve adding some movement to a drawing by using some computer tools. It is the whole process that creates the magic, from ideation, the first sketches, to creating the illusion of movement through different animation techniques such as ease, tempo, and timeline keyframes. At some point, you might have thought why is this book talking about all this old-school stuff such as classic 2D animation?

Well, we could just have covered the process of downloading an animation, importing it into After Effects, and converting it into Lottie so that you could implement it in your app using React Native in a very short period of time... Yes, that would have been the easiest and shortest part (and we will do that too, don't worry).

However, we want to give you some more background, tips, and techniques about animation, so when you finish reading this book, you will be able to think big and create your own unique animations from scratch. Whatever it is you want to animate, we will teach you the basics and give you enough resources and tools so that you can keep on learning in your own time and at your own pace.

That's why we decided to split the book into three main parts:

Part 1, Building a Foundation With After Effects and LottieFilesPart 2, Cracking Lottie AnimationsPart 3, Adding Your Lottie Animations Into Mobile Apps

In the first part of this book, you are going to learn about the basics. As a first approach, we will go through Lottie; you will become familiar with the Lottie and LottieFiles keywords. While you keep reading, we will go into more depth about the entire Lottie ecosystem and will take a quick look at classic animation history.

We will get hands-on with the principles of classic 2D animation to understand the importance of ease and keyframes, two popular techniques that will help us to create the illusion of movement. We will go through the Adobe After Effects environment, getting to know the most relevant features so that, by the end of Part 1, Building a Foundation With After Effects and LottieFiles, we will be all set to start our first animation.

Once we have understood the basics of Lottie, 2D animations, and the Adobe After Effects environment, we will start creating our animated icon. In the second part of this book, we will guide you through a step-by-step tour of a real project to create our first unique animation. We are going to put into practice everything we have learned in the first three chapters. How? Well, we will start with a simple project in which we will be animating our first icon.

By sketching and drawing it, we will create a storyboard that will help us to understand what we want our icon to do. Once that's done, we are going to import this icon into Adobe After Effects and bring it to life by applying some of the 2D animation techniques learned earlier in the book. By the end of Part 2, Cracking Lottie Animations, we will know the best way to export our animations and get them ready to hand off to developers.

So, think about that; whether you are a designer or a developer, once you have finished the first two parts of this book, you will be able to ideate, sketch, illustrate, animate, and export your own unique ideas.

Let's keep moving. So, we will have finished our first animation and exported it. Everything is ready to go. We can't wait to see it implemented in our app or website. So, what next?

Now is where the third part of the book comes into play, and here is why it is so important. Let's imagine that you have spent a couple of days designing and creating your animation (yes, well done; animations are not quick things to do, at least, not the first time). You try to upload it into your app or the website of the app, but something goes wrong? Perhaps it doesn't look how it should or the animation in the app doesn't look the same as the one on the website. Maybe it is too heavy. Is it blurry? Is it responsive?

There are so many things that can ruin your fantastic animation, but let's not panic. Here's where Part 3, Adding Your Lottie Animations Into Mobile Apps, comes in handy. That is where you will learn everything you need to know about how to test and implement your fabulous, stunning, and well-created Lottie animation onto any platform, simply and easily. Thanks to Lottie and React Native, your animation won't look pixelated, be too heavy, or do any other weird stuff.

Once you have mastered the process of creating your own animations and uploading them onto your platforms using React Native, none of these issues will happen again, and your fantastic and unique animation will shine on the screen, just as it was meant to be.

So, now that you understand why this book has been divided into three different parts and why all of them are important, let's move on to discover what Lottie is.

Introduction to Lottie

Now that we know each other a bit better, let's see what all this Lottie fuss is about. Let's start from the beginning and talk about a bit of history.

Why is it called Lottie?

The name Lottie was chosen as a tribute to Charlotte "Lotte" Reiniger, a German film director from the 20th century who became the foremost pioneer of silhouette animation. This is a technique based on cut-out figures that are moved frame by frame and filmed with a camera.

The man behind the scenes

After Apple decided Macromedia Flash wasn't going near any iPod or iPhone, adding animations to our applications and websites became a nightmare. Animations had to be exported in low-quality formats; otherwise, developers had to recreate the code themselves. You can imagine how many of these ended up: the file sizes were too big, visualization was really poor, the process was painful, and the results were frustrating.

But then, in 2015, Hernan Torrisi, who had been working as an Action Script developer, came up with an idea. He started building a player and an exporter for After Effects, and this is where the Bodymovin plugin came to life. To be clear, the Bodymovin plugin transforms the animation into a JSON file, but we will talk about that later.

Torrisi also developed a browser-based renderer that takes the Bodymovin plugin's JSON files and plays back the animation.

Then, when Airbnb engineers Brandon Withrow (on iOS), Gabriel Peal (on Android), and Leland Richardson (on React Native) realized the power of these JSON-based animations, they decided to partner with animator and experienced designer Salih Abdul-Karim to help develop Android, iOS, and React Native renderers for the Bodymovin plugin's JSON.

Meanwhile, the LottieFiles platform was also launched, and a great community of animators, designers, and developers was born. Here, they could preview, test, and share their own animations.

In 2020, dotLottie was created as a way to standardize the format.

In early 2021, the same team came up with the LottieFiles plugin, which works just as well as Bodymovin. Both export animations in .JSON format; however, the LottieFiles plugin adds some extra features, which we will cover in more depth soon.

What is Lottie?

Figure 1.1 – The Lottie icon

It took me a while to understand what Lottie is exactly. There are lots of conversations going on out there about Lottie, LottieFiles, Lottie file, Lottie animations, dotLottie, and the LottieFiles plugin that can, sometimes, get a bit confusing.

Essentially, Lottie is a library for iOS, Android, and React Native that will convert the animations that we will be creating in Adobe After Effects into lines of code. It does this very easily and without