在 react-native 动画中按下时动画

Question

我想在媒体上制作动画视图。

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>
        );
    }
}

但是当我只按下它的动画一次，而不是再次动画时。我想是因为，状态spinValue等于toValue第一次按下时的状态。所以我想到做这样的事情：

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,
    })
};

但这会使应用程序崩溃。我如何为 onPress 上的东西制作动画？

Answer 1

非常简单的解决方案：

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

如果您的动画是循环的（看起来确实如此），那么您只需在开始动画之前运行此行就可以了。

评论：没有理由让 Animated.Value 成为状态的一部分。一个很好的提示是您从未使用过 setState() 。