React-Native 动画视图进出

Question

目前，我正在为出现和消失的动画而苦苦挣扎.. 我的目标是为一个视图制作动画，然后再出来。但我还希望视图在动画后 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 是空的..

我正在使用：

反应本机 0.62
react-native-animatable 1.3.3

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

谢谢

Answer 1

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

小吃：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',
  },
});

Answer 2

解决方法很简单，只需将 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>


...

Answer 3

我使用 3 步方法使用动画库创建动画。 #1 步骤 - 创建你想要动画的值让运动=新Animated.Value(0);

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

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

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

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

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

React-Native 动画视图进出

React-Native Animate View In and Out

reactjs

react-native

react-animated

react-native-animatable