reactjs - 如何重置 react 原生动画？

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 的开头。