React Native ScrollView动画头

更新：更改了项目源以使用Expo，并稍微更改了结构以使用变换而不是高度，以便能够利用本机驱动程序。 有关 我所做的更改， 请参 见此提交 。

这是一个演练，展示了如何构建以ScrollView的滚动位置作为动画的标题。我必须为应用程序构建类似的东西，发现使用Animated API在React Native中确实很容易做到。

这是最终结果：

您也可以在Expo上尝试它，并在github上找到最终源。

想法是使用“ absolute”位置在ScrollView上呈现标题，并在ScrollView的顶部添加一个边距以抵消标题。然后，我们可以使用ScrollView滚动位置简单地设置标题高度的动画。

让我们首先创建一个包含一些内容的ScrollView ，然后导入下一步所需的所有内容。

React Native具有非常强大的声明性动画API，该API可以对值进行动画处理，也可以将其值绑定到事件。在这种情况下，我们将希望将动画值绑定到ScrollView Y滚动位置。为此，我们将Animated.event与ScrollView onScroll道具一起使用。

现在，此标头有点无聊，让我们添加具有视差效果的最喜欢的猫图片以使其更美观。为此，我们添加两个新的插值动画值和一个Image组件。

我们使用相同的初始内插值，但是在这里我们要输出不透明度值和图像的平移以创建视差效果。我们还通过在中间添加第三个断点来对不透明度进行动画处理。这样，仅当标题滚动到一半时，不透明度才会开始衰减。

现在所缺少的只是稍微缩放/转换标题标题，但我将保留它作为练习。

Animated API通过以多种不同方式对值进行插值，使创建非常复杂的动画变得非常容易。它还允许保持状态超级简单。一切都基于一个值，所有动画复杂度都在插值的渲染函数中处理。