react仿京东客户端首页导航条动画效果
来源:互联网 发布:php是什么货币 编辑:程序博客网 时间:2024/05/18 02:09
之前使用好多客户端都做了这样的效果,就是可以随着滑动的距离调节导航条的透明度和颜色。所以说,这个效果学会之后,不管是京东还是qq的个人资料页,都不在话下。
实现原理:既然是随着滑动的距离来调节导航条的透明度和颜色,那么ScrollView就是少不了的了。然后,还需要的一个回调函数,用来监听它的滑动事件,这个时候我们就可以获得ScrollVie的坐标变化。最后,只需要将我们拿到的y轴的坐标变化值与导航条的属性绑定起来即可。
闲话不多说,直接上代码……
代码实现:
<ScrollView style={{flex: 1}} ref='scroll' onScroll={this._onScroll.bind(this) } scrollEventThrottle={16}> ... ... ...</ScrollView>
当ScrollView滑动的时候,onScroll方法会不停的回调,所以我们要在onScroll方法中将y轴的变化值与导航栏的属性值进行绑定。
_onScroll(e) { Animated.event( [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }], { listener: () => { // let y = e.nativeEvent.contentOffset.y; } } )(e); }
注:this.state.scrollY要在构造函数中进行初始化,this.state = {scrollY: new Animated.Value(0)}。
最后就是用这个this.state.scrollY的值来动态的改变导航栏的效果。
<Animated.View style={{position: 'absolute',top: 0,left: 0,right: 0,height: 64, backgroundColor: '#fafafa', opacity: this.state.scrollY.interpolate({ inputRange: [0, 100, 100 + 0.5], outputRange: [0, 0.9, 0.9] }), }}></Animated.View>
注:用的是带动画的View(Animated.View),将y轴的变化绑定到opacity属性上,随着滑动,改变导航栏的透明度,滑动100的时候,导航栏效果不变。
0 0
- react仿京东客户端首页导航条动画效果
- 仿淘宝网首页导航条效果
- Android新闻客户端水平导航条效果
- CSS仿淘宝首页导航条布局效果
- CSS仿淘宝首页导航条布局效果
- CSS仿淘宝首页导航条按钮布局效果
- CSS仿淘宝首页导航条布局效果
- pptv首页导航效果
- React-Native-Navigator导航条-push不同动画
- React Native商城项目实战05 - 设置首页的导航条
- MSDN首页菜单导航条,有阴影效果的按钮。分析。
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果)
- React实现动画效果
- React动画效果
- React Native-导航条设置
- React Native自定义导航条
- html+ js+ jq+css导航条菜单的制作(水平,竖直,伸缩,带有动画效果等等。。。)
- 动画效果css导航栏
- 自行封装android数据库操作工具类 DatabaseManger和DBHelper
- JSONP的问题与解决
- Oracle数据类型与.NET中的对应关系
- 周志华《机器学习》习题3.3
- mysql优化
- react仿京东客户端首页导航条动画效果
- 以AVL树为例理解二叉树的旋转(Rotate)操作
- 【C#】简易编码与解码小程序
- android stutio创建证书与打包APP上线、配制gradle中的证书,使用第三方平台SDK方便开发调试
- angular之$scope
- 链表
- 用JavaScript编写的一个点名系统
- 【微信小程序】在手机上查看调试微信小程序
- 几种垃圾回收机制