Android 共享元素动画

Andriod 5.0及之后，开始支持共享元素动画，该动画主要用于两个activity之间，两个Activity可以共享某些控件，Activity A跳转到Activity B的时候，A的某个控件能自动移动到B的相应控件的位置，产生动画。该动画看起来很高大上，而且实现方法非常简单，是我目前见过的实现起来最简单的动画了。

该动画实现起来有两步，每步都很简单：

1、在要共享的控件中加上属性，两个Activity的共享控件都要加这个属性，并且值保持一致。

android:transitionName=“your_str”

属性值是自定义的，就是一个字符串。

2、跳转到第二个Activity的时候，用下面的方式跳转

Intent intent = new Intent(ShareAnimatorActivity.this,SecondShareAnimActivity.class);
Bundle bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(ShareAnimatorActivity.this,shareImg,getString(R.string.share_pic_str)).toBundle();
startActivity(intent,bundle);

上面代码中调用了ActivityOptionsCompat.makeSceneTransitionAnimation方法，该方法有两个API：

public static ActivityOptionsCompat makeSceneTransitionAnimation(Activity activity,View sharedElement, String sharedElementName)

参数解释：activity就是发起跳转的Activity，shareElement就是共享的控件的id，sharedElementName就是第一步定义的字符串。这个方式只支持共享单个控件。

public static ActivityOptionsCompat makeSceneTransitionAnimation(Activity activity,Pair<View, String>... sharedElements)

参数解释：activity就是发起跳转的Activity，sharedElements是一个类型为Paire<View,String>可变长数组，每一个pair存放的就是一个共享控件的id和对应的字符串，可见该方法是可以支持多个共享控件的。

下面贴一下demo的代码：

发起跳转的Activity：

public class ShareAnimatorActivity extends AppCompatActivity {
    private ImageView shareImg;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_share_animator_main);
        shareImg = (ImageView) findViewById(R.id.share_pic);
        shareImg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d(TAG,"onClick");
                Intent intent = new Intent(ShareAnimatorActivity.this,SecondShareAnimActivity.class);
                Bundle bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(ShareAnimatorActivity.this,shareImg,getString(R.string.share_pic_str)).toBundle();
                startActivity(intent,bundle);
            }
        });
    }

布局文件为：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/timg"
        android:id="@+id/share_pic"
        android:transitionName="@string/share_pic_str"
        android:scaleType="fitXY"/>
</LinearLayout>

跳转到的Activity代码：

public class SecondShareAnimActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sencond_share_animator_main);
    }
}

布局文件为：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/timg"
        android:id="@+id/share_pic"
        android:transitionName="@string/share_pic_str"
        android:scaleType="fitXY" />
</LinearLayout>

补充：共享元素一般都是相同的控件，比如两个控件都为ImageView，但是如果不是同一类型的控件，比如ImageView和一个TextView共享了，经本人其实也是可以的，效果一样，但是估计没人会这么干吐舌头

。

Android 共享元素动画

猜你喜欢