Activity转场动画——ActivityOptions，ac

作者: 流水潺湲 | 来源:发表于2017-05-26 17:43 被阅读1171次

相信大家对于Activity的过度动画都很熟悉了，一般情况下我们直接使用

overridePendingTransition(enterAnim, exitAnim);

但是这种老旧、生硬的方式怎么能适合我们的MD风格的App呢!好在google在新的sdk中给我们提供了另外一种Activity的过度动画——ActivityOptions。并且提供了兼容包——ActivityOptionsCompat。这篇博客我们就是来了解下这个新的activity过度机制。

一、简介

ActivityOptionsCompat是一个静态类，提供了为数不多的几个方法，下面我们来罗列一下：

1. 
ActivityOptionsCompat.makeCustomAnimation(Context context, int enterResId, int exitResId)

2. 
ActivityOptionsCompat.makeScaleUpAnimation(View source,int startX, int startY, int startWidth, int startHeight)

3. 
ActivityOptionsCompat.makeThumbnailScaleUpAnimation(View source,Bitmap thumbnail, int startX, int startY)

4. 
ActivityOptionsCompat.makeSceneTransitionAnimation(Activity activity, View sharedElement, String sharedElementName)

5. 
ActivityOptionsCompat.makeSceneTransitionAnimation(Activity activity,Pair<View, String>… sharedElements)

恩，就这5个方法可以调用，也就是说为我们提供了这么5中过度方式，在使用的时候我们需要在theme指定:

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="android:windowContentTransitions">true</item>
</style>

二、 makeCustomAnimation

makeCustomAnimation这个很简单，从参数中我们可以发现，这个和overridePendingTransition非常类似，确实，在实现效果上和overridePendingTransition也是相同的。
下面就一段代码演示一下效果：

public void click(View view) {
      ActivityOptionsCompat compat = ActivityOptionsCompat.makeCustomAnimation(this,
              R.anim.translate_in, R.anim.translate_none);
      ActivityCompat.startActivity(this,
              new Intent(this, Activity2.class), compat.toBundle());
  }

三个参数，第一个是指当前activity，第二个和第三个参数分别是进入动画和退出动画，需要注意的是我们启动activity的方式是使用ActivityCompat.startActivity，最后一个参数我们使用compat.toBundle。

来看看目标的activity，

public class Activity2 extends AppCompatActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        ActivityCompat.finishAfterTransition(this);
    }
}

在退出的时候调用ActivityCompat.finishAfterTransition(this)进行退出动画。
以上使用方式在接下来的几个方式中使用一致，大家可以多了解一下。

三、 makeScaleUpAnimation

makeScaleUpAnimation这种方式个人感觉用途还是很广的，效果就是不断的
放大一个view，进而进行activity的过度，
看代码，

private void launch(View view) {
    ActivityOptionsCompat compat = ActivityOptionsCompat.makeScaleUpAnimation(view,
            view.getWidth() / 2, view.getHeight() / 2, 0, 0);
    ActivityCompat.startActivity(this, new Intent(this, Activity2.class),
            compat.toBundle());
}

说明下几个参数，第1个参数是scale哪个view的大小，第2和3个参数是以view为基点，从哪开始动画，这里是该view的中心，4和5参数是新的activity从多大开始放大，这里是从无到有的过程。

放大

四、 makeThumbnailScaleUpAnimation

该方法和上面的makeScaleUpAnimation非常相似，只不过，这里是通过放大一个图片，最后过度到一个新的activity，第2个参数是指那个图片要放大，3和4参数表示从哪开始动画，使用方法很简单，这里就不演示了。接下来我们要进入两个稍微复杂点的动画，这两个的方法名相同，都是makeSceneTransitionAnimation。

五、单一的makeSceneTransitionAnimation

什么是scene？就是场景动画，在这里就体现在两个activity中的某些view协同去完成过度动画，先来看一个效果吧，

相册图片放大移动到指定位置

这个图片就是通过动画和上一个界面的图片进行了联系。

要使用这个方法就必须给两个不同Activity的中的布局元素设定同样的一个android:transitionName，然后还需要一个标志来告诉Window执行动画，因为这个只是在5.x上有效，不是本文的讨论范围。详细看官方文档即可。

标志：etWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

也可以参考文章：

http://blog.csdn.net/a396901990/article/details/40187203

http://blog.jobbole.com/77015/
从效果中可以看到是两个activity的两个view进行协作的动画，该动画怎么实现呢?其实很简单

