0

目前，我正在为出现和消失的动画而苦苦挣扎。我的目标是让视图进出动画。但我也希望视图在动画后 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
  • 反应原生动画 1.3.3

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

谢谢

4

3 回答 3

3

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


...
于 2020-07-02T10:39:19.877 回答
0

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

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

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

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

//给组件添加自定义样式 <YourComponent style={[anyOtherStyle, myStyle]}/>

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

于 2020-09-15T15:49:40.153 回答
0

我创建了一个示例，其中翻译和不透明度发生了变化，并且视图在屏幕内外转换

小吃：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',
  },
});
于 2020-07-02T06:41:23.137 回答