只有通过在移动应用程序中加入动画，才能实现奇妙的用户体验。最困难的任务是向消费者解释应用程序的逻辑。然而，普遍存在的错误是不小心使用了动画，这违背了增强用户体验的目的。
动画需要很好地整合，不应该是无关紧要的，这样的应用程序才能被认为是卓越的，而不仅仅是体面的或平均的。因为它们是在运动中，事物很少会马上完全停止。你可以在你的用户界面 中用动画来模拟真实的运动。
本文使用ScrollView和原生React动画来建立一个简介头像动画。在这篇博文之后，我们会有一个动画的个人资料视图。
让我们从实现开始
从react native导入View和Animated是两个最重要的组件，可以为我们的动画简介视图实现特定视图的动画 ，支持flexbox的布局，样式，一些触摸处理，以及可访问性控件和动画视图。
如果没有这两个组件，我们必须从我们的assets文件夹中导入图片，并从react native中导入Dimension，以获得对应用程序的准确响应。
插值
这个动画的实现的一个关键组件是插值。插值可以先应用于每个属性。插值通常使用线性插值，但也包括缓和函数，将输入范围转换成输出范围。默认情况下，它将曲线外推到指定范围之外，但你也可以让它钳制输出值。
我们用Interpolate来改变位置、大小和颜色，用Animated.event()来映射ScrollView的位置与动画状态值。你可以阅读更多关于 Interpolate 和Animated事件的细节 。
一个将0-1范围转换为0-100范围的基本映射是。
创建一个标题，并将其在ScrollView的顶部的位置偏移到滚动视图的上方。之后，使用ScrollView的滚动位置对标题进行插值是一个简单的过程。
所以让我们通过我们的例子来了解一下。
这里，scrollY是在useState中取的，其值是 new Animated.Value(0)。 这是每个组件动画的初始值；之后，我们必须根据我们的要求来添加我们的值。
useNativeDriver
Animated API的开发是以可序列化为主要约束条件的。因此，我们可以在动画开始之前向本地代码提供所有的动画信息，使本地代码能够在UI线程上执行动画，而不需要在每一帧通过桥接。
这一点特别有用，因为在动画开始后，JS线程可以被阻断而不影响动画的顺利进行。这种情况经常发生，因为用户代码在JS线程上运行，而React渲染有可能会锁定JS很长时间。
useNativeDriver如何工作？
当使用Animated时，你首先描述一个节点图，对应于你想做的动画。然后你用一个驱动来根据预定的曲线更新一个Animated值。通过使用Animated事件将Animated值链接到View事件，你也可以更新Animated值。
在配置动画的时候，一致地设置useNativeDriver:true。避免了每一帧渲染的JS代码和本地代码之间的来回桥接，这将使你的动画变得流畅。
由于React-Native的限制，useNativeDriver目前不支持绝对位置。所以，我们在那里使用转换属性。我们利用translateY表示顶部，translateX表示左侧。
Animated.event() 方法将状态scrollY与ScrollView的Y偏移量进行映射，意味着垂直偏移。
scrollEventThrottle调节滚动时触发滚动事件的频率（以ms为单位的时间间隔）。一个较低的值可以提高跟踪滚动位置的精度，但在桥上传输的数据量可能会导致滚动性能的问题。
由于JS的运行循环与屏幕刷新率同步，你不会注意到设置在1到16之间的值在性能上有什么不同。
现在是使用插值的时候了，将简介图片从屏幕中心向左上方动画化。为了在我们的应用程序中创建一个适当的动画，我们提供了一些值来使每个位置产生动画。
完整的例子:
插值可以先应用于每个属性。插值通常使用线性插值，但也包括软化功能，将输入范围转换成输出范围。默认情况下，它将曲线外推到指定范围之外，但你也可以让它钳制输出值。
在这里，从输入范围0-80，我们的图像相对于设备宽度从30变为38，从80-140，它将相对于38变为10。
当状态值发生变化时，调用interpolate方法。 ScrollView的 我们之前做的onScroll的映射。
和左边的位置一样，我们设置了顶部的位置，图像的高度和宽度。 ScrollView的 滚动位置。现在将这些值设置在style of 动画.图像 的样式中设置这些值，如下所示。
现在，当用户滚动 ScrollView 的方法将被调用，我们的状态将被改变。 onScroll 方法将被调用，而我们的状态 scrollY 会发生变化，而当 状态Y 变化时，interpolate将被调用，美丽的动画就完成了。
ScreenShots:
