android 学习使用Activity转场动画及shareElement

以前我们定义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       点击打开链接

又可以愉快玩耍了