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();
以上。
感谢：
