在 React Native 中实现 Twitter 的 App 加载动画
Twitter 的 iOS 应用有一个我非常喜欢的加载动画。
应用准备就绪后，Twitter 徽标会以愉悦的方式展开，露出应用。
我想弄清楚如何在 React Native 中重现此加载动画。
为了理解 *如何* 构建它，我首先必须了解加载动画的不同组成部分。最简单的查看其细微差别的办法是将其放慢。
其中有几个主要部分，我们需要弄清楚如何构建它们。
- 缩放小鸟。
- 随着小鸟变大，显示下面的应用
- 在动画结束时稍微缩小应用
我花了好长时间才弄清楚如何制作此动画。
我一开始 *错误地* 认为蓝色背景和 Twitter 小鸟是在应用 *顶部* 的一层，并且随着小鸟变大，它会变得透明，从而显示出下面的应用。这种方法行不通，因为 Twitter 小鸟变得透明会显示蓝色层，而不是下面的应用！
幸运的是，亲爱的读者，你不必经历我所经历的挫败感。你可以通过本教程，直接跳到重点内容！
正确的方法
在我们开始编写代码之前，了解如何将其分解非常重要。为了帮助你直观地了解此效果，我在 CodePen（嵌入在几个段落中）中重现了它，以便你可以交互式地查看不同的图层。
此效果主要有三个图层。第一个是蓝色背景层。即使这似乎出现在应用的顶部，但它实际上是在后面。
然后我们有一个纯白色图层。最后，最前面是我们的应用。
此动画的主要技巧是使用 Twitter 徽标作为 mask，并遮盖应用和白色图层。我不会深入探讨遮罩的细节，有很多 资源 在线 可以帮助你了解这一点。
在此上下文中，遮罩的基本原理是拥有图像，其中遮罩的不透明像素显示它们所遮罩的内容，而遮罩的透明像素则隐藏它们所遮罩的内容。
我们使用 Twitter 徽标作为遮罩，并使其遮罩两个图层：纯白色图层和应用图层。
为了显示应用，我们将遮罩放大，直到它大于整个屏幕。
在遮罩放大的同时，我们淡入应用图层的透明度，显示应用并隐藏其背后的纯白色图层。为了完成效果，我们让应用图层在开始时的缩放比例 > 1，并在动画结束时将其缩放到 1。然后我们隐藏非应用图层，因为它们以后将不再可见。
俗话说，一张图片胜过千言万语。交互式可视化值多少个字？使用“下一步”按钮浏览动画。显示图层可以让你从侧面查看。网格有助于直观地了解透明图层。
现在，关于 React Native
好的。现在我们知道了要构建的内容以及动画的工作原理，我们可以开始编写代码了——你真正来这里的目的。
此难题的主要部分是 MaskedViewIOS，一个 React Native 核心组件。
import {MaskedViewIOS} from 'react-native';
<MaskedViewIOS maskElement={<Text>Basic Mask</Text>}>
<View style={{backgroundColor: 'blue'}} />
</MaskedViewIOS>;
MaskedViewIOS 接收属性 maskElement 和 children。子元素被 maskElement 遮罩。请注意，遮罩不需要是图像，它可以是任何任意视图。上面示例的行为是渲染蓝色视图，但它仅在 maskElement 中“基本遮罩”文字所在的位置可见。我们只是创建了复杂的蓝色文本。
我们要做的是渲染我们的蓝色层，然后在顶部使用 Twitter 徽标渲染我们遮罩的应用和白色层。
{
fullScreenBlueLayer;
}
<MaskedViewIOS
style={{flex: 1}}
maskElement={
<View style={styles.centeredFullScreen}>
<Image source={twitterLogo} />
</View>
}>
{fullScreenWhiteLayer}
<View style={{flex: 1}}>
<MyApp />
</View>
</MaskedViewIOS>;
这将给我们下面看到的图层。
现在是 Animated 部分
我们拥有使它工作所需的所有组件，下一步是为它们制作动画。为了使此动画效果良好，我们将利用 React Native 的 Animated API。
Animated 允许我们在 JavaScript 中声明式地定义我们的动画。默认情况下，这些动画在 JavaScript 中运行，并在每一帧告诉原生层要进行哪些更改。即使 JavaScript 会尝试在每一帧更新动画，但它可能无法足够快地做到这一点，并且会导致出现丢帧（卡顿）的情况。这不是我们想要的！
Animated 具有特殊的行为，允许你在没有卡顿的情况下获得动画。Animated 有一个名为 useNativeDriver 的标志，它会在动画开始时将你的动画定义从 JavaScript 发送到原生层，允许原生端处理对动画的更新，而无需在每一帧都来回访问 JavaScript。useNativeDriver 的缺点是只能更新特定的一组属性，主要是 transform 和 opacity。你无法使用 useNativeDriver 为背景颜色制作动画，至少目前还不行——我们以后会添加更多内容，当然，你也可以随时为你的项目所需的属性提交 PR，使整个社区受益 😀。
由于我们希望此动画流畅，因此我们将遵循这些限制。要更深入地了解 useNativeDriver 的工作原理，请查看我们 宣布它的博文。
分解我们的动画
我们的动画有 4 个组成部分
- 放大小鸟，显示应用和纯白色图层
- 淡入应用
- 缩小应用
- 完成后隐藏白色图层和蓝色图层
使用 Animated，有两种主要方法可以定义你的动画。第一种是使用 Animated.timing，它允许你精确说明动画运行多长时间，以及平滑运动的缓动曲线。另一种方法是使用基于物理的 API，例如 Animated.spring。使用 Animated.spring，你可以指定弹簧的摩擦力和张力等参数，并让物理引擎运行你的动画。
我们希望同时运行多个彼此紧密相关的动画。例如，我们希望应用程序在遮罩层半揭示时开始淡入。由于这些动画紧密相关，我们将使用一个Animated.Value来配合Animated.timing。
Animated.Value 是一个围绕原生值的包装器，Animated 使用它来了解动画的状态。通常，对于一个完整的动画，您只需要一个这样的值。大多数使用 Animated 的组件都会将该值存储在状态中。
由于我将此动画视为在完整动画的不同时间点发生的步骤，因此我们将 Animated.Value 的初始值设置为 0，表示 0% 完成，并将最终值设置为 100，表示 100% 完成。
我们的初始组件状态如下所示。
state = {
loadingProgress: new Animated.Value(0),
};
当我们准备开始动画时，我们告诉 Animated 将此值动画设置为 100。
Animated.timing(this.state.loadingProgress, {
toValue: 100,
duration: 1000,
useNativeDriver: true, // This is important!
}).start();
然后，我尝试估算动画的不同部分以及我希望它们在动画不同阶段具有的值。下表列出了动画的不同部分，以及我认为随着时间的推移，它们在不同点应该具有的值。
Twitter 鸟形遮罩应从缩放比例 1 开始，在向上放大之前先缩小。因此，在动画进行到 10% 时，它的缩放比例应为 0.8，然后在最后放大到 70。老实说，选择 70 是相当随意的，它需要足够大以使鸟完全显示屏幕，而 60 则不够大 😀。不过，有趣的是，数字越大，它看起来增长的速度就越快，因为它必须在相同的时间内到达那里。这个数字需要一些反复试验才能使这个 logo 看起来不错。不同尺寸的 logo/设备将需要不同的最终缩放比例，以确保显示整个屏幕。
应用程序应该保持不透明一段时间，至少在 Twitter logo 缩小期间。根据官方动画，我希望在鸟的缩放比例达到一半时开始显示它，并在整个动画进行到 30% 时完全显示它。所以在 15% 时开始显示，在整个动画进行到 30% 时完全可见。
应用程序的缩放比例从 1.1 开始，并在动画结束时缩放到其常规缩放比例。
现在，在代码中。
我们在上面做的本质上是将动画进度百分比的值映射到各个部分的值。我们使用 Animated 的 .interpolate 来做到这一点。我们创建了三个不同的样式对象，每个动画部分一个，使用基于 this.state.loadingProgress 的插值值。
const loadingProgress = this.state.loadingProgress;
const opacityClearToVisible = {
opacity: loadingProgress.interpolate({
inputRange: [0, 15, 30],
outputRange: [0, 0, 1],
extrapolate: 'clamp',
// clamp means when the input is 30-100, output should stay at 1
}),
};
const imageScale = {
transform: [
{
scale: loadingProgress.interpolate({
inputRange: [0, 10, 100],
outputRange: [1, 0.8, 70],
}),
},
],
};
const appScale = {
transform: [
{
scale: loadingProgress.interpolate({
inputRange: [0, 100],
outputRange: [1.1, 1],
}),
},
],
};
现在我们有了这些样式对象，我们可以在渲染帖子前面提到的视图片段时使用它们。请注意，只有 Animated.View、Animated.Text 和 Animated.Image 才能使用使用 Animated.Value 的样式对象。
const fullScreenBlueLayer = (
<View style={styles.fullScreenBlueLayer} />
);
const fullScreenWhiteLayer = (
<View style={styles.fullScreenWhiteLayer} />
);
return (
<View style={styles.fullScreen}>
{fullScreenBlueLayer}
<MaskedViewIOS
style={{flex: 1}}
maskElement={
<View style={styles.centeredFullScreen}>
<Animated.Image
style={[styles.maskImageStyle, imageScale]}
source={twitterLogo}
/>
</View>
}>
{fullScreenWhiteLayer}
<Animated.View
style={[opacityClearToVisible, appScale, {flex: 1}]}>
{this.props.children}
</Animated.View>
</MaskedViewIOS>
</View>
);
耶！我们现在已经让动画片段看起来像我们想要的那样了。现在我们只需要清理我们永远不会再看到的蓝色和白色图层。
为了知道何时可以清理它们，我们需要知道动画何时完成。幸运的是，在我们调用 Animated.timing 的 .start 时，它接受一个可选的回调函数，该函数在动画完成后运行。
Animated.timing(this.state.loadingProgress, {
toValue: 100,
duration: 1000,
useNativeDriver: true,
}).start(() => {
this.setState({
animationDone: true,
});
});
现在我们在 state 中有一个值来知道我们是否完成了动画，我们可以修改我们的蓝色和白色图层来使用它。
const fullScreenBlueLayer = this.state.animationDone ? null : (
<View style={[styles.fullScreenBlueLayer]} />
);
const fullScreenWhiteLayer = this.state.animationDone ? null : (
<View style={[styles.fullScreenWhiteLayer]} />
);
瞧！我们的动画现在可以工作了，并且在动画完成后，我们清理了未使用的图层。我们已经构建了 Twitter 应用程序加载动画！
但是等等，我的不起作用！
别担心，亲爱的读者。我也讨厌指南只提供代码片段而不提供完整的源代码。
此组件已发布到 npm 并托管在 GitHub 上，地址为 react-native-mask-loader。要尝试在您的手机上使用它，可以在 Expo 上找到它。
更多阅读/额外练习
- 这本 GitBook 是一个学习 Animated 的好资源，在阅读 React Native 文档后可以参考它。
- 实际的 Twitter 动画似乎在结束时加快了遮罩揭示的速度。尝试修改加载器以使用不同的缓动函数（或弹簧！）以更好地匹配该行为。
- 遮罩的当前最终缩放比例是硬编码的，在平板电脑上可能无法显示整个应用程序。根据屏幕尺寸和图像尺寸计算最终缩放比例将是一个很棒的 PR。
