react-native ScrollHeader动画

react-native动画

react-native共有四种实现动画的方式:

requestAnimationFrame 

setNativeProps

LayoutAnimation

Animated

本文要介绍的是如何使用animated方法实现背景颜色渐变的header。

效果如下:

1530941507231_video.gif

实现步骤:

首先创建一个包含一些内容的ScrollView和使用Animated.View包装的header。

image.png

用animated的api为值设置动画,同时使用ScrollView onScroll prop 的Animated.event将动画值和滚动位置绑定。

image.png

Animated.event,其中包含我们要绑定到动画值的事件对象属性的映射,滚动高度为0到200时头部对应的透明度为0到1。

此时,标题的透明度将随着滚动位置移动而改变,使用相同的方法,就可以在用户滚动时为标题中的任何内容设置动画。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容