How to handle

complex animations ?

React Native

Animated

Animated from React Native

import {Animated, Easing} from 'react-native';
state = {
    animatedManicule: new Animated.Value(0);
}

import Animated

define a new Animated.Value()

Animated.timing(this.state.moveManicule, {
    toValue: 1,
    duration: 1000,
    delay: 0,
    easing: Easing.bezier(0,.53,.47,1),
}).start();

Animated.timing()

animateManicule() {
    Animated.loop(
        Animated.sequence([
            Animated.timing(this.state.moveManicule, {
                toValue: 1,
                duration: 1000,
                delay: 0,
                easing: Easing.bezier(0,.53,.47,1),
            }),
            Animated.timing(this.state.moveManicule, {
                toValue: 0,
                duration: 1000,
                delay: 0,
                easing: Easing.bezier(0,.53,.47,1),
            }),
        ])
    ).start();
}

Animated.loop() & Animated.sequence([ Array ])

render() {
    return(
        <Animated.View>
            <Image
                source={WhiteManicule}
            />
        </Animated.View>
    )
}

Change our View to an Animated.View

render() {
    return(
        <Animated.View
            style={{
                top: this.state.moveManicule.interpolate({
                    inputRange: [0, 1],
                    outputRange: [100 , 90]
                })
            }}
        >
            <Image
                source={WhiteManicule}
            />
        </Animated.View>
    )
}

Interpolate our Animated.Values

componentDidMount() {
    this.animateManicule();
}

lets call our final function

it's working nice :)

More on react native animations with Animated here

Lottie

from After Effects to React Native

import { Animated, Easing } from 'react-native';
import LottieView from 'lottie-react-native';

import Animated

import LottieView

state = {
    progress: new Animated.Value(0);
}

define a new Animated.Value()

animateWithLottie() {
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 5000,
      easing: Easing.linear,
    }).start();
}

Animated.timing()

render() {
    return (
        <LottieView 
            source={require('../path/to/animation.json')} 
            progress={this.state.progress} 
        />
    );
}

Change our View to a LottieView

componentDidMount() {
    this.animateWithLottie();
}

lets call our final function

But what about the puppet tool with After Effects and Lottie ?

If you can't export Lottie's json files because of the puppet tool with After Effects.. we introduce you

APNG player

from After Effects to React Native

node Utils/APNGCompiler.js -i ./src/Assets/Animations/Pages/raw/ -o ./src/Assets/Animations/Pages/compiled/"

lets prepare our animations

import ApngPlayer from "./ApngPlayer";

import ApngPlayer

import chevalier from "./Assets/Animations/Pages/compiled/CHEVALIER_loop.png";

import your APNG animation

render() {
    return(
        <ApngPlayer
            playlist={[chevalier]}
        />
    )
}

Change our Image to an ApngPlayer

it's working nice :)

soon on npm

Why not GIF ? Or Video ?

  • apng supports 24-bit and 8-bit transparency

  • ​apng tend to be smaller

  • better quality (more colors, and the ability for transparency)

  • not a popular format

Thank you

Designers

Clara Morineau

Manon Carrour

Martin Jouvet

Developers

Remi Caillot

Pauline Stichelbaut

Copy of How to handle complex animations with React Native ?

By Pauline Stichelbaut

Made with Slides.com

Copy of How to handle complex animations with React Native ?

Behind the screens of Gargantua, childrens book with Ipad App on IOS.

  • 852

More from Pauline Stichelbaut