如何重置React原生动画？

ycggw6v2 于 2023-08-07 发布在 React

关注(0)|答案(3)|浏览(113)

我已经做了一些简单的动画使用Animated从react-native的动画工作后，第一次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();
}

字符串
在render中

<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>

型
有什么建议吗？谢啦，谢啦

react-native

来源：https://stackoverflow.com/questions/51712114/how-to-reset-a-react-native-animation

3条答案

按热度按时间

3z6pesqy1#

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

赞(0）回复(0）举报 2023-08-07

4si2a6ki2#

如果只有一个动画值，this.spinValue.setValue(0)将完成这项工作，正如Antoine在他的评论中提到的那样。在更复杂的序列的情况下，使用动画API中的reset（）。下面是一个只有2个动画引用的简单示例：

import React, { useEffect, useRef, useCallback } from 'react;
import { Animated } from 'react-native';

const animationFn = ({ opacity, offset }) => {
  return Animated.sequence([
      Animated.timing(opacity, {
      toValue: 1,
      useNativeDriver: true,
      duration: 200,
    }),
    Animated.timing(offset, {
      toValue: 100,
      useNativeDriver: true,
      duration: 500,
    }),
  ]);
};

const App = () => {
  const opacity = useRef(Animated.Value(0)).current;
  const offset = useRef(Animated.Value(0)).current;
  const animation = useRef(animationFn({ opacity, offset })).current;

  useEffect(() => {
    const animationEnd = {
      // it resets all the initial values, in our case opacity and offset 
      // to initial values before the animation started
      animation.reset(); 
    };

    animation.start(animationEnd);
  }, []);

  return (
    <Animated.View styles={[viewStyles, { opacity, transform: [{ translateX: offset }] }]} />
  );
}

字符串
没有测试这个特定的片段，但这应该给予你对animation.reset()的工作原理有一个概念。animation.reset()可以在动画结束、onPress、组件清理阶段等调用。

赞(0）回复(0）举报 2023-08-07

shyt4zoc3#

你可以使用Aminated.reset()方法。

赞(0）回复(0）举报 2023-08-07