先貼出運行效果，設計過程可參考代碼註釋
1.平移動畫
2.旋轉動畫
3.伸縮動畫
4.翻頁動畫
核心代碼：
MainActivity.java
說明：此代碼運行效果爲翻頁動畫，如果希望運行前三種動畫效果，請根據代碼註釋說明，取消/添加對相關代碼的註釋即可。
import android.os.Bundle;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AnimationUtils;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Interpolator;
import android.widget.ImageView;
import android.widget.ViewFlipper;
public class MainActivity extends Activity implements OnGestureListener {
// 加速器
private Interpolator accelerate = new AccelerateInterpolator();
// 減速器
private Interpolator decelerate = new DecelerateInterpolator();
// 消失動畫
private ObjectAnimator disappear = null;
// 出現動畫
private ObjectAnimator appear = null;
// 手勢是否爲從左往右
private boolean leftToRight = false;
// 圖片資源
private int[] imageIDs = new int[]{
R.drawable.gallery_photo_1,
R.drawable.gallery_photo_2,
R.drawable.gallery_photo_3,
R.drawable.gallery_photo_4,
R.drawable.gallery_photo_5
};
// 支持View切換的控件，它包含一個以上的子View，同一個時刻只有一個子View顯示
private ViewFlipper vfContent;
// 支持檢測各種手勢事件
private GestureDetector gestureDetector = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.vfContent = (ViewFlipper) findViewById(R.id.vf_content);
this.gestureDetector = new GestureDetector(this, this);
for(int i = 0; i < this.imageIDs.length; i++) {
ImageView imgv = new ImageView(this);
imgv.setImageResource(this.imageIDs[i]);
// 充滿父控件
imgv.setScaleType(ImageView.ScaleType.FIT_XY);
// 添加到ViewFlipper實例中
this.vfContent.addView(
imgv,
new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onDown(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}
@Override
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
// TODO Auto-generated method stub
return false;
}
@Override
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
// 對手指滑動的距離進行計算，如果滑動距離大於120，則開始切換動作
/*
* e1 滑動開始事件
* e2 滑動進行時事件
* velocityX X軸方向的滑動速度
* velocityY Y軸方向的滑動速度
*/
float start = e1.getX();
float end = e2.getX();
// 從左向右滑動
if(start < end && (end - start) > 120) {
// --------------------------------push效果---------------------------------------------------
// 添加左邊push進入動畫
// this.vfContent.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
// 添加右邊push離開動畫
// this.vfContent.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
// --------------------------------------------------------------------------------------------------
// --------------------------------rotate效果---------------------------------------------------
// 添加左邊rotate進入動畫
// this.vfContent.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.rotation_left_in));
// 添加右邊rotate離開動畫
// this.vfContent.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.rotation_right_out));
// --------------------------------------------------------------------------------------------------
// --------------------------------scale效果---------------------------------------------------
// 添加左邊scale進入動畫
// this.vfContent.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.scale_in));
// 添加右邊scale離開動畫
// this.vfContent.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.scale_out));
// --------------------------------------------------------------------------------------------------
// this.vfContent.showPrevious(); // 顯示上一個視圖
// --------------------------------page效果---------------------------------------------------
leftToRight = true;
flipit();
// --------------------------------------------------------------------------------------------------
return true;
} else if(start > end && (start - end) > 120) { // 從右向左滑動
// --------------------------------push效果---------------------------------------------------
// this.vfContent.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
// this.vfContent.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
// --------------------------------------------------------------------------------------------------
// --------------------------------rotate效果---------------------------------------------------
// this.vfContent.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.rotation_right_in));
// this.vfContent.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.rotation_left_out));
// --------------------------------------------------------------------------------------------------
// --------------------------------scale效果---------------------------------------------------
// this.vfContent.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.scale_in));
// this.vfContent.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.scale_out));
// --------------------------------------------------------------------------------------------------
// this.vfContent.showNext(); // 顯示下一個視圖
// --------------------------------page效果---------------------------------------------------
leftToRight = false;
flipit();
// --------------------------------------------------------------------------------------------------
return true;
}
return true;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// 把觸摸事件交給手勢檢測器處理
return this.gestureDetector.onTouchEvent(event);
}
private void flipit() {
if(leftToRight) { // 如果手勢爲從左往右滑動
// 目標控件爲this.vfContent
// 消失動畫屬性名稱，在此爲以Y軸作爲旋轉軸
// 消失動畫從0角度開始到90角度（順時針）
disappear = ObjectAnimator.ofFloat(this.vfContent, "rotationY", 0f, 90f);
appear = ObjectAnimator.ofFloat(this.vfContent, "rotationY", 270f, 360f);
} else {
// 目標控件爲this.vfContent
// 消失動畫屬性名稱，在此爲以Y軸作爲旋轉軸
// 消失動畫從0角度開始到-90角度（逆時針）
disappear = ObjectAnimator.ofFloat(this.vfContent, "rotationY", 0f, -90f);
appear = ObjectAnimator.ofFloat(this.vfContent, "rotationY", -270f, -360f);
}
disappear.setDuration(700); // 設置動畫持續時間
disappear.setInterpolator(this.accelerate); // 設置加速器
appear.setDuration(700);
appear.setInterpolator(decelerate); // 設置減速器
disappear.addListener(new AnimatorListenerAdapter(){
@Override
public void onAnimationEnd(Animator animation) {
appear.start(); // 當消失動畫結束後，開始顯示動畫
if(leftToRight) {
vfContent.showPrevious(); // 如果手勢爲從左往右，則顯示上一個視圖
} else {
vfContent.showNext();
}
}
});
disappear.start();
}
}Project目錄結構：
push_left_in.xml 新界面從左邊平移進入視圖動畫
<?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="500" />
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="500" />
</set>translate：界面切換平移動畫效果
android:fromXDelta 動畫開始時，界面參照點在X軸的位置（參照點可視爲界面左上角），值爲百分比形式：100%表示相對視圖本身最右端的位置，100%p表示相對父視圖最右端的位置，-100%p表示相對父視圖最左端的位置
android:toXDelta 動畫結束時，參照點在X軸的位置
android:duration 動畫持續時間（毫秒）
alpha: 透明度漸變動畫效果
android:fromAlpha 動畫開始時，界面透明度值（1爲不透明，0爲全透明）
android:toAlpha 動畫結束時，界面透明度值
android:duration 動畫持續時間
push_right_out.xml 舊界面從右邊平移消失動畫
<?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="500" />
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="500" />
</set>push_left_out.xml 舊界面從左邊平移消失動畫
<?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="500" />
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="500" />
</set>push_right_in.xml 新界面從右邊平移進入視圖動畫
<?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="500" />
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="500" />
</set>rotaion_left_in.xml 新界面從左邊旋轉進入視圖
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromDegrees="-90"
android:toDegrees="90"
android:pivotX="100%"
android:pivotY="100%"
android:duration="500" />
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="500" />
</set>rotate: 界面切換旋轉動畫效果
android:interpolator：動畫加速/減速插入器，此處使用Android系統提供的
android:fromDegrees：開始動畫時組件的角度，此時的組件爲ImagView
android:toDegrees：結束動畫時組建的角度
特別說明：
負數from —> to正數：順時針
正數from —> to正數：順時針
正數from —> to負數：逆時針
負數from —> to負數：逆時針
android:pivotX：旋轉參照點在X軸上的位置，（參照點爲旋轉圓心）
android:pivotY：旋轉參照點在Y軸上的位置
rotation_right_out.xml 舊界面從右邊旋轉離開視圖
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromDegrees="0"
android:toDegrees="90"
android:pivotX="100%"
android:pivotY="100%"
android:duration="500" />
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="500" />
</set>rotation_left_out.xml 舊界面從左邊旋轉離開視圖
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromDegrees="0"
android:toDegrees="+90"
android:pivotX="0"
android:pivotY="0"
android:duration="500" />
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="500" />
</set>rotation_right_in.xml 新界面從右邊旋轉進入視圖
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromDegrees="-90"
android:toDegrees="0"
android:pivotX="0"
android:pivotY="0"
android:duration="500" />
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="500" />
</set>scale_in.xml 新界面按比例放大進入視圖
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="0.0"
android:toXScale="1.1"
android:fromYScale="0.0"
android:toYScale="1.1"
android:pivotX="50%"
android:pivotY="50%"
android:duration="700"
android:fillAfter="true">
</scale>scale：界面切換按比例伸縮動畫
android:fromXScale：動畫開始時組件在X軸上的伸縮比例（0.0爲最小，1.0爲正常尺寸，1.5爲正常的1.5倍）
android:fromYScale：動畫開始時組件在Y軸上的伸縮比例
android:toXScale：動畫結束時組件在X軸上的伸縮比例
android:toYScale：動畫結束時組件在Y軸上的伸縮比例
android:pivoyX：動畫開始時參照點在X軸上的位置，50%爲中點
android:pivotY：動畫開始時參照點在Y軸上的位置，50%爲中點
android:fillAfter：當設置爲true時，使動畫保持在播放的最後一幀。（此屬性放在scale節點內似乎沒任何效果，但是如果用<set></set>將<scale/>包裹，再將此屬性放在<set>節點內，就有效果了，讀者可以自己試試看。）
scale_out.xml
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="700"
android:fillAfter="true">
</scale>結束~