InstaMaterial 概念设计(6) – 用户介绍

722 查看

介绍

老实说,如果你仔细阅读了之前的几篇文章,自己尝试过去实现所描述的效果,那么在今天的文章中你学不到什么新的知识。虽然最终的效果看起来非常复杂,但是所用到的技术都是前面讲过的。其实这是个好消息,说明安卓中解决问题的方法是有限的,虽然效果很多,但是都是那些惯用伎俩。真正限制你的不是技术的多少,而是你的想象力。

准备

和往常一样我们首先从添加一些东西开始。我们需要创建一个带有Toolbar,RecyclerView以及FloatingActionButton的UserProfileActivit,因为我们需要使用和inCommentsActivity中相同过渡动画效。我们还要在FeedAdapter中添加跳转到简介照片界面的onClick监听函数。我还顺便用BaseActivity重构了下代码,下面是提交的代码列表:

打不开也没关系,看完整的代码就是了。

UserProfileActivity的circural reveal 过渡动画

circural reveal动画如上图所示,因为找不到形象的翻译,所以这里直接称为circural reveal动画  – 译者注。

首先从实现用户介绍界面的过渡动画开始。你可能已经注意到,Material设计中介绍了一种圆形动画,主要应用在水波纹的效果中。不幸的是,这种设计上看起来非常nice的效果,在实际应用中没有好的方法可以实现。我们来看看目前可能的几种方案:

  • ViewAnimationUtils.createCircularReveal()这是达到circural reveal动画的最简单方法。但是最大的问题是值在Lollipop上有效,并且没有兼容旧设备的库,Ripple 效果所使用的Render线程老设备上没有。
  • CircularReveal library这是一个在>2.3设备上实现了ViewAnimationUtils.createCircularReveal()功能的 开源项目 。还比较新,看起来前途无量的样子。它提供了可以动画的两个ViewGroup:RevealFrameLayout 以及 RevealLinearLayout。
  • 也许我们不需要是圆形的?好吧,有时候我们并没有太多的时间来寻找最佳的解决方案。如果我们只是想尽快实现一个reveal效果的原型,也许方形的动画也是ok的?。我们可以使用持续时间为30秒的ViewPropertyAnimator来实现这种效果。怎么做呢?只需使用setPivotX/Y 在X和Y方向上缩放就可以了,如下:

  • 使用shader我最喜欢的方法,尤其是当我们有更复杂的View需要动画的时候。Shader对于初学者而言可能难以理解,但是它是实现动画效果最有效率的方法之一。在Romain Guy的博客中,你可以找到利用shader制作reveal动画的代码片段。博客链接
  • 用自己的方式实现如果上面的所有方式你都不感冒,那就干脆自己实现。有时候最简单的方法就能满足你的需求。我会告诉你在我们的app中采用的就是这种方案吗。

自定义RevealBackgroundView

我将实现一个可以显示circular reveal动画的自定义view。需求如下:

  • Reveal效果必须是圆形的
  • Reveal动画必须从点击的那个点开始
  • 我们想要掌控动画的状态(未开始,开始了,结束)
  • 我们还要能主动结束动画

在我们的自定义view中我们使用 前面文章 描述的ObjectAnimator。通过设置当前半径值来播放圆形动画。重写 onDraw() 来绘制一个指定半径与圆心的圆或者在动画结束的时候绘制整个view的矩形。下面是RevealBackgroundView的代码: