如何重设本机动画？

Question

我使用react-native中的Animated制作了一些简单的动画 动画在第一次onPress之后会按预期工作，但我不知道如何重设动画以使其在下一次点击时起作用。

constructor(props) {
    super(props);
    this.spinValue = new Animated.Value(0);
    // Second interpolate beginning and end values (in this case 0 and 1)
    this.spin = this.spinValue.interpolate({
        inputRange: [0, 1, 2, 3, 4],
        outputRange: ['0deg', '4deg', '0deg', '-4deg', '0deg']
    });
}

handlePress() {
    // First set up animation 
    Animated.timing(
        this.spinValue,
        {
            toValue: 4,
            duration: 300,
        }
    ).start();
}

在渲染中

<TouchableWithoutFeedback onPress={() => { this.handlePress(); }} >
                    <Animated.Image
                        source={someImg}
                        style={{ height: undefined, width: undefined, flex: 1, transform: [{ rotate: this.spin }, { perspective: 1000 }] }}
                        resizeMode={'contain'}
                        resizeMethod="resize"
                    />
</TouchableWithoutFeedback>

有什么建议吗？谢谢

Answer 1

您可以使用this.spinValue.setValue(0)重置它。您可以将其添加到handlePress的开头。