Material Design - ShareElements

jake-ingle

拖了很久，不过终于有时间把这个点给磨完了。网上关于共享元素的效果很多，不过大致原理相同，先看看效果图：

GIF.gif

共享元素的优点这里就不讲了，很多东西学了不一定有用，但是好看的东西大家都喜欢。

注意：共享元素需要 api 21 以上才支持

Activity 中的共享元素

---

第一步

首先，我们需要在style.xml中加入下面的代码：

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="android:windowContentTransitions">true</item>
    ...
</style>

当然用 java 代码在用到共享元素的页面设置也可以。

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

第二步

接下来，我们需要确认两个页面中共享的元素。Android 提供了android:transitionName:属性作为两个 View 共享的标志。页面中的共享元素可以不同id，在不同的层级，但是一定要有android:transitionName:，这是标志两个View为共享元素的唯一标志。

item_layout.xml:
<LinearLayout>
    <LinearLayout>
        <ImageView
            android:id="@+id/item_img"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/img_1"
            android:transitionName="SharedImage"
            />
        <TextView/>
    </LinearLayout>
</LinearLayout>

activity_target.xml
<LinearLayout>
    <LinearLayout>
        <TextView/>
    </LinearLayout>
    <LinearLayout>
        <TextView/>
        <ImageView
            android:id="@+id/target_shareImg"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:transitionName="SharedImage"
            android:layout_marginLeft="24dp"
            android:layout_marginRight="24dp"
            android:src="@drawable/img_1"
            />
    </LinearLayout>
</LinearLayout>

第三步

跳转指定页面：

Intent intent = new Intent(MainActivity.this, TargetActivity.class);
//可添加一个或多个共享元素
Pair<View, String>[] pairs = new Pair[]{
        Pair.create(view.findViewById(R.id.item_img), "SharedImage")};
        Pair.create(view.findViewById(R.id.item_name), "SharedName")
ActivityOptionsCompat options = ActivityOptionsCompat
        .makeSceneTransitionAnimation(MainActivity.this, pairs);
startActivity(intent,options.toBundle());

第四步

结束页面：

@Override
protected void onDestroy() {
    supportFinishAfterTransition();
    super.onDestroy();
}

效果

现在，你获得的应该是这样的动画：

GIF.gif

可以看到，共享元素的效果是有了，但是除了共享元素，其他的视图却很死板地直接显示出来了。共享元素要想有更好的感官体验，应该让内容后于共享元素显示。因此，我们需要监听共享元素的动画。

优化

共享元素的 Transition使用的是内部的默认值，我们无法对这个对象进行监听。为此，我们自定义共享元素的动画来实现需要的效果。

从效果上看，默认的Transition使用的应该是ChangeBounds 。因此，我们直接使用ChangeBounds作为我们的切换动画。

ChangeBounds changeBounds = new ChangeBounds();
changeBounds.setDuration(500);

changeBounds.addListener(new Transition.TransitionListener() {
    @Override
    public void onTransitionStart(Transition transition) {

    }

    @Override
    public void onTransitionEnd(Transition transition) {
        transition.removeListener(this);
        //开始其他视图的淡入动画
    }

    @Override
    public void onTransitionCancel(Transition transition) {

    }

    @Override
    public void onTransitionPause(Transition transition) {

    }

    @Override
    public void onTransitionResume(Transition transition) {

    }
});
getWindow().setSharedElementReturnTransition(changeBounds);
getWindow().setSharedElementEnterTransition(changeBounds);

其他视图的动画，我这里就做一个简单的淡入的例子，先在 xml 文件中把视图 alpha 值设置为 0，然后在共享元素动画结束后加入这样的代码：

TextView textview = (TextView) findViewById(R.id.target_content);
textview.animate().setDuration(1000).alpha(1f);

我们就可以得到这样的效果：

GIF.gif

Fragment 中的共享元素

---

和 Fragment 中的 Transition 一样，它们的属性也都在 FragmentTransaction 中：

SharedElementFragment sharedElementFragment = SharedElementFragment.newInstance();

Slide slideTransition = new Slide(Gravity.RIGHT);
slideTransition.setDuration(500);

ChangeBounds changeBoundsTransition = new ChangeBounds();
changeBoundsTransition.setDuration(500);

sharedElementFragment.setEnterTransition(slideTransition);//进入动画
sharedElementFragment.setSharedElementEnterTransition(changeBoundsTransition);//共享元素动画

getFragmentManager().beginTransaction()
        .replace(R.id.fragment_content, sharedElementFragment)
        .addToBackStack(null)
        .addSharedElement(sharedView, sharedName)
        .commit();

---

以上。

感谢：

Shared Element Activity Transition