你不知道的Android 5.0转场共享动画实现炫酷效果

前两天，用圆形动画在Android L以上实现了一个炫酷的动画效果，今天就来用Android的共享动画来实现一个炫酷的转场动画。
共享动画的前提是最低版本Android5.0,这是Android5.0引进Material Design风格的动画的。

minSdkVersion 21

第一,什么是共享动画

所谓共享动画通俗点说View元素第一个界面上，View元素被点击后，会渐渐地滑动到第二个界面中去。许多Android开发场合中用到此类动画，比如从列表界面进入详情页面和系统相册进入详情页面。

第二,创建两个Activity和布局

创建MainActivity和SecondActivity两个Activity
在布局中需要注意一点
布局中设置transitionName属性，两个共享的元素名字必须相同
MainActivity布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.tang.make.zhuanchang.MainActivity">

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@mipmap/iv_meinv"
        android:transitionName="shareAnim"
        android:orientation="vertical"/>
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ll"
        android:textSize="24sp"
        android:textColor="@color/colorAccent"
        android:transitionName="shareAnimTexView"
        android:text="共享动画"/>
</RelativeLayout>

布局效果

Paste_Image.png

SecondActivity布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/ll_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:transitionName="shareAnim"
        android:orientation="vertical"
        android:background="@mipmap/iv_meinv"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:textColor="@color/colorAccent"
        android:transitionName="shareAnimTextView"
        android:text="共享动画"
        android:layout_gravity="bottom|center_horizontal"/>
</FrameLayout>

布局效果

Paste_Image.png

第三，设置SecondActivitys的沉浸式状态栏

设置SecondActivity的沉浸式状态栏（Android4.4后）
让图片和通知栏，导航栏融为一体，使动画执行起来效果更好

 getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
 //透明导航栏
 getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
 //内容共享
// getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
 setContentView(R.layout.activity_second);
 ActionBar actionBar= getSupportActionBar();
 if(actionBar!=null){
     actionBar.hide();
 }

请第四，界面跳转

就是共享动画的转场使用了，从MainActivity跳转SecondActivity界面

多个View元素的的转场使用Pair方法

final LinearLayout linearLayout= (LinearLayout) findViewById(R.id.ll);
final TextView textView=(TextView) findViewById(R.id.tv);
linearLayout.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
      //Pair存在V4包中
        startActivity(new Intent(MainActivity.this,SecondActivity.class),
                ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this,
                        Pair.create((View)linearLayout,"shareAnim"),
                        Pair.create((View)textView,"shareAnimTextView")).toBundle());
    }
});

单个元素使用

  /*
  这个情况是不适用V7包的
   */
startActivity(new Intent(MainActivity.this,SecondActivity.class),
        ActivityOptions.makeSceneTransitionAnimation(MainActivity.this,linearLayout,"shareAnim").toBundle());

  /*
  使用V7包ActiityOptionCompat
   */
  startActivity(new Intent(MainActivity.this,SecondActivity.class),
          ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this,linearLayout,"shareAnim").toBundle());

最终效果：

需要源码在微信公众号回复：1208源码

Android订阅是探讨Android开发的公众号，分享最有价值的Android干货文章
欢迎关注我们，一起讨论技术，扫描和长按下方的二维码可快速关注我们

1480345206391598.jpg