private void launch(View view) {
    ActivityOptionsCompat compat =
            ActivityOptionsCompat.makeSceneTransitionAnimation(this,
                    view, getString(R.string.transition));
    ActivityCompat.startActivity(this, new Intent(this,
            Activity2.class), compat.toBundle());
}```
相信你已经看到了makeSceneTransitionAnimation方法，前两个参数不用说了，那第三个参数是什么？是这样的？因为要协作动画的两个view在不同的activity中，那我们怎么指定是哪两个view呢？这里android 
给我们提供了一个新xml配置项android:transitionName用来指定哪些view进行写作，例如该demo中第一个activity的布局文件，

<ImageView
    android:id="@+id/image"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:scaleType="fitXY"
    android:src="@drawable/show"
    android:transitionName="@string/image" />

</RelativeLayout>```
看ImageView的android:transitionName属性，我们指定为name是image的string，继续看看第二个activity的布局文件，肯定也有一个transitionName是name为image的string！

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"
        android:src="@drawable/show"
        android:transitionName="@string/image" />

</RelativeLayout>```
果然如此，这样android就知道这两个activity中哪个view进行动画了，因为我们在makeSceneTransitionAnimation 
的第三个参数是getString(R.string.transition)。

# 六、 多个view的协作 makeSceneTransitionAnimation

既然能指定一个view来进行协作，那肯定也能指定多个view了，来看看效果，
通过效果图可以看到两个activity参加动画有一个ImageView和一个TextView，那么这种多个view协作的动画怎么实现呢？我们通过代码来了解一下，首先是两个activity的布局文件,第一个activity，

<TextView
    android:id="@+id/text"
    android:textSize="20sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:text="LOADER!!" />

<ImageView
    android:id="@+id/image"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_above="@id/text"
    android:layout_centerHorizontal="true"
    android:src="@drawable/show"
    android:transitionName="@string/name" />

</RelativeLayout>```
很简单，我们分别给TextView和ImageView指定了transitionName,再来看看另一个activity的布局文件，肯定也是这样，分别给TextView和ImageView指定transitionName,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="300dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/show"
        android:scaleType="fitXY"
        android:transitionName="@string/name" />

    <TextView
        android:id="@+id/text"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_centerHorizontal="true"
        android:text="LOADER!!" />

</RelativeLayout>```
果然如此，我们就不详细说了， 那来看看activity中怎么写代码吧，

private void launch() {
Pair<View, String> imagePair = Pair.create(mImageView, getString(R.string.image));
Pair<View, String> textPair = Pair.create(mTextView, getString(R.string.name));

ActivityOptionsCompat compat = ActivityOptionsCompat
        .makeSceneTransitionAnimation(this, imagePair, textPair);
ActivityCompat.startActivity(this, new Intent(this, Activity2.class),
        compat.toBundle());

}```
首先我们通过Pair.create静态方法创建了两个Pair对象，这里有两个泛型，分别指定为View和String类型，create方法接受两个参数，第一个是参与动画的View，第二个是该View上的transitionName,和前面单一协作的类似，我们还是通过makeSceneTransitionAnimation方法创建一个compat,只需要第二个参数是一个Pair类型的可变参数最后同样适用ActivityCompat.startActivity启动新的activity。

代码其实很简单，这里就说这么多，现在思考一个问题，除了第一个我们指定了动画外，其他的我们好像没有机会去指定动画，我们想换一种动画咋办？不要着急，android给我们提供了几种预设的动画方式，它们分别是

这5个东西该怎么样呢？首先我们需要在res目录下新建一个我们以前没见过的目录transition，然后在transition目录里新建xml文件，如果是change_bounds，则代码这么写，

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds />
</transitionSet>```
如果是change_clip_bounds，则代码这么写，

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeClipBounds />
</transitionSet>```
其他的类似，大家可以通过下载demo的源码查看，是不是很简单？那我们怎么指定使用这些呢？还在styles.xml文件中配置我们的theme，

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_bottom</item>
        <item name="android:windowExitTransition">@android:transition/slide_bottom</item>
        <item name="android:windowSharedElementEnterTransition">@transition/change_bounds</item>
        <item name="android:windowSharedElementExitTransition">@transition/change_bounds</item>
    </style>
</resources>```
第一个item博客最开始说了，接下来的6个很有规律，我们两个一伙开始说，前两个，指定进入和退出的动画可以重叠，中间两个指定普通进入和退出的transition,这里使用了android预设的两个transition,最后两个指定我们使用sharedElement时的进入和退出动画，这里使用了我们自定义的transition。除此之外，我们还可以指定我们的transition动画的速度插值器和动画时长，

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeBounds
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="500"/>
</transitionSet>```
这里我们给changeBounds指定了速度插值器是加速度减速度插值，时长为500ms。好了，到这里ActivityOptionCompat就讲解完了，总体来说使用起来还是非常简单的，但是需要的注意的是，虽然是compat，虽然是向下兼容的，但是sharedElement动画还是只能在android 5.0以上才能运行，其他的动画大多数也只能兼容到android 4.0以上，叫compat的是因为我们指定了动画虽然在旧的版本上不能看到效果，但能保证程序不挂。

所有Activity使用一种切换，（比如像微信的，滑动效果）

