译文的GitHub地址：低版本实现共享元素动画（二）：格瓦拉动画

译者注：好久没折腾动画了，一开始就停不下来了

最后实现效果

刚写完低版本实现共享元素动画，ios的同事丢过来手机告诉我格瓦拉app的一个动画很好看，我一看还真不错，就问android版本的实现呢，打开他的香槟金小米5以为是和ios一样的实现，可惜只实现了一半，盯得动画看了一会，发现有点像是android material设计动画，然后他又给我看了好几个app的动画，一看我就发现了，ios好多app动画都是android material设计里面的，而且不少是material的错误示范，哈哈

像格瓦拉app这个动画，看过google的material设计，会很熟悉，但是这个动画 用户等待内容的时间太长了，体验并不是那么的好，google不推荐。先不讨论对不对了，我们来简单实现一下吧

主要步骤

主要流程其实和上一篇动画差不多，只不过B页面多了一个Reveal动画，这个动画我们用一个三方库来实现

 compile ('com.github.ozodrukh:CircularReveal:2.0.1@aar') {
        transitive = true;
    }

我们来分析一下B页面，可以看到有好几层，在android中这个可以用RelativeLayout来实现

Activity B

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

    <!--layer 1-->
    <LinearLayout
        android:id="@+id/bg_detail"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="160dp"
            android:background="@color/gray">
        </ImageView>
    </LinearLayout>


    <!--layer 2-->
    <io.codetail.widget.RevealFrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/container_detail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/blue"
            android:orientation="vertical"
            android:visibility="invisible">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:background="@color/colorPrimary">
            </ImageView>

        </LinearLayout>
    </io.codetail.widget.RevealFrameLayout>


    <!--layer 3-->
    <ImageView
        android:id="@+id/iv_detail"
        android:layout_width="80dp"
        android:layout_height="120dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="100dp"
        android:background="@color/colorAccent"/>

</RelativeLayout>

动画的流程是

1. layer 2默认不可见
2. layer 3 共享元素移动
3. layer 2 开始reveal动画

也就是在上一篇的基础上再加个动画

  private void runEnterAnimation() {
        destinationView.setVisibility(View.VISIBLE);
        destinationView.animate()
                .setDuration(DEFAULT_DURATION)
                .setInterpolator(DEFAULT_INTERPOLATOR)
                .scaleX(1f)
                .scaleY(1f)
                .translationX(0)
                .translationY(0)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        revealOn();//添加reval动画
                    }
                })
                .start();

    }


private void revealOn() {
    int cx = destinationView.getRight() - destinationView.getWidth() / 2;
    int cy = destinationView.getTop() + destinationView.getHeight() / 2;
    float radius = (float) Math.hypot(containerView.getWidth(), containerView.getHeight());
    Animator animator = ViewAnimationUtils.createCircularReveal(containerView, cx, cy, 0, radius);
    animator.setInterpolator(DEFAULT_INTERPOLATOR);
    animator.setDuration(900);
    animator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationStart(Animator animation) {
            containerView.setVisibility(View.VISIBLE);
        }
    });
    animator.start();
}

退出的话 以进入动画相反顺序执行

 @Override
 public void onBackPressed() {
        revealOff();
 }

public void revealOff() {
    int cx = destinationView.getRight() - destinationView.getWidth() / 2;
    int cy = destinationView.getTop() + destinationView.getHeight() / 2;
    float radius = (float) Math.hypot(containerView.getWidth(), containerView.getHeight());
    Animator animator = ViewAnimationUtils.createCircularReveal(containerView, cx, cy, radius, 0);
    animator.setInterpolator(DEFAULT_INTERPOLATOR);
    animator.setDuration(900);
    animator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            containerView.setVisibility(View.INVISIBLE);
            runExitAnimation();
        }
    });
    animator.start();
}


private void runExitAnimation() {
    destinationView.animate()
            .setDuration(DEFAULT_DURATION)
            .setInterpolator(DEFAULT_INTERPOLATOR)
            .scaleX(scaleX)
            .scaleY(scaleY)
            .translationX(deltaX)
            .translationY(deltaY)
        /*    .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    bgView.setVisibility(View.INVISIBLE);
                    finish();
                    overridePendingTransition(0, R.anim.fade_exit);
                }
            })*/
            .withEndAction(new Runnable() {
                @Override
                public void run() {
                    bgView.setVisibility(View.INVISIBLE);
                    finish();
                    overridePendingTransition(0, R.anim.fade_exit);
                }
            })
            .start();
}

最后效果会发现

1. activity b退出的时候效果还是不理想 这可能也是格瓦拉android不实现退出动画的原因，我觉得这个真想实现的话，通过alpha退出是可以实现和ios一样效果的
2. 动画差值器尤其重要，上面退出动画其实控制好也可以实现 我全部用的AccelerateDecelerateInterpolator 效果很生硬
3. RecycleView Item里面获取在屏幕位置好像会有偏差

当然只是粗糙简单实现一下，细节没有去深究，效果比原版差不少，重要的是看到别人的动画时，培养如何思考的这个过程。