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为null ..

我正在使用：

本机0.62
可原生反应的动画1.3.3

也许某人有一个解决这个问题的想法^^

谢谢

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


...

Answer 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',
  },
});

Answer 3

我使用三步法使用Animated库创建动画。第一步-创建要设置动画的值 let motion = new Animated.Value（0）;

＃2提供一种机制来对此值进行动画处理，使用内置函数之一（弹簧，衰减，计时）

Animated.timing（motion，{toValue：100，duration：3000}）。start（）;

＃3将动画值应用于要设置动画的组件/对象的多值性 PS。在您的情况下，您希望对翻译进行动画处理，因此最好的方法是在样式上动态分配动画值，并将样式应用于组件 ///创建动态样式让myStyle = {transform：[{translateX：motion}]}

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

有关动画的更多信息，请访问以下频道： https://www.youtube.com/watch?v=DwoSyhF3CkY

反应本机动画查看

3 个答案: