CODEWITHSUNDEEP
react-native
Kakar
Kakar

Reputation: 5599

Animate when pressed in react-native animated

I would like to animate a view on press.

export default class AnimatedRotation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            spinValue: new Animated.Value(0),
            color: '#F62459',
        }
    }

    rotateSpring = () => {
        Animated.spring(
            this.state.spinValue,
            {
                toValue: 1,
                friction: 1,
            }
        ).start();
        this.setState({
            color: this.state.color == '#F62469' ? '#FFC107' : '#F62469',
        })
    };

    render() {
        var spin = this.state.spinValue.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg'],
        });

        return (
            <View style={styles.container}>
                <Text style={styles.header}>Header</Text>
                <View style={styles.wrapper}>
                    <TouchableWithoutFeedback onPress={this.rotateSpring}>
                        <Animated.View style={[styles.circle, {
                            transform: [{rotate: spin},],
                            backgroundColor: this.state.color
                            }]}>
                            <Icon name="ios-add" color="white" size={50}/>
                        </Animated.View>
                    </TouchableWithoutFeedback>
                </View>
            </View>
        );
    }
}

But when I press its animating only once, and not animating again. I suppose its because, the state of spinValue equals to the toValue when its pressed for the first time. So I thought of doing something like this:

rotateSpring = () => {
    Animated.spring(
        this.state.spinValue,
        {
            toValue: this.state.spinValue + 1,
            friction: 1,
        }
    ).start();
    this.setState({
        color: this.state.color == '#F62469' ? '#FFC107' : '#F62469',
        spinValue: this.state.spinValue + 1,
    })
};

But this makes the app crash. How do I animate something onPress?

Upvotes: 5

Views: 10099

Answers (3)

skassi
skassi

Reputation: 138

I've been using functional programming but the logic is the same. In the Animated.spring(...).start() part, the start() returns a callback, where you can initialize any values you wish once the animation finished.

enter image description here

Upvotes: 0

Dror Aharon
Dror Aharon

Reputation: 153

Very simple solution:

this.state.spinValue.setValue(0);
Animated.spring(...);

If your animation is cyclic (and it looks like it is) then you should be fine with simply running this line before starting the animation.

Comment: There's no reason for the Animated.Value to be a part of the state. A good hint for that is the fact that you never used setState() with it.

Upvotes: 2

satya164
satya164

Reputation: 10145

this.state.spinValue + 1 gives an error, because this.state.spinValue is an animated value and not a number. So you cannot do normal additions to it. You'll need to get the numeric value and then increment it by 1.

For example,

this.state.spinValue.stopAnimation(value => {
  Animated.spring(this.state.spinValue, {
    toValue: value + 1,
    friction: 1,
  }).start();
});

You can also try the following (not tested),

Animated.spring(this.state.spinValue, {
  toValue: Animated.add(this.state.spinValue, 1),
  friction: 1,
}).start();

Upvotes: 0

Related Questions