专栏首页Android群英传饿了么丝滑无缝过度搜索栏的实现

饿了么丝滑无缝过度搜索栏的实现

前言

这都2017年了,是时候来一波基础特效教程了!

如果我不偷懒的话,或许可以成为一个系列都基础教程哦。当然如果成为了一个系列,这个系列就像标题说的一样,是基础特效。所以内容会比较简单,如果你是老司机的话,可以直接飘过了(顺便带我上车!)。

本次项目地址:https://github.com/githubwing/WingUE

这次依然拿饿了么开刀。来庖丁一个搜索栏过度效果,如下图:

额,图片还是比较大的,为了不浪费排版空间,这次就不上饿了么原图了,直接上效果图。效果还是差不多的哈。

如你所见,这是一个过度效果。 用一个群友的话来说就是丝滑过度根本看不出来是两个Activity。

一个Activity还是两个?

这是两个Activity,看起来顺化的原因是使用了一种叫做共享元素的概念。Android 5.0自带共享元素的实现,但是有一些缺点比如:不能改变大小, 不能兼容4.X 等等。

如何实现?

其实本次的效果在高仿微信下滑返回PhotoView中有运用以及介绍。但是由于篇幅没有做详细的介绍,现在就向大家介绍实现这种效果的思路。

首先既然叫做共享元素,那么可想而知肯定有两个Activity拥有一项共同的元素,可能是图片、一个TextView、一个EditText等等。如效果图,他就是共享一整个EditText。准确地说是一个组成看似EditText的元素组。

为了实现这个效果,我们需要在两个Activity中都放置同样的搜索栏元素。

现在我们两个Activity都有这个元素了。接下来要做的只有一步:那就是startActivity。

哈哈,我真的没有逗你,因为其实所有你看到的动画都是在第二个Activity完成的。由效果图可以看到,在动画执行的过程中还是可以看到前一个Activity的,所以我们需要对第二个Activity进行特殊的“透明处理”。

在style.xml里面新增加一个透明的主题,并且应用给第二个Activity。

接下来,只要在第二个Activity打开的时候,进行一些动画即可。所以首先我们要把第一个Activity中元素的坐标传给第二个Activity。

注意这里拿到的是在屏幕中的坐标。所以在第二个Activity中,获取第二个元素的坐标也要用屏幕中的坐标。

拿到之后,再根据两个坐标的差值进行平移操作,这样位移起来就完全不需要考虑其他坐标系了。至于为什么,留个作业(斜眼):

如果你想要预览位置效果,可以直接view.setTranslateY(translateY);

接下来动画只要交给ValueAnimator,在这里把搜索栏的背景单独抽成一个View,用来进行X缩放操作。所以现在要做的动画有:

  1. 左侧箭头的Y轴平移动画。
  2. 右侧搜索的Y轴平移动画。
  3. 中间文字以及背景的Y轴平移动画。
  4. 中间背景的X缩放动画。
  5. 下部View内容的透明动画。

等动画执行完毕以后,只需要将View正确归为即可!

当然返回的时候,只需要往相反的地方做动画~ 另外还需要特别注意的地方有,在启动或者关闭Activity的时候,需要调用下面的代码来关闭切换动画来保证效果。

overridePendingTransition(0, 0);

感觉这次效果虽然简单,但是应用场景还是挺广得。

本次项目地址:https://github.com/githubwing/WingUE

本文分享自微信公众号 - Android群英传(android_heroes),作者:wing

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter Dojo设计之道——骚气的闪屏动画是如何实现的

    Flutter Dojo的闪屏动画,参考了著名大厂——P站的App闪屏,相信大家应该都不陌生。

    用户1907613
  • 一触即发——App启动优化最佳实践

    用户1907613
  • 混淆的另一重境界

    用户1907613
  • CentOS 7部署OpenStack(

    [root@controller ~]# mysql -u root -p -e "CREATE DATABASEglance;"

    py3study
  • 20171018

    天天_哥
  • 网易云音乐的消息队列改造之路

    网易云音乐自2013年上线后,业务保持了高速增长。云音乐除了提供好听的音乐外,还留下了我们在乐和人上的美好回忆。本文整理自网易云音乐消息队列负责人林德智在近期 ...

    哲洛不闹
  • go web: 2 封装日志包log

    在web项目中,记日志是非常重要的。所以,我做的第一件事,就是向log包动手。 和Python相比,log包功能上逊色不少,但它给我们提供了基础的构架,让我们能...

    超级大猪
  • JS-鼠标跟随块(一个小圆点跟着鼠标跑)

    xing.org1^
  • Oracle RAC 连接到指定实例

            在某些特定的情形下,有时候需要从客户端连接到RAC中指定的实例,而不是由客户端Load_balance来动态选择或者是通过服务器端的监听器根据负...

    Leshami
  • js实现自定义滚动条

    星辉

扫码关注云+社区

领取腾讯云代金券