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。
网友评论