My App has More Complicated Animations Than Yours

Introduction

The video introduces the Wiggle, a simple animation that is actually quite complex. The presenter provides a warning that he will be showing how the animation is made.

Introducing the Wiggle

• The Wiggle is a seemingly simple animation that is actually quite complex.

• The presenter warns viewers that he will be showing how the animation is made.

Building the Animation in Figma

In this section, the presenter explains how to build an oscillating animation in Figma and export it as SVGs.

Creating Pain Sprite and Pain Sprite Number Two

• To create an oscillating animation in Figma, start by creating two frames of an object.

• Export both frames as SVGs with names indicating which emotion they represent and which frame they are (e.g., "abandonment_stage1_frame0").

• Use these exported SVGs to create animations later on.

Converting SVGs to JSON with Import Pets

• Use a script called Import Pets to convert all exported SVGs into JSON files.

• This script reads in all the SVGs and converts them using a function to parse each path inside of it.

• The output is a giant file called PATH map layers containing every pet's SVG paths and props passed to it.

Rendering Static Layers

In this section, we learn how static layers are rendered using React Native's SVG components.

Using Static Layer Component for Rendering

• A static layer component takes JSON blobs as input and renders them as circles, ellipses or paths depending on their shape.

• Linear gradients also need rendering separately from other shapes.

Animating Individual Paths

In this section, we learn about animating individual paths using React Native's SVG components.

Animating Paths with Pet Sprite

• Pet Sprite is the top-level component where animation starts.

• Reanimated library is used to keep track of progress in the animation.

• The interpolate path function from D3 interpolate path library takes two paths and a number between 0 and 1, then spits out an interpolated SVG path.

Rendering Individual Paths

In this section, we learn how individual paths are rendered using React Native's SVG components.

Using Animate Layer Component for Rendering

• Animate Layer component renders each individual path as its own component.

• If not animating, it keeps the layer static; otherwise, it uses the interpolate path function to animate.

How the Wiggle is Made

In this section, the speaker explains how the wiggle animation is made for pets in a React Native app.

Interpolating Properties

• The SVG renders every single path in the SVG by adding two numbers together and dividing it by two.

• Other properties are interpolated using a function called lerp that uses x, y, range, and progress values to interpolate positions and sizes of circles.

• All frames are stored in a used memo to avoid recomputing on the fly every time.

Use Animated Props Function

• The use animated props function loops over and over again to render an in-between frame every time.

• The animation changes string values multiple times per second for each path.

• There are 670 different strings stored when rendering this little animation.

Synchronizing Pet Wiggle with Item

• The pet wiggle is synchronized with items such as hats and collars on its head.

• Progress value is interpolated between X and Y values of the hat to match where that pet will be.

• A giant JSON file stores starting X and ending X position for items on the pet.

Optimization Techniques

In this section, the speaker discusses optimization techniques for rendering pets in a React Native app.

Device Limitations

• Around 20 pets deteriorate depending on device limitations.

• Android starts crapping out at around 10 or 15 pets while iOS performs better.

SVGO Optimization Technique

• SVGO was tried but broke the interpolator at least for path one.

• It may be looked into further in future optimizations.

Lottie Animation Technique

• Switching to images and doing some kind of Lottie animation may be a potential optimization technique in the future.

• This is recommended by people who have experienced issues with rendering intense pets.

React Native Skia

• React Native Skia was tried but ended up being slower than rendering software at the reacting of SVG.