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（）。

Answer 2

this.state.spinValue + 1会出错，因为this.state.spinValue是一个动画值，而不是数字。所以你不能正常添加它。您需要获取数值，然后将其递增1。

例如，

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

您还可以尝试以下（未测试），

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

在反应原生动画中按下时动画

2 个答案: