@farazzshaikh/react-native-simple-animations

Simple Animations

Simple Animations is a simple abstraction of the React Native Animated API built for iOS.

Installation

$ npm i @farazzshaikh/react-native-simple-animations --save

iOS

$ cd ios
$ pod install
$ cd ..

Usage

Import

import { RNSimpleAnimations } from '@farazzshaikh/react-native-simple-animations';

Initialize

Create new animation instance.

const animation = new RNSimpleAnimations(
    keyframes,
    delay,
    useNativeDriver
)

Assign Animation

Assign interpolated value to style property.

 <Animated.View
    style={{
        transform: [
            { translateX: animation.getValue() }
        ]
    }}
>

Play Animation

animation.start()

Example

Simple example of an animation that drives scale continuously. Example app in ./examples/src.

import React, { Component } from 'react';
import {
    Button,
    Animated,
    Easing
} from 'react-native';
import { RNSimpleAnimations } from '@farazzshaikh/react-native-simple-animations';

export default class Example extends Component {
    constructor(props) {
        super(props)
        // instantiation
        this.animation = new RNSimpleAnimations([1, 1.5, 1], 1000, true) 
          .setEasing(Easing.ease)
          .makeContinous()
    }
    render() {
        return (
            <>
                <Animated.View style={{
                    transform: [
                        scale: this.animation.getValue() // Assignment
                    ]
                }}>
                </Animated.View>
                <Button 
                    title={'Trigger'}
                    onPress={() => {
                        this.animation.start() // Execution
                    }}
                />
            </>
        )
    }
}

Documentation

Simple Animations is currently available with the following options:

constructor

Initialize Animation Instance.

new RNSimpleAnimations()

Options	Type	Discription
keyframes	Array	"An array of values representing animation points."
duration	Number	"Duration of the animation in milliseconds."
useNativeDriver	Boolean	"Whether to use Native Driver. Note: must be consistant among all animaton drving the same element."
driverKeyframes	Array	"An array of values, representing animaiton events in terms of time. Size of this array and keyframes array must be the same."

.getValue()

Get interpolated value. Must be assigned to style property.

animation.getValue()

Options	Type	Discription
none	-	-

.makeToggleable()

Make animation toggleable. i.e. play animation in reverse after playing it with play().

animation.makeToggleable()

Options	Type	Discription
none	-	-

.makeContinous()

Make Animation continous . i.e. loop animation continously after calling start() till stop() is called.

animation.makeContinous()

Options	Type	Discription
none	-	-

.setEasing()

Sets an easing function for animation interpolation.

animation.setEasing()

Options	Type	Discription
easing	EasingFunction	Easing Function.

.setDelay()

Sets delay before start of an anmation cycle.

animation.setDelay()

Options	Type	Discription
delay	Number	Delay in milliseconds.

.play()

Play animation.

animation.play()

Options	Type	Discription
callback	Function	Function that should be excicuted after animation starts.

.playBackward()

Play animation in reverse.

animation.playBackward()

Options	Type	Discription
none	-	-

.start()

Start continuous animation.

animation.start()

Options	Type	Discription
callback	Function	Function that should be excicuted after animation starts.

.stop()

Stop continuous animation that has started.

animation.stop()

Options	Type	Discription
animation	Function	Animation that has started.