模仿Airbnb的悬浮搜索框动画
观察Airbnb搜索框动画的原理
先看看airbnb的效果把。
看了几遍,发现是这么一个原理:
最初搜索框是展开的
稍微向下滑动一点,搜索框收起
当搜索框已经收起后再向下滑,搜索框一直保持收起状态
在向上滑动时,只有滑动到顶部,搜索框才展开
探索实现方法
觉得这个搜索框的展开与收起跟顶部有着很大的关系,到达顶部才会展开,离开顶部就收起。
查阅Api发现,Listview OnScrollListener onScroll中有这几个参数:
/*** Callback method to be invoked when the list or grid has been scrolled. This will be* called after the scroll has completed* @param view The view whose scroll state is being reported* @param firstVisibleItem the index of the first visible cell (ignore if* visibleItemCount == 0)* @param visibleItemCount the number of visible cells* @param totalItemCount the number of items in the list adaptor*/public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount,int totalItemCount);
firstVisibleItem这个参数就可以判断当前第一个显示的item是不是列表中第一个item。
而RecyclerView LinearLayoutManager中有这两个方法:
public int findFirstVisibleItemPosition() {View child = this.findOneVisibleChild(0, this.getChildCount(), false, true);return child == null?-1:this.getPosition(child);}public int findFirstCompletelyVisibleItemPosition() {View child = this.findOneVisibleChild(0, this.getChildCount(), true, false);return child == null?-1:this.getPosition(child);}
所以可以肯定的是,不管是Listview还是RecyclerView,都能够很容易的判断当前是否在列表的顶部。
实现过程
了解了原理,找到啦响应的API,下面就是实现了。
鉴于大家现在使用更多的是RecyclerView,所以我就以RecycleView为例来实现这个功能。
判断何时收起展开
很简单,无非就是一个列表,实现了OnScrollListener,在onScrolled中判断当前显示的item中的第一个,是不是就是列表中的第一个,如果是,表明已经到达了顶部,展开搜索框;如果不是,表明离开了顶部,收起搜索框。
isExpand = true;mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {@Overridepublic void onScrollStateChanged(RecyclerView recyclerView, int newState) {super.onScrollStateChanged(recyclerView, newState);}@Overridepublic void onScrolled(RecyclerView recyclerView, int dx, int dy) {super.onScrolled(recyclerView, dx, dy);int firstPosition = mLayoutManager.findFirstCompletelyVisibleItemPosition();if (firstPosition != 0 && isExpand) {search.updateShow(false);isExpand = false;}if (firstPosition == 0 && !isExpand) {search.updateShow(true);isExpand = true;}}});
这里增加了一个isExpand标志位,用处在于当搜索框已经收起了,而用户继续向下滑动时,不再收起搜索框,反之向上滑也是一样,只是不再重复而已。
执行收起展开
写到这里时发现一个问题
ios上的airbnb每次收起搜索框时:
从一个圆角矩形变成弧形边角的长柱形,然后长柱形水平缩短直到成为一个圆形。
ios上的airbnb每次展开搜索框时:
先从一个圆形变成正方形,然后正方形水平拉伸,成为一个圆角矩形。
从一个圆形渐变成为一个正方形,从一个正方形,渐变成为一个圆,这确实想不到好的办法。
跟设计师商量之后,改成了不用圆角矩形了,把圆角边直接改成弧形。
这样就靠一张9patch图就可以实现展开跟收起的效果,只需要做水平方向的scaleX变换就好。
收起展开遇到的问题
然而跟想象的不一样
虽然我指定了9patch的拉伸区域,但是发现根本跟你预想的两码事,你指定的9patch只能是view静态的一种变化,而这种动态的变化确实没有办法指定拉伸哪部分,或者是我不知道改用什么办法。
后来就打算使用障眼法了,一个圆形,一个圆柱形
最初时,圆形隐藏状态,圆柱形初始化为展开状态,使用9patch。
在收起时,渐渐的显示出圆形,scaleX圆柱形由大变小,然后隐藏圆柱形(因为圆柱形已经变形,只能隐藏掉)。
在展开时,隐藏圆形,scaleX圆柱形由小变大,由于圆柱形原本就是展开的,现在由收起恢复到展开,不会变形。
实现
private void expandSearch() {circle.setVisibility(View.VISIBLE);ObjectAnimator anim1 = ObjectAnimator.ofFloat(circle, "alpha", 1f, 0f);ObjectAnimator anim2 = ObjectAnimator.ofFloat(round, "alpha", 0f, 1f);ObjectAnimator anim3 = ObjectAnimator.ofFloat(round, "scaleX", scale, 1f);round.setPivotX(0);AnimatorSet animSet2= new AnimatorSet();animSet2.play(anim1).with(anim2).with(anim3);animSet2.setDuration(100);animSet2.start();}private void closeSearch() {ObjectAnimator anim2 = ObjectAnimator.ofFloat(round, "scaleX", 1f, scale);ObjectAnimator anim3 = ObjectAnimator.ofFloat(circle, "alpha", 0f, 1f);circle.setVisibility(View.VISIBLE);ObjectAnimator anim4 = ObjectAnimator.ofFloat(round, "alpha", 1f, 0f);round.setPivotX(0);round.setPivotY(round.getHeight() / 2);AnimatorSet animSet1 = new AnimatorSet();animSet1.play(anim2).with(anim3).with(anim4);animSet1.setDuration(100);animSet1.start();}
就不贴出来全部的代码了,一会给出Github地址。
效果
注意
如果你使用的ListView,并且是可以下拉刷新的Listview,那么你要注意了,因为你下拉刷新如果使用的是addHeaderView,然后通过控制header的padding的形式,那么你会发现在下拉刷新时,这个搜索框会不停的收起展开。
为什么会这样呢?
其实想一下就能明白,在可以下拉刷新的Listvew中,header在一般情况下是隐藏状态,那么当前列表的顶部就是列表数据的第一个item,然而一旦下拉,header露出来后,列表的顶部就变成header了,所以就会出现问题。
只要需要在下拉刷新时,屏蔽掉搜索框的变化就可以了。
源码下载地址:
https://github.com/nicewarm/AirbnbSearchAnimation/tree/master
希望能帮到你。
模仿Airbnb的悬浮搜索框动画相关推荐
- 八十四、搜索框动画效果实现,React-Redux 进行应用数据的管理
2020/11/21. 周六.今天又是奋斗的一天. @Author:Runsen 上次完成了Header布局如下,这次需要实现动画效果. 搜索框动画效果实现 React-transition-grou ...
- android开发游记:meterial design 使用circularReveal仿哔哩哔哩(bilibili)搜索框动画
一直觉得bilibili的安卓客户端做的很不错,所以自己在项目中都会有意识或无意识地去模仿,最近觉得它的搜索框弹出收回的效果体验挺不错的,于是研究了一下模仿着做了一个: (ps:模仿不是罪,罪过的是没 ...
- html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
- android 百度悬浮搜索框,百度的搜索框效果如何实现的???
var MyjQuery ={};var rowNo= 0MyjQuery.seekdiv= newObject({/*提示框 event:事件 txtid:文本框ID txtvalue:文本框的值 ...
- 记一次辛酸的ajax+jquery搜索框制作过程
笔者是一个前端菜鸡,所以想模仿制作一个百度搜索框用到自己的项目,通过找csdn文章B站视频 终于凑出了一个勉强像样的搜索框. html <!DOCTYPE html> <html l ...
- 点击按钮的时候,切换搜索框的显示与隐藏(动画)
1 // 搜索框出现动画 2 var i=0; 3 $('.search').on('click',function () { 4 // $('.search-positon').css('heigh ...
- [iOS]过渡动画之高级模仿 airbnb
注意:我为过渡动画写了两篇文章: 第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 M ...
- [html] 写一个搜索框,聚焦时搜索框向左拉长并有动画效果
[html] 写一个搜索框,聚焦时搜索框向左拉长并有动画效果 为啥直接粘贴html发布以后就没有了呢 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
- android 仿搜索动画,Android仿京东顶部搜索框滑动伸缩动画效果
最近使用京东发现,京东顶部的搜索框有一个新的伸缩效果,根据用户的手势滑动,伸缩搜索框.觉得效果还不错,就看了下其他的应用有没有这种伸缩的效果,发现安居客也使用了类似的一种效果,然后就想着实现这样的一种 ...
最新文章
- iOS多线程之7.NSOperation的初识
- 机器学习如何计算特征的重要性_干货 :机器学习中的特征工程总结
- [SpringBoot2]welcomefavicon
- 设计合理的实验方案来研究阳离子改性棉织物与未改性棉的染色动力学性能
- word-break 对一个字符串根据给出的字典判断是否可以根据字典切分(DP问题)
- QDomNode读取xml
- Python3列表推导不会再有变量泄露的问题
- 基于16QAM调制的OFDM系统仿真实现(MATLAB)
- 服务器虚拟盘怎么设置,服务器虚拟内存设置在什么盘
- 怎样统计PPT演示文稿的字数
- jQuery siblings()用法与实例。
- 微信公众号支付的回调地址 不起作用的问题
- Why That Big Meal You Just Ate Made You Hungry
- sourcetree 中文版
- Java 10正式发布,带来了这些新特性
- 2021-2027全球与中国360度鱼眼镜头市场现状及未来发展趋势
- HTML5+CSS3海绵宝宝网站设计(2)
- Linux系统中隐藏掉你的rootkit的TCP连接
- Java获取指定日期前一天、后一天,当月第一天、当月最后一天
- CocosCreator一步一步实现重力球游戏
热门文章
- remote: Repository not found. fatal: repository 'https://github.com/pete/first_app.git/' not found
- js中getMonth()+1
- CentOS 7 源码安装 apache 及配置
- Hudson 持续集成服务器的安装配置与使用
- 2021_01_04
- 对计算机接口提出的新要求吗,2017年秋微机原理与接口技术
- OpenCV通过HSV颜色空间过滤图片及目标检测颜色空间范围确定
- Real-Time Rendering 4th Edition 实时渲染第四版 第三章 图形处理单元(The Graphics Processing Unit)
- [英文邮件] 表达感谢的话 + 回复别人的祝福
- 东田纳西州立大学计算机排名,东田纳西州立大学的计算机专业如何?