基本特效:饿了么丝滑无缝过度搜索栏的实现

新年好,首先给大家发个红包。

[意念红包]请闭上眼睛通过念力领取。


本文同步自wing的地方酒馆

这都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的时候,需要调用下面的代码来关闭切换动画来保证效果。

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

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

如果你喜欢 欢迎Star,也可以加入我的Android酒馆:425983695

参考文章: 低版本实现共享元素动画

基本特效:饿了么丝滑无缝过度搜索栏的实现》有75个想法

  1. I just want to tell you that I am newbie to blogging and site-building and really loved this page. Probably I’m likely to bookmark your blog . You really come with outstanding well written articles. Kudos for revealing your blog site.

  2. Hi there this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get advice from someone with experience. Any help would be greatly appreciated!

  3. All absolutely free clipart is created by an identical designer. Nowadays you know the best place to locate totally free clipart, you can save a good deal of Googling! AAA Clipart is a superb site on account of the substantial selection of completely free clipart images available there.

  4. I just hope to inform you you that I am new to writing a blog and certainly liked your website. Probably I am prone to save your blog post . You indeed have memorable article blog posts. Like it for swapping with us your very own domain article

  5. Hello There. I found your blog using msn. This is a really well written article. I will make sure to bookmark it and come back to read more of your useful information. Thanks for the post. I will certainly return.

  6. Merely a smiling visitor here to share the love (:, btw great design and style. “Justice is always violent to the party offending, for every man is innocent in his own eyes.” by Daniel Defoe.

  7. I simply desire to inform you that I am new to putting up a blog and certainly admired your webpage. More than likely I am likely to store your blog post . You really have amazing article blog posts. Like it for discussing with us all of your internet document

  8. I just wish to inform you that I am new to putting up a blog and incredibly admired your webpage. Probably I am probably to store your blog post . You truly have impressive article material. Love it for telling with us your main internet site article

  9. Someone essentially lend a hand to make significantly posts I’d state. This is the first time I frequented your website page and so far? I amazed with the research you made to make this actual post extraordinary. Fantastic activity!

  10. Thank you a bunch for sharing this with all of us you actually know what you’re talking approximately! Bookmarked. Please additionally talk over with my website =). We will have a hyperlink alternate agreement between us!

  11. Hey There. I found your blog using msn. This is an extremely well written article. I’ll be sure to bookmark it and come back to read more of your useful information. Thanks for the post. I will definitely comeback.

  12. Hello here, just turned out to be receptive to your blog site through yahoo, and found that it’s truly interesting. I’ll like should you decide persist this informative article.

  13. you’re in point of fact a excellent webmaster. The website loading pace is amazing. It sort of feels that you’re doing any unique trick. Moreover, The contents are masterpiece. you’ve done a great activity on this topic!

  14. I’ve been surfing on-line greater than 3 hours as of late, yet I by no means discovered any attention-grabbing article like yours. It¡¦s lovely value sufficient for me. In my view, if all website owners and bloggers made excellent content material as you did, the web shall be a lot more helpful than ever before.

  15. Thanks a lot for sharing this with all folks you really understand what you’re talking approximately! Bookmarked. Kindly also seek advice from my site =). We could have a link change agreement among us!

  16. You are my aspiration , I possess few web logs and very sporadically run out from to brand.I conceive this web site holds some rattling fantastic info for everyone. “As we grow oldthe beauty steals inward.” by Ralph Waldo Emerson.

  17. I’ve been surfing online more than 3 hours today, yet I never discovered any attention-grabbing article like yours. It is lovely worth enough for me. In my opinion, if all webmasters and bloggers made excellent content as you probably did, the web will likely be much more useful than ever before. “A winner never whines.” by Paul Brown.

  18. I have been exploring for a little for any high quality articles or blog posts on this sort of space . Exploring in Yahoo I at last stumbled upon this web site. Reading this info So i¡¦m satisfied to convey that I have a very good uncanny feeling I discovered just what I needed. I such a lot surely will make sure to don¡¦t fail to remember this web site and give it a glance on a continuing basis.

  19. Good ¡V I should certainly pronounce, impressed with your site. I had no trouble navigating through all the tabs and related information ended up being truly simple to do to access. I recently found what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for those who add forums or anything, website theme . a tones way for your client to communicate. Nice task..

  20. My husband and i have been quite glad when Jordan managed to do his survey using the ideas he discovered from your own web pages. It is now and again perplexing to just continually be giving away tips and tricks that many people have been selling. We really discover we’ve got the blog owner to be grateful to because of that. The type of explanations you made, the easy website menu, the relationships you will give support to promote – it is many excellent, and it’s really letting our son and our family believe that the content is exciting, and that’s seriously serious. Thank you for all!

  21. I¡¦ve been exploring for a little for any high-quality articles or blog posts in this kind of space . Exploring in Yahoo I ultimately stumbled upon this website. Studying this information So i am glad to show that I’ve an incredibly just right uncanny feeling I found out exactly what I needed. I so much indisputably will make sure to don¡¦t put out of your mind this site and give it a glance regularly.

发表评论

电子邮件地址不会被公开。