1、直接在style中设置主题样式

 <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowBackground">@android:color/white</item>
        <item name="android:windowAnimationStyle">@style/activityAnimation</item>
    </style>
    <!--所有Activity动画-支持动画-->
    <style name="activityAnimation" parent="@android:style/Animation">
        <item name="android:activityOpenEnterAnimation">@anim/slide_right_in</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_left_out</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_left_in</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_right_out</item>
    </style>

slide_right_in

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="400"
        android:fromXDelta="100.0%p"
        android:toXDelta="0.0" />
</set>

slide_left_out

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="400"
        android:fromXDelta="0.0"
        android:toXDelta="-100.0%p" />
</set>

slide_left_in

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="400"
        android:fromXDelta="-100.0%p"
        android:toXDelta="0.0" />
</set>

slide_right_out

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="400"
        android:fromXDelta="0.0"
        android:toXDelta="100.0%p" />
</set>

2、Java代码——Activity常用转场动画：

底部弹入弹出：

 // 从下方弹出
overridePendingTransition( R.anim.push_up_in, android.R.anim.fade_out);

 // 对应退出
overridePendingTransition(android.R.anim.fade_in,R.anim.push_down_out);

push_up_in

<?xml version="1.0" encoding="utf-8"?>     
<!-- 上滑切入 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"   
        android:interpolator="@android:anim/decelerate_interpolator">     
    
    <translate
        android:fromXDelta="0%p" android:toXDelta="0%p"
        android:fromYDelta="100%p" android:toYDelta="0%p"
        android:duration="400" />
    
</set>

push_down_out

<?xml version="1.0" encoding="utf-8"?>     
<!-- 下滑切出 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"   
        android:interpolator="@android:anim/decelerate_interpolator">     
    
    <translate
        android:fromXDelta="0%p" android:toXDelta="0%p"
        android:fromYDelta="0%p" android:toYDelta="100%p"
        android:duration="400" />
    
</set>

左滑进入,右滑退出

    // 进入动画
    overridePendingTransition(R.anim.push_left_in,R.anim.push_left_out);

    // 退出动画
    overridePendingTransition(R.anim.push_right_in,R.anim.push_right_out);

push_left_in

<?xml version="1.0" encoding="utf-8"?>    
<set xmlns:android="http://schemas.android.com/apk/res/android">    
    <translate    
    android:fromXDelta="100%p"     
    android:toXDelta="0"     
    android:duration="400"/>    
    <alpha    
    android:fromAlpha="0.0"     
    android:toAlpha="1.0"   
    android:duration="400" />    
</set>

push_left_out

<?xml version="1.0" encoding="utf-8"?>    
<set xmlns:android="http://schemas.android.com/apk/res/android">    
    <translate    
    android:fromXDelta="0"     
    android:toXDelta="-100%p"     
    android:duration="400"/>    
    <alpha    
    android:fromAlpha="1.0"     
    android:toAlpha="0.0"     
    android:duration="400" />    
</set>

push_right_in

<set xmlns:android="http://schemas.android.com/apk/res/android">      
    <translate      
    android:fromXDelta="-100%p"       
    android:toXDelta="0"       
    android:duration="400"/>      
    <alpha      
    android:fromAlpha="0.0"       
    android:toAlpha="1.0"       
    android:duration="400" />      
</set>

push_right_out

<?xml version="1.0" encoding="utf-8"?>      
<set xmlns:android="http://schemas.android.com/apk/res/android">      
    <translate      
    android:fromXDelta="0"       
    android:toXDelta="100%p"       
    android:duration="400"/>      
    <alpha      
    android:fromAlpha="1.0"       
    android:toAlpha="1.0"     
    android:duration="400" />      
</set>

Demo中包含部分代码：https://github.com/huangshuyuan/UtilsDemo

Activity转场动画——ActivityOptions，ac

一、简介

二、 makeCustomAnimation

三、 makeScaleUpAnimation

四、 makeThumbnailScaleUpAnimation

五、单一的makeSceneTransitionAnimation

所有Activity使用一种切换，（比如像微信的，滑动效果）

1、直接在style中设置主题样式

2、Java代码——Activity常用转场动画：

底部弹入弹出：

左滑进入,右滑退出

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android Dev

Material Design

精选案例

Android开发

Animation

Android开发

Android知识

Android技术知识

Activity转场动画——ActivityOptions，ac

一、 简介

二、 makeCustomAnimation

三、 makeScaleUpAnimation

四、 makeThumbnailScaleUpAnimation

五、 单一的makeSceneTransitionAnimation

所有Activity使用一种切换，（比如像微信的，滑动效果）

1、直接在style中设置主题样式

2、Java代码——Activity常用转场动画：

底部弹入弹出：

左滑进入,右滑退出

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

一、简介

五、单一的makeSceneTransitionAnimation