Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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,
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement