本系列文章一共5篇
誰說Android的動畫不廉價（一）之項目分層
誰說Android的動畫不廉價（二）之轉場動畫
誰說Android的動畫不廉價（三）之共享元素動畫
誰說Android的動畫不廉價（四）之元素動畫
誰說Android的動畫不廉價（五）之水波紋動畫
GitHub源碼
引言
本篇博文是基于上一篇博文誰說Android的動畫不廉價（一）之項目分層的基礎上做的拓展。需要實現的是Android下面這種轉場效果。
目標效果圖
轉場動畫
前提說明
開啟轉場動畫
一般我們切換到另外一個Activity是使用startActivity(Intent intent);的方法。轉場時使用的是Android系統默認的轉場動畫。如果需要使用自定義的轉場動畫。那么我們就需要使用startActivity(Intent intent,Bundle bundle);的方法去啟動Activity。其中bundle是使用ActivityOptionsCompat類導出的。也就是ActivityOptionsCompat可以存儲了轉場效果的配置選項，然后導出到Bundle通過Intent去傳送。
創建轉場動畫
加載轉場動畫的方式有兩種，跟Android Animation類似。可以通過代碼創建和XML創建。
代碼創建
有下面幾個相關的類。
Transition
這個類是一個抽象類，主要是提供View 是怎么改變的，從而去達到不同的動畫效果。
TransitionSet
從Set命名我們可以知道，作用跟AnimationSet類似，可以成組地管理Transition。
Visibility
該類主要是決定View是否可見和View是否需要移除。
Slide
繼承自Visibility，Android為我們提供實現從邊緣位置移入移出視圖的動畫。
Explode
繼承自Visibility，Android為我們提供實現從屏幕中心位置移入移出視圖的動畫。
Fade
繼承自Visibility，Android為我們提供實現改變透明度移入移出視圖的動畫。
XML創建
XML創建的話我們需要去使用一個Inflater去加載。返回一個Transition
TransitionInflater.from(Context context).inflateTransition(transitionID);
加載XML的套路都是差不多的。。。
設置轉場動畫
我們通過getWindow.setXXXTransition去設置我們創建出來的動畫。其中XXX有一些幾個常見的
-
Window.setEnterTransition()：設置進入動畫 -
Window.setExitTransition()：設置退出動畫 -
Window.setReturnTransition()：設置從上一個Activity返回動畫 -
Window.setReenterTransition()：設置從新渲染動畫，例如ViewGroup或者子View的位置大小等發生改變。 -
Window.setSharedElementEnterTransition()：設置共享元素的進入動畫 -
Window.setSharedElementExitTransition()：設置共享元素的退出動畫
著手代碼
資源文件
我們需要創建四個Drawable
circle_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp" />
<gradient
android:endColor="#ff3d00"
android:startColor="#ff3d00" />
</shape>
circle_orange.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp" />
<gradient
android:endColor="#ffae00"
android:startColor="#ffae00" />
</shape>
circle_red.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp" />
<gradient
android:endColor="#ff3d00"
android:startColor="#ff3d00" />
</shape>
circle_yellow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp" />
<gradient
android:endColor="#ffe600"
android:startColor="#ffe600" />
</shape>
布局文件
activity_main.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">
<include layout="@layout/tool_bar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:focusableInTouchMode="true"
android:onClick="transition"
android:orientation="horizontal">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:src="@drawable/circle_blue" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="轉場動畫"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:focusableInTouchMode="true"
android:onClick="shareElements"
android:orientation="horizontal">
<ImageView
android:id="@+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:src="@drawable/circle_orange"
android:transitionName="share" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="共享元素動畫"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:focusableInTouchMode="true"
android:onClick="viewAnimations"
android:orientation="horizontal">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:src="@drawable/circle_red" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="元素動畫"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:focusableInTouchMode="true"
android:onClick="circularAnimations"
android:orientation="horizontal">
<ImageView
android:id="@+id/img1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:src="@drawable/circle_yellow"
android:transitionName="share1" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="circularAnimations"
android:text="水波紋動畫"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
activity_transition_demo.xml
轉場動畫界面
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:gravity="center_horizontal"
android:orientation="vertical">
<include layout="@layout/tool_bar" />
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="30dp"
android:src="@drawable/circle_orange" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:text="Android是一種基于Linux的自由及開放源代碼的操作系統，主要使用于移動設備，如智能手機和平板電腦，由Google公司和開放手機聯盟領導及開發。尚未有統一中文名稱，中國大陸地區較多人使用“安卓”或“安致”。"
android:textSize="18sp" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:onClick="exit"
android:text="Exit" />
</LinearLayout>
代碼文件
MainActivity.java
package demo.august1996.top.transitionanimationsdemo;
import android.content.Intent;
import android.support.v4.app.ActivityOptionsCompat;
import android.transition.Slide;
import android.view.Gravity;
import android.view.View;
import demo.august1996.top.transitionanimationsdemo.Activity.ToolbarActivity;
public class MainActivity extends ToolbarActivity {
@Override
protected void beforeInitView() {
super.beforeInitView();
Slide slideTransition = new Slide();
slideTransition.setSlideEdge(Gravity.LEFT);
slideTransition.setDuration(1000);
getWindow().setReenterTransition(slideTransition);
getWindow().setExitTransition(slideTransition);
}
@Override
protected void initView() {
}
@Override
protected int getContentViewID() {
return R.layout.activity_main;
}
@Override
protected String getToolbarTitle() {
return "誰說Android的動畫不廉價";
}
public void transition(View v) {
Intent intent = new Intent(this, TransitionActivity.class);
ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
startActivity(intent, activityOptionsCompat.toBundle());
}
public void shareElements(View v) {
}
public void viewAnimations(View v) {
}
public void circularAnimations(View v) {
}
}
這里的代碼量比較少，大多數東西是從前面提到過的。直接看
TransitionActivity的代碼
TransitionActivity.java
package demo.august1996.top.transitionanimationsdemo;
import android.content.Intent;
import android.support.v4.app.ActivityOptionsCompat;
import android.view.View;
import demo.august1996.top.transitionanimationsdemo.Activity.ToolbarActivity;
public class TransitionActivity extends ToolbarActivity {
public static final int EXPLODE_CODE = 1;
public static final int EXPLODE_XML = 2;
public static final int SLIDE_CODE = 3;
public static final int SLIDE_XML = 4;
@Override
protected void beforeInitView() {
super.beforeInitView();
}
@Override
protected void initView() {
}
@Override
protected int getContentViewID() {
return R.layout.activity_transition;
}
@Override
protected String getToolbarTitle() {
return "轉場動畫";
}
public void explodeCode(View v) {
Intent intent = new Intent(this, TransitionDemoActivity.class);
intent.putExtra("type", EXPLODE_CODE);
ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
startActivity(intent, activityOptionsCompat.toBundle());
}
public void explodeXML(View v) {
Intent intent = new Intent(this, TransitionDemoActivity.class);
intent.putExtra("type", EXPLODE_XML);
ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
startActivity(intent, activityOptionsCompat.toBundle());
}
public void slideCode(View v) {
Intent intent = new Intent(this, TransitionDemoActivity.class);
intent.putExtra("type", SLIDE_CODE);
ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
startActivity(intent, activityOptionsCompat.toBundle());
}
public void slideXML(View v) {
Intent intent = new Intent(this, TransitionDemoActivity.class);
intent.putExtra("type", SLIDE_XML);
ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
startActivity(intent, activityOptionsCompat.toBundle());
}
@Override
protected boolean canBack() {
return true;
}
}
其實這里也沒有太多的代碼主要是根據不同的參數去啟動Activity，我們主要的動畫代碼其實是在
TransitionDemoActivity里面
TransitionDemoActivity.java
這才是主要的代碼
package demo.august1996.top.transitionanimationsdemo;
import android.transition.Explode;
import android.transition.Slide;
import android.transition.Transition;
import android.transition.TransitionInflater;
import android.view.Gravity;
import android.view.View;
import android.view.animation.DecelerateInterpolator;
import demo.august1996.top.transitionanimationsdemo.Activity.ToolbarActivity;
public class TransitionDemoActivity extends ToolbarActivity {
@Override
protected void beforeInitView() {
super.beforeInitView();
Transition transition = null;
switch (getIntent().getIntExtra("type", -1)) {
case TransitionActivity.EXPLODE_CODE:
transition = new Explode();
transition.setDuration(1000);
transition.setInterpolator(new DecelerateInterpolator());
break;
case TransitionActivity.EXPLODE_XML:
transition = TransitionInflater.from(this).inflateTransition(R.transition.simple_explode);
break;
case TransitionActivity.SLIDE_CODE:
transition = new Slide();
((Slide) transition).setSlideEdge(Gravity.RIGHT);
transition.setDuration(1000);
transition.setInterpolator(new DecelerateInterpolator());
break;
case TransitionActivity.SLIDE_XML:
transition = TransitionInflater.from(this).inflateTransition(R.transition.simple_slide);
break;
}
if (transition != null) {
getWindow().setEnterTransition(transition);
getWindow().setExitTransition(transition);
}
}
@Override
protected String getToolbarTitle() {
return "轉場動畫看這里";
}
@Override
protected void initView() {
}
@Override
protected int getContentViewID() {
return R.layout.activity_transition_demo;
}
public void exit(View v) {
finishAfterTransition();
}
@Override
protected boolean canBack() {
return true;
}
}
咋一看，這里也沒多少代碼。。。所以說Android的動畫其實也是很廉價的。最主要看看下面兩個動畫資源文件怎么寫。
動畫資源文件
- 新建
res/transition文件夾 - 在新建文件夾下新建
simple_explode.xml
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<explode
android:duration="1000"
android:interpolator="@android:interpolator/bounce" />
</transitionSet>
- 在新建文件夾下新建
simple_explode.xml
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<slide
android:duration="1000"
android:interpolator="@android:interpolator/decelerate_cubic"
android:slideEdge="bottom" />
</transitionSet>
我們的效果圖
轉場動畫
總結
Android動畫真的很廉價。。。
