如何在react-native上运行动画

Question

我想当你按下一个按钮时，动画会以setState btnLoaded的{​​{1}}运行，为了那个好，但我希望这一次动画完成后，单击按钮时，动画不再执行，因为它已经启动并完成。

我不知道该怎么做。

这是动画的功能：

true

按钮代码：

startButtonAnimation = () => {

    this.animatedValue.setValue(0);
    if (this.state.btnLoaded) {

        Animated.timing(
            this.animatedValue,
            {
                toValue: 1,
                duration: 500,
                useNativeDriver: true,
                easing: Easing.bezier(0.15, 0.73, 0.37, 1.2)
            }
        ).start();

   }}

行动准则：

感谢您的帮助！

Answer 1

From the docs：

  

通过在动画上调用start（）来启动动画。 start（）接受完成回调，动画完成后将调用它。

此：

    startButtonAnimation = () => {

    this.animatedValue.setValue(0);
    if (!this.state.btnLoaded) {
        this.setState({
            btnLoaded: true, 
        });
        Animated.timing(
            this.animatedValue,
            {
                toValue: 1,
                duration: 500,
                useNativeDriver: true,
                easing: Easing.bezier(0.15, 0.73, 0.37, 1.2)
            }
        ).start(() => {

    }};
...

   <TouchableOpacity
    activeOpacity={0.9}
    onPress={() => {
        setTimeout(() => this.startButtonAnimation(), 50);
    }}
    >

可能会这样做。您应该添加更多代码，以便更好地了解正在进行的操作。

Answer 2

通过使用this.animatedValue.setValue(0);，您可以将动画重新设置为0。如果将此代码放置在按钮的回调之外，那么即使重新启动动画，动画也将已经到达其toValue（此处为1 ），因此它不会再次运行。