以前我们定义activity转场动画都是如下:
Intent intent=new Intent(this,SecondActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.enter_anim,R.anim.exit_anim);
API21以上SDK内置了转场动画,可以用于Activity和Fragment,包结构如下
先看下内置的3种动画效果吧
是不是看起来很炫酷,老实说我没感觉有啥炫酷的,哈哈
这3种动画分别是 explode、slide、fade
现在来学习下怎么使用的吧
前置任务:
在setContentView()之前执行,用于告诉Window页面切换需要使用动画
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
或者在主题里面添加
<!-- 允许使用transitions -->
<item name="android:windowContentTransitions">true</item>
A Activity中代码:
switch (view.getId()) {
case R.id.tv_explode_transition:
mIntent.setClass(this, TransitionActivity.class);
mIntent.putExtra("transition", "explode");
startActivity(mIntent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
break;
case R.id.tv_slide_transition:
mIntent.setClass(this, TransitionActivity.class);
mIntent.putExtra("transition", "slide");
startActivity(mIntent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
break;
case R.id.tv_fade_transition:
mIntent.setClass(this, TransitionActivity.class);
mIntent.putExtra("transition", "fade");
startActivity(mIntent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
break;
B Activity中代码:
switch (transition) {
case "explode":
imageView.setBackgroundResource(R.drawable.circle_red);
Explode explode1 = new Explode();
getWindow().setEnterTransition(explode1);
break;
case "slide":
imageView.setBackgroundResource(R.drawable.circle_purple);
Slide slide = new Slide(Gravity.BOTTOM);
slide.setDuration(500L);
getWindow().setEnterTransition(slide);
break;
case "fade":
imageView.setBackgroundResource(R.drawable.circle_blue);
Fade fade = new Fade();
fade.setDuration(1000L);
getWindow().setEnterTransition(fade);
break;
}
这样就完事了,是不是很简单哦,
这里还有其他使用方法,效果一样,用XML文件来实现,如图:
<?xml version="1.0" encoding="utf-8"?>
<explode xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000">
</explode>
<?xml version="1.0" encoding="utf-8"?>
<slide xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:slideEdge="end">
</slide>
<?xml version="1.0" encoding="utf-8"?>
<fade xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000">
</fade>
然后在Activity中使用
getWindow().setExitTransition(TransitionInflater.from(this).inflateTransition(R.transition.slide));
getWindow().setEnterTransition(TransitionInflater.from(this).inflateTransition(R.transition.fade));
当然了,你也可以不使用代码的方式,直接在你使用的主题<style>标签里添加类似如下代码:
<item name="android:windowExitTransition">@transition/explode</item>
<item name="android:windowEnterAnimation">@transition/explode</item>
<item name="android:windowReenterTransition">@transition/explode</item>
接下来学习使用shareElement共享元素过渡动画
这个是神马东西呢,跟转场有啥关系呢,客官不要急,先看下效果图:
这个吊吧,哈哈,这个就是共享元素过渡动画,是不是有欲望了呢?
这个动画就是为了实现前一个页面的view过渡到后一个页面的view的效果。
使用也很简单,
A activity中代码:
case R.id.tv_share_elements:
mIntent.setClass(this, ShareElementsActivity.class);
ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this
, Pair.create(findViewById(R.id.img_share), "share")
, Pair.create(findViewById(R.id.tv_share), "share_text"));
//5.0以下兼容,ActivityOptionsCompat 是v4包中的类,不过也要V22.1.0及以上才有
/*ActivityOptionsCompat activityOptionsCompat1 = ActivityOptionsCompat.makeSceneTransitionAnimation(this
, Pair.create(findViewById(R.id.img_share), "share")
, Pair.create(findViewById(R.id.tv_share), "share_text"));*/
startActivity(mIntent, transitionActivityOptions.toBundle());
break;
B activity中代码:无
这个动画使用不一样了,需要在布局文件中做工作了
a_activity.xml
<LinearLayout
android:id="@+id/tv_share_elements"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="?android:attr/selectableItemBackground"
android:orientation="horizontal"
android:paddingLeft="@dimen/activity_horizontal_margin">
<ImageView
android:id="@+id/img_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="@drawable/circle_orange"
android:transitionName="share" />
<TextView
android:id="@+id/tv_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="12dp"
android:gravity="center_vertical"
android:text="Shared Elements"
android:transitionName="share_text"/>
</LinearLayout>
b_activity.xml
<View
android:id="@+id/view_top"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/color_orange"
android:transitionName="share">
</View>
<TextView
android:id="@+id/tv_transition_type"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:gravity="center"
android:text="Shared Elements"
android:transitionName="share_text" />
发现关键地方没,share、share_text在两个页面的布局中都有
transitionName就是这个关键地方,好了说下上面效果的出处,还不清楚的可以看下demo应该就清楚了
https://github.com/Trisaa/MaterialTranstion 点击打开链接
https://github.com/andremion/Music-Player 点击打开链接
又可以愉快玩耍了