淡入黑色过渡答案

【问题标题】：Fade to Black Transition淡入黑色过渡
【发布时间】：2020-04-18 22:01:03
【问题描述】：

是否有一个 React Native 导航过渡通过淡入黑色，然后从黑色淡出到下一个屏幕？

已经用谷歌搜索了一段时间，我只找到了改变屏幕不透明度的方法，或者从左到右或从右到左移动它，但我还没有找到从屏幕到黑色的过渡。任何帮助将非常感激。

【问题讨论】：

您可以在组件上使用绝对定位的全屏Animated.View 和backgroundColor: 'black'，从opacity: 0 开始。然后，当用户按下按钮将您的动画导航到不透明度为 1 时，您在完成动画后的回调是导航到下一个屏幕。您的下一个屏幕以相同的组件开始，但不透明度：1，并且您的 componentDidMount 将不透明度设置为 0。我认为这应该可以...
仍然可以看到屏幕上的元素，比如一个蓝色的
就算设置高zIndex?另一种方法是相反，让黑色全屏视图位于其他所有内容之后，即 zIndex 低于主视图，然后将主视图淡化为 opacity: 0

标签： javascript reactjs react-native transition react-navigation-stack

【解决方案1】：

如果您使用的是最新版本的react-navigation-stack，则可以使用CardAnimationContext/useCardAnimation 来实现：

import * as React from 'react';
import { Animated, Button, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import {
  createStackNavigator,
  CardStyleInterpolators,
  HeaderStyleInterpolators,
  useCardAnimation,
} from 'react-navigation-stack';

function ScreenA({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
      <Button onPress={() => navigation.push('ScreenB')} title="Go to B" />
    </View>
  );
}

function ScreenB() {
  const { current } = useCardAnimation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Animated.View
        style={[
          StyleSheet.absoluteFill,
          { backgroundColor: 'black', opacity: current.progress },
        ]}
      />
    </View>
  );
}

const Stack = createStackNavigator({
  ScreenA,
  ScreenB,
});

【讨论】：

【解决方案2】：

只需在屏幕后面放置一个黑色的<div>，然后

感谢@Prajwal，CSS 过渡解决方案：

document.getElementsByTagName(`main`)[0].style.opacity = `0`;

  main {
    position: fixed; /* place it before .black */
    background-color: white;
    width: 100%;
    height: 100%;
    transition-property: opacity; /* set opacity to one of the transition properties */
    transition-duration: 4s; /* set transition duration */
  }

  .black {
    position: fixed; /* place it behind main */
    background-color: black; /* make it black */
    width: 100%; /* make it fill available space */
    height: 100%; /* make it fill available space*/
  }

  body {
    margin: 0; /* make it fill available space*/
  }

<body>
<div class="black"></div>
<main>
  <p>lorem</p>
</main>
</body>

你也可以使用setInterval()函数来一点一点的降低不透明度。

  const step = 0.05; // set the step of opacity change
  const timeInterval = 200; // set the sleep time of opacity change
  const times = 1 / step; // calculate times needed for opacity change
  document.getElementsByTagName(`main`)[0].style.opacity = `1`; // set initial opacity to make getting the float value of it work.
  let time = 0; // initially, the time of making changes is zero
  const lowerOpacity = window.setInterval(function() {
      if (time + 1 === times) {
        window.clearInterval(lowerOpacity);
      } // clearInterval() when the time of changes has reached the needed times
      document.getElementsByTagName(`main`)[0].style.opacity =
        `${parseFloat(document.getElementsByTagName(`main`)[0].style.opacity) -
        0.05}`; // set the opacity to make it dimmer
      time += 1; // increment time to match the changed times
    }
    , timeInterval);

  main {
    position: fixed; /* place it before .black */
    background-color: white;
    width: 100%;
    height: 100%;
  }

  .black {
    position: fixed; /* place it behind main */
    background-color: black; /* make it black */
    width: 100%; /* make it fill available space */
    height: 100%; /* make it fill available space*/
  }

  body {
    margin: 0; /* make it fill available space*/
  }

<body>
<div class="black"></div>
<main>
  <p>lorem</p>
</main>
</body>

【讨论】：

或者使用 CSS 过渡。效果相同，成本更低。
@Prajwal 谢谢，没想到。将更新我的答案。
OP 想知道如何在 React Native 中做到这一点 :)
React Native 不一样，可能是动画 API 什么的？
@VilleKoo 谢谢，我会留在这里。