介绍
老实说,如果你仔细阅读了之前的几篇文章,自己尝试过去实现所描述的效果,那么在今天的文章中你学不到什么新的知识。虽然最终的效果看起来非常复杂,但是所用到的技术都是前面讲过的。其实这是个好消息,说明安卓中解决问题的方法是有限的,虽然效果很多,但是都是那些惯用伎俩。真正限制你的不是技术的多少,而是你的想象力。
准备
和往常一样我们首先从添加一些东西开始。我们需要创建一个带有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的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
public class RevealBackgroundView extends View { public static final int STATE_NOT_STARTED = 0; public static final int STATE_FILL_STARTED = 1; public static final int STATE_FINISHED = 2; private static final Interpolator INTERPOLATOR = new AccelerateInterpolator(); private static final int FILL_TIME = 400; private int state = STATE_NOT_STARTED; private Paint fillPaint; private int currentRadius; ObjectAnimator revealAnimator; private int startLocationX; private int startLocationY; private OnStateChangeListener onStateChangeListener; public RevealBackgroundView(Context context) { super(context); init(); } public RevealBackgroundView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public RevealBackgroundView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } @TargetApi(Build.VERSION_CODES.LOLLIPOP) public RevealBackgroundView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); init(); } private void init() { fillPaint = new Paint(); fillPaint.setStyle(Paint.Style.FILL); fillPaint.setColor(Color.WHITE); } public void startFromLocation(int[] tapLocationOnScreen) { changeState(STATE_FIn>] tapLocationOnScreen) { changeState(STATE_FI什么新的知识。虽然最终的效果看起来非常复杂,但是所用到的技术都是前面讲过的。其实这是个好消息,说明安卓中解决问题的方法是有限的,虽然效果很多,但是都是那些惯用伎俩。真正限制你的不是技术的多少,而是你的想象力。
准备和往常一样我们首先从添加一些东西开始。我们需要创建一个带有Toolbar,RecyclerView以及FloatingActionButton的UserProfileActivit,因为我们需要使用和inCommentsActivity中相同过渡动画效。我们还要在FeedAdapter中添加跳转到简介照片界面的onClick监听函数。我还顺便用BaseActivity重构了下代码,下面是提交的代码列表: 打不开也没关系,看完整的代码就是了。 UserProfileActivity的circural reveal 过渡动画circural reveal动画如上图所示,因为找不到形象的翻译,所以这里直接称为circural reveal动画 – 译者注。 首先从实现用户介绍界面的过渡动画开始。你可能已经注意到,Material设计中介绍了一种圆形动画,主要应用在水波纹的效果中。不幸的是,这种设计上看起来非常nice的效果,在实际应用中没有好的方法可以实现。我们来看看目前可能的几种方案:
自定义RevealBackgroundView我将实现一个可以显示circular reveal动画的自定义view。需求如下:
在我们的自定义view中我们使用 前面文章 描述的ObjectAnimator。通过设置当前半径值来播放圆形动画。重写 onDraw() 来绘制一个指定半径与圆心的圆或者在动画结束的时候绘制整个view的矩形。下面是RevealBackgroundView的代码:
|