【Android 动画】随ScrollView滑动头部缩放动画(附demo)
2017-08-24 17:34
567 查看
一、为什么需要做这样的动画?
产品提出这样的需求:希望标题栏能够随着scrollView的滑动而进行缩放。
这个动画到底是什么样?现在把gif图传一下。当然,实际上线的页面会比这个好看很多,这只是demo而已,不过动画功能已经全部实现。
二、这个动画的具体实现思路
1、步骤:
(1)找到scrollView的scrollListener方法
(2)在回调的方法里可以得到滑动距离
(3)根据滑动距离,实时改变标题栏的大小。
2、具体实现:
(1)ScrollView没有提供setOnScrollListener方法,因此需要自己写一个借口回调
此处需要注意,这里不要在onScrollChanged方法去进行接口回调!!!因为这个方法不是均匀回调的,当滑动很快时,动画就非常快,看上去就是直接挪过去的,用户体验非常差!!!这个问题坑了我好久。
(2)回调的方法里可以得到滑动距离
这个dy就是滑动距离
(3)根据滑动距离,实时改变标题栏的大小
这部分的思想是:首先拿到初始textView的topMargin,然后用topMargin减去dy,width减去dy就可以了,只不过要对dy进行一下加权。
以上就是重要代码了,需要demo可以发邮件联系我zhshan@ctrip.com
~~~~~~~~~~~~~~~~~~~
附上demo(点击即可下载),欢迎批评指正
产品提出这样的需求:希望标题栏能够随着scrollView的滑动而进行缩放。
这个动画到底是什么样?现在把gif图传一下。当然,实际上线的页面会比这个好看很多,这只是demo而已,不过动画功能已经全部实现。
二、这个动画的具体实现思路
1、步骤:
(1)找到scrollView的scrollListener方法
(2)在回调的方法里可以得到滑动距离
(3)根据滑动距离,实时改变标题栏的大小。
2、具体实现:
(1)ScrollView没有提供setOnScrollListener方法,因此需要自己写一个借口回调
public void setOnScrollListener(OnScrollChangeListener listener) { this.changeListener = listener; } public interface OnScrollChangeListener { void onScrollChanged(float dy); }
@Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); if (changeListener != null) { changeListener.onScrollChanged(getScrollY() * 0.65f); } }
此处需要注意,这里不要在onScrollChanged方法去进行接口回调!!!因为这个方法不是均匀回调的,当滑动很快时,动画就非常快,看上去就是直接挪过去的,用户体验非常差!!!这个问题坑了我好久。
(2)回调的方法里可以得到滑动距离
scrollView.setOnScrollListener(new NestedScrollView.OnScrollChangeListener() { @Override public synchronized void onScrollChanged(final float dy) { } });
这个dy就是滑动距离
(3)根据滑动距离,实时改变标题栏的大小
这部分的思想是:首先拿到初始textView的topMargin,然后用topMargin减去dy,width减去dy就可以了,只不过要对dy进行一下加权。
float newTopMargin = search_layout_max_margin - dy; float newWidth = search_layout_max_width - dy; newWidth = newWidth < search_layout_min_width ? search_layout_min_width : newWidth; if (newTopMargin < search_layout_min_margin) { newTopMargin = search_layout_min_margin; } if (newWidth < search_layout_min_width) { newWidth = search_layout_min_width; } params.topMargin = (int) newTopMargin; params.width = (int) newWidth; tagView.setLayoutParams(params);
以上就是重要代码了,需要demo可以发邮件联系我zhshan@ctrip.com
~~~~~~~~~~~~~~~~~~~
附上demo(点击即可下载),欢迎批评指正
相关文章推荐
- [Android官方Demo系列] PageTransformer缩放滑动
- 【Android 手势冲突】彻底解决RecyclerView与ScrollView滑动冲突问题,并实现RecyclerView悬停导航栏(附demo)
- 【Android 动画】封装好的可滑动指示器indicator,可直接拿来使用(附demo)
- Android点击WebView中的图片实现缩放及滑动浏览
- android---webview和scrollview(等滑动冲突)
- AndroidScrollView滑动到顶在向下话会出现颜色块
- 【转】Android摄像头开发完美demo---(循环聚焦,缩放大小,旋转picture,查询支持的picturesize, ImageButton按键效果)
- Android中自定义ScrollView的滑动监听事件
- Android UI, GridView, ScrollView, SlidingDrawer 抽屉滑动效果
- android帧动画,移动位置,缩放,改变透明度等动画解说
- 【Android 界面效果1】ViewPager多页面滑动切换以及动画效果
- Android动画学习Demo(3) 沿着贝塞尔曲线移动的Property Animation
- Scrollview 嵌套 RecyclerView 及在Android 5.1版本滑动时 惯性消失问题
- android帧动画,移动位置,缩放,改变透明度等动画讲解
- Android 缩放动画使用笔记
- Android手势滑动实现ImageView缩放图片大小
- Android缩放动画
- Android的Activity屏幕切换动画左右滑动切换
- android界面切换滑动动画
- Activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失的动画实现---Android提高篇