React-Native 动画视图进出答案

【问题标题】：React-Native Animate View In and OutReact-Native 动画视图进出
【发布时间】：2020-07-02 05:51:36
【问题描述】：

目前，我正在为出现和消失的动画而苦苦挣扎。我的目标是让视图进出动画.. 但我还希望视图在动画后 100% 消失

想法

    ...

const visible: boolean = props.visible || false;
const [showView, setShowView] = useState<boolean>(visible);
const viewAnimation = useRef<Animatable.View & View>(null);

   useEffect(() => {
        const Animation = async () => {

            if (visible) {
                setShowView(true);
                if (viewAnimation.current)
                    await viewAnimation.current.bounceIn(2000);
            } else {
                if (viewAnimation.current)
                    await viewAnimation.current.bounceOut(2000);
                setShowView(false)
            }
        }

        Animation();
    }, [visible, viewAnimation]);

...

{showView &&
<Animatable.View ref={viewAnimation}>
...
</Animatable.View>
}

...

问题 viewAnimationRef 在下一个渲染周期中设置，而不是在将 showView 设置为 true 后立即设置 ->bounceIn 动画永远不会被执行.. 因为 viewAnimation.current 是 null..

我正在使用：

react-native 0.62
react-native-animatable 1.3.3

也许某人知道如何解决这个问题^^

谢谢

【问题讨论】：

标签： reactjs react-native react-animated react-native-animatable

【解决方案1】：

解决方案很简单，只需将 Animatable.View 包裹在普通视图周围，如果您想隐藏普通视图，请隐藏它

例子：

    ...

const visible: boolean = props.visible || false;
const [showView, setShowView] = useState<boolean>(visible);
const viewAnimation = useRef<Animatable.View & View>(null);

   useEffect(() => {
        const Animation = async () => {

            if (visible) {
                setShowView(true);
                if (viewAnimation.current)
                    await viewAnimation.current.bounceIn(2000);
            } else {
                if (viewAnimation.current)
                    await viewAnimation.current.bounceOut(2000);
                setShowView(false)
            }
        }

        Animation();
    }, [visible, viewAnimation]);

...


<Animatable.View ref={viewAnimation}>
{showView &&
<View>
...
</View>
}
</Animatable.View>


...

【讨论】：

【解决方案2】：

我创建了一个示例，其中平移和不透明度发生了变化，视图在屏幕内外平移

小吃：https://snack.expo.io/QWWCkYS7U

export default function App() {
  const value = new Animated.Value(0);

  React.useEffect(() => {
    Animated.sequence([
      Animated.timing(value, {
        toValue: 1,
        duration: 1000,
        easing: Easing.ease,
      }),
      Animated.timing(value, {
        toValue: 0,
        duration: 1000,
        easing: Easing.ease,
      })
    ]).start()
  }, []);

  const translateX = value.interpolate({
    inputRange: [0, 1],
    outputRange: [width, 0],
  });

  const opacity = value

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  view: {
    width: 300,
    height: 100,
    backgroundColor: 'red',
  },
});

【讨论】：

【解决方案3】：

我使用 Animated 库使用 3 步方法来创建动画。 #1 步骤 - 创建您想要动画的值 let motion= new Animated.Value(0);

#2 提供一种机制来动画这个值，使用内置函数之一，弹簧，衰减，计时

Animated.timing(motion,{toValue:100, duration:3000}).start();

#3 将动画值应用于您想要动画的组件/对象的一部分 PS。在您的情况下，您想要动画翻译所以最好的方法是在样式上动态分配动画值并将样式应用于组件 ///创建动态样式让 myStyle = { 变换：[{translateX:motion}]}

//给组件添加自定义样式

有关动画的更多信息，请查看此频道： https://www.youtube.com/watch?v=DwoSyhF3CkY

【讨论】：

刚才忘了说可以给.start(callcack)传一个回调函数在动画结束后执行，希望对你有帮助