之前Android中两个Activity之间的跳转主要通过overridePendingtransition(int inId , int outId)来实现 , 但是效果比较生硬 , 视觉效果不理想 . 从Android 5.X开始 , Google丰富了Activity的转场动画效果 .
Android 5.X提供了三种Transition类型:
- 进入 : 一个进入的过渡动画决定Activity中的所有的视图怎么进入屏幕;
- 退出 : 一个退出的过渡动画决定一个Activity中的所有视图怎么退出屏幕;
共享元素 : 一个共享元素过渡动画决定两个Activities之间的过渡 , 怎么共享他们的视图.
其中 , 进入和退出效果包括:
▷explode(分解)—-从屏幕中间进或出 , 移动视图
▷slide(滑动)—-从屏幕边缘进或出 , 移动视图
▷fade(淡出)—-通过改变屏幕上视图的不透明度达到添加或者移除视图共享元素包括:
☆changeBounds—-改变目标视图的布局边界
☆changeClipBounds—-裁剪目标视图边界
☆changeTransform—-改变目标视图的缩放比例和旋转角度
☆changeImageTransform—-改变目标图片的大小和缩放比例
现在开始实验 , 先从最普通的三种过渡动画开始 , 这些动画使用非常简单 , 例如从ActivityA跳转到ActivityB , 只需要在ActivityA中将基本的startActivity(intent)方法改为如下代码即可.
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());
而在ActivityB中 , 只需要设置下如下所示代码:
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
或者在样式文件中设置如下所示代码:
<item name="android:windowContentTransitions">true</item>
那么接下来就可以设置进入ActivityB的具体的动画效果了 , 代码如下所示:
getWindow().setEnterTransition(new Explode());
getWindow().setEnterTransition(new Slide());
getWindow().setEnterTransition(new Fade());
或者通过如下代码来设置离开ActivityB的动画效果:
getWindow().setExitTransition(new Explode());
getWindow().setExitTransition(new Slide());
getWindow().setExitTransition(new Fade());
要想在程序中使用共享元素的动画效果也非常简单 , 首先需要在Activity1的布局文件中设置共享的元素 , 给它增加相应的属性 , 代码如下所示.
android:transitionName="XXX"
同时在Activity2的布局文件中 , 给要实现共享效果的元素也增加相同的属性 , 代码如下所示 .
android:transitionName="XXX"
这里需要注意的是一定要保证命名相同 , 这样系统才能找到共享元素 .
如果只要一个共享元素 , 那么Acitivity1中只需要使用如下代码 .
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(
this, view, "share").toBundle());
如果有多个共享的元素 , 那么可以通过Pair.create()来传建多个共享元素 , 代码如下所示 .
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(
this,
//创建多个共享元素
Pair.create(view, "share"),
Pair.create(fab, "fab")).toBundle());
下面通过一个实例来演示Activity的过渡动画 , Activity1代码如下所示:
package com.lyx.penddingtransition;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Pair;
import android.view.View;
public class MainActivity extends AppCompatActivity{
private Intent intent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
//设置不同的动画效果
public void explode(View view) {
intent = new Intent(this, SecondActivity.class);
intent.putExtra("flag", 0);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());
}
//设置不同的动画效果
public void slide(View view) {
intent = new Intent(this, SecondActivity.class);
intent.putExtra("flag", 1);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());
}
//设置不同的动画效果
public void fade(View view) {
intent = new Intent(this, SecondActivity.class);
intent.putExtra("flag", 2);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());
}
//设置不同的动画效果
public void share(View view) {
View fab = findViewById(R.id.fab_button);
intent = new Intent(this, SecondActivity.class);
intent.putExtra("flag", 3);
//创建单个共享元素
// startActivity(intent,
// ActivityOptions.makeSceneTransitionAnimation(
// this, view, "share").toBundle());
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(
this,
//创建多个共享元素
Pair.create(view, "share"),
Pair.create(fab, "fab")).toBundle());
}
}
Activity1对应的XML代码如下所示:
<?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"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:onClick="explode"
android:text="explode"/>
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:onClick="slide"
android:text="slide"/>
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:onClick="fade"
android:text="fade"/>
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:onClick="share"
android:text="share"
android:transitionName="share"/>
<Button
android:id="@+id/fab_button"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginTop="10dp"
android:background="@drawable/ripple_round"
android:elevation="5dp"
android:transitionName="fab"/>
</LinearLayout>
Activity2代码如下所示:
package com.lyx.penddingtransition;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.transition.Explode;
import android.transition.Fade;
import android.transition.Slide;
import android.view.Window;
public class SecondActivity extends AppCompatActivity {
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
int flag = getIntent().getExtras().getInt("flag");
//设置不同的动画效果
switch (flag) {
case 0:
getWindow().setEnterTransition(new Explode());
break;
case 1:
getWindow().setEnterTransition(new Slide());
break;
case 2:
getWindow().setEnterTransition(new Fade());
getWindow().setExitTransition(new Fade());
break;
case 3:
break;
}
setContentView(R.layout.activity_second);
}
}
其对应的XML如下所示:
<?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_second"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.lyx.penddingtransition.SecondActivity">
<View
android:id="@+id/holder_view"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#fadfda"
android:transitionName="share"/>
<Button
android:id="@+id/fab_button"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_alignParentEnd="true"
android:layout_below="@+id/holder_view"
android:layout_marginRight="20dp"
android:layout_marginTop="-26dp"
android:background="@drawable/ripple_round"
android:elevation="5dp"
android:transitionName="fab"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/holder_view"
android:paddingTop="100dp">
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_below="@+id/button4"
android:layout_marginTop="10dp"/>
<Button
android:id="@+id/button4"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentStart="true"
android:layout_marginTop="10dp"/>
</RelativeLayout>
</RelativeLayout>
效果如下图所示: