react-native-keyframe-easing v0.3.0

React Native Keyframe Easing

Create CSS keyframe-based animations in React Native

Installation

yarn add react-native-keyframe-easing

or

npm install react-native-keyframe-easing

Why do I need this?

Usually in timing animations, the easing function is applied to the entire duration of the animation. With the keyframe helper from this library, you can control what easing function to use in each keyframe during the animation.

import keyframe from 'react-native-keyframe-easing'

const easeInOut = Easing.bezier(0.42, 0.0, 0.58, 1.0)

const value = new Animated.Value(0)
Animated.timing(value, {
  duration: 1200,
  toValue: 100,
  easing: keyframe({ easing: easeInOut, keyframes: [0, 50, 100] }),
  useNativeDriver: true,
})

In the example above, keyframe will apply the easing function you want to use (easeInOut) to each keyframe, so easeInOut will be applied twice, from 0 to 50 and from 50 to 100.

You can also target a specific keyframe and apply a different easing function to it.

Animated.timing(value, {
  duration: 1200,
  toValue: 100,
  easing: keyframe({
    easing: easeInOut,
    keyframes: [0, 50, 100],
    easingByKeyframe: { 50: Easing.linear },
  }),
  useNativeDriver: true,
})

API

keyframe

(config: KeyframeConfig) => EasingFunction

This function applies an easing function to each keyframe based on a config.

KeyframeConfig

An object that contains:

keyframes

number[]

And array of keyframes used in the animation.

This array must have at least 3 items. If you're animating from 0 to 100 then the first item should be 0 and the last item should be 100.

easing?

(value: number) => number | default to Easing.inOut(Easing.ease)

The default easing function that will be used in all keyframes.

easingsByKeyframe?

{ [key: number]: EasingFunction } | defaults to {}

You can specify the easing function you want to use for an individual keyframe. If no easing function is specified, the value from easing will be used.

Example

To run the example project, follow these steps:

• Clone the repo
• Run these commands

yarn
cd example
yarn && yarn start