/RN-SimpleAnimations

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

Primary LanguageJavaScript

forthebadge

Simple Animations

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

demo

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.