Android之ViewFlipper：平移、旋转、伸缩、翻页四种动画效果

先贴出运行效果，设计过程可参考代码注释
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>

结束~

本文出自 “好寂寞先生” 博客，请务必保留此出处http://pannyhjm.blog.51cto.com/4473736/1281535