Easing
The
Easing module implements common easing functions. This module is used by
Animated.timing() to convey physically believable motion in animations.
The Easing module provides several predefined animations through the following methods:
back provides a basic animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a basic inertial animationelastic provides a basic spring interaction
Three standard easing functions are provided:
The
poly function can be used to implement quartic, quintic, and other higher power functions.
Additional mathematical functions are provided by the following methods:
bezier provides a cubic bezier curvecircle provides a circular functionsin provides a sinusoidal functionexp provides an exponential function
The following helpers are used to modify other easing functions.
in runs an easing function forwardsinOut makes any easing function symmetricalout runs an easing function backwards
import React from "react";
import { Animated, Easing, SectionList, StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native";
export default function App() {
let opacity = new Animated.Value(0);
const animate = easing => {
opacity.setValue(0);
Animated.timing(opacity, {
toValue: 1,
duration: 1200,
easing
}).start();
};
const size = opacity.interpolate({
inputRange: [0, 1],
outputRange: [0, 80]
});
const animatedStyles = [
styles.box,
{
opacity,
width: size,
height: size
}
];
return (
<View style={styles.container}>
<StatusBar hidden={true} />
<Text style={styles.title}>
Press rows below to preview the Easing!
</Text>
<View style={styles.boxContainer}>
<Animated.View style={animatedStyles} />
</View>
<SectionList
style={styles.list}
sections={SECTIONS}
keyExtractor={(item) => item.title}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => animate(item.easing)}
style={styles.listRow}
>
<Text>{item.title}</Text>
</TouchableOpacity>
)}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.listHeader}>{title}</Text>
)}
/>
</View>
);
}
const SECTIONS = [
{
title: "Predefined animations",
data: [
{ title: "Bounce", easing: Easing.bounce },
{ title: "Ease", easing: Easing.ease },
{ title: "Elastic", easing: Easing.elastic(4) }
]
},
{
title: "Standard functions",
data: [
{ title: "Linear", easing: Easing.linear },
{ title: "Quad", easing: Easing.quad },
{ title: "Cubic", easing: Easing.cubic }
]
},
{
title: "Additional functions",
data: [
{
title: "Bezier",
easing: Easing.bezier(0, 2, 1, -1)
},
{ title: "Circle", easing: Easing.circle },
{ title: "Sin", easing: Easing.sin },
{ title: "Exp", easing: Easing.exp }
]
},
{
title: "Combinations",
data: [
{
title: "In + Bounce",
easing: Easing.in(Easing.bounce)
},
{
title: "Out + Exp",
easing: Easing.out(Easing.exp)
},
{
title: "InOut + Elastic",
easing: Easing.inOut(Easing.elastic(1))
}
]
}
];
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#20232a"
},
title: {
marginTop: 10,
textAlign: "center",
color: "#61dafb"
},
boxContainer: {
height: 160,
alignItems: "center"
},
box: {
marginTop: 32,
borderRadius: 4,
backgroundColor: "#61dafb"
},
list: {
backgroundColor: "#fff"
},
listHeader: {
paddingHorizontal: 8,
paddingVertical: 4,
backgroundColor: "#f4f4f4",
color: "#999",
fontSize: 12,
textTransform: "uppercase"
},
listRow: {
padding: 8
}
});
static step0(n)
A stepping function, returns 1 for any positive value of n.
static step1(n)
A stepping function, returns 1 if n is greater than or equal to 1.
static linear(t)
A linear function, f(t) = t. Position correlates to elapsed time one to one.
static ease(t)
A basic inertial interaction, similar to an object slowly accelerating to speed.
static quad(t)
A quadratic function, f(t) = t * t. Position equals the square of elapsed time.
static cubic(t)
A cubic function, f(t) = t * t * t. Position equals the cube of elapsed time.
static poly(n)
A power function. Position is equal to the Nth power of elapsed time.
static sin(t)
A sinusoidal function.
static circle(t)
A circular function.
static exp(t)
An exponential function.
static elastic(bounciness)
A basic elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
static back(s)
Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
static bounce(t)
Provides a basic bouncing effect.
static bezier(x1, y1, x2, y2)
Provides a cubic bezier curve, equivalent to CSS Transitions' transition-timing-function.
static in(easing);
Runs an easing function forwards.
static out(easing)
Runs an easing function backwards.
static inOut(easing)
Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.