animation.react.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import {
    View,
    Animated,
    ViewPropTypes,
    Easing,
} from 'react-native';
import { find } from '@Utilities/index';

export default class Animation extends PureComponent {
    static ANIMATION_KEY_REGEX = /.+?{animValue}.+?/;

    constructor(props) {
        super(props);
        this.animatedValue = new Animated.Value(this.props.initialValue);
    }

    componentWillUnmount() {
        this.animatedValue.removeAllListeners();
    }

    shouldComponentUpdate(nextProps) {
        this.rotate(nextProps);
        return true;
    }

    animate = (toValue) => {
        this.onStart();
        this.animation(toValue).start(this.onFinish);
    };

    animation = toValue => Animated.timing(
        this.animatedValue,
        {
            toValue,
            delay: this.props.delay,
            easing: this.props.easing,
            duration: this.props.duration,
            isInteraction: this.props.isInteraction,
            useNativeDriver: this.props.useNativeDriver,
        },
    );

    animatedStyle = () => ({
        ...this.props.style,

    });

    calculateAnimationStyle = () => {
        
    }

    getAnimationPaths = () => find(this.props.style, Animation.ANIMATION_KEY_REGEX);

    onFinish = () => {
        this.props.onFinish();
    };

    onStart = () => {
        this.props.onStart();
    };

    render() {
        const animatedStyle = this.animatedStyle();
        return (
            <Animated.View style={[
                this.props.style,
                animatedStyle,
            ]}
            >
                {this.props.children}
            </Animated.View>
        );
    }
}

Animation.defaultProps = {
    initialValue: 0,
    style: {},
    animationStyle: {},
    children: <View />,
    onFinish: () => { },
    onStart: () => { },

    // animation default props
    delay: 0,
    duration: 1000,
    easing: Easing.out(Easing.ease),
};

Animation.propTypes = {
    initialValue: PropTypes.number,
    style: ViewPropTypes.style,
    animationStyle: ViewPropTypes.style,
    onFinish: PropTypes.func,
    onStart: PropTypes.func,
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node,
    ]).isRequired,

    // animation props
    duration: PropTypes.number,
    easing: PropTypes.func,
    delay: PropTypes.number,
    isInteraction: PropTypes.bool,
    useNativeDriver: PropTypes.bool,
};