1.整體效果
首先看下android5.0以上的轉場動畫用共享元素實現以及配合補間動畫和圓形縮放動畫實現的activity的轉場效果。
效果圖.gif
2.實現共享元素
首先要在 AndroidManifest.xml 中為需要這種動畫的 Activity 開啟這個功能，為此為這里為其寫了一個style，注意要放在values-v21的style.xml文件里面，因為該效果是只有android5.0以上才有的。
<style name="OptionsActivity" parent="AppTheme.NoActionBar">
<item name="android:windowContentTransitions">true</item>
</style>
然后我們來創建需要實現共享元素效果的兩個activity，接收共享元素的activity主要方法如下
private static final String OPTION_IMAGE = "image";
public static void StartOptionsActivity(AppCompatActivity activity, View transitionView, ItemInfo info) {
Intent intent = new Intent(activity, OptionsActivity.class);
intent.putExtra(ITEM_ID, info);
// 這里指定了共享的視圖元素
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, transitionView, OPTION_IMAGE);
ActivityCompat.startActivity(activity, intent, options.toBundle());
}
private void init() {
ivHead.setImageResource(info.imageRes);
tvTitle.setText(info.title);
// 這里指定了被共享的視圖元素
ViewCompat.setTransitionName(ivHead, OPTION_IMAGE);
}
注意這邊需要制定兩邊共享元素的名稱，這里使用的是"image"，當然名稱可以隨便你取，這個時候調用StartOptionsActivity方法就可以看到共享元素的效果了，（是不是很簡單）。
3.實現補間動畫效果
上面的步驟其實就可以實現共享元素的效果了，那么下面我們在加上補間動畫和圓形縮放動畫讓整體的效果更好。實現補間動畫很簡單（這邊使用的是漸變的效果）。
添加實現漸變的控件
<TextView
android:id="@+id/tv_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:gravity="center"
android:padding="7dp"
android:text="@string/larg_string"
android:textSize="16sp" />
注意這邊需要設置透明度alpha，然后通過 tvTitle.animate().alpha(1).setStartDelay(100).start();進行調用，實現效果
4.實現圓形縮放動畫效果
圓形縮放效果采用的是android5.0的以后的方法ViewAnimationUtils.createCircularReveal()進行實現的，也就是說在5.0以上的設備才能看到該效果。
我在這邊設置了兩個imageview來實現這樣的效果，一個表現的為綠色背景的展開效果，一個是在展開效果完成時候實現背景圖的展現，代碼如下
<ImageView
android:id="@+id/iv_tool_head"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<ImageView
android:id="@+id/iv_tool_head_show"
android:layout_width="match_parent"
android:layout_height="200dp"
android:alpha="0"
android:src="@drawable/back"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
在activity中的調用如下
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void animateRevealShow(View viewRoot) {
int cx = (viewRoot.getLeft() + viewRoot.getRight()) / 2;
int cy = (viewRoot.getTop() + viewRoot.getBottom()) / 2;
int finalRadius = Math.max(viewRoot.getWidth(), viewRoot.getHeight());
Animator anim = ViewAnimationUtils.createCircularReveal(viewRoot, cx, cy, finalRadius / 3, finalRadius);
viewRoot.setVisibility(View.VISIBLE);
anim.setDuration(100);
anim.start();
//開始前設置標題的背景
ivToolhead.setImageResource(R.color.bg_title_bar);
anim.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
//設置一個顯示的動畫
ivToolHeadShow.animate().alpha(1).setStartDelay(100).start();
tvText.animate().alpha(1).setStartDelay(100).start();
tvTitle.animate().alpha(1).setStartDelay(100).start();
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
在圓形展開效果完成之后在進行補間動畫的調用（在這邊是透明度的變化）。
5.其他
整體效果的實現也使用了AppBarLayout，CollapsingToolbarLayout，Toolbar等一些控件進行實現（主要是android5.0出的新的控件）大家可以看下 http://blog.csdn.net/feiduclear_up/article/details/46514791 這篇博客，這里就不過多的闡述了。最后奉上實現代碼下載地址：https://github.com/hzl123456/Options。
