先贴出运行效果,设计过程可参考代码注释

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[] p_w_picpathIDs = 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.p_w_picpathIDs.length; i++) {
            ImageView imgv = new ImageView(this);
            imgv.setImageResource(this.p_w_picpathIDs[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    新界面从左边平移进入视图动画




    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
    

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    旧界面从右边平移消失动画



    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                
    

push_left_out.xml    旧界面从左边平移消失动画




    
                                                                                                                                                                                                                                                                                                                                                                                                                                                     
    

push_right_in.xml    新界面从右边平移进入视图动画



    
                                                                                                                                                                                                                                                                                                                                                                                                                                            
    
                                                                                                                                                                                                                                                                                                                                                                                                                                            


rotaion_left_in.xml    新界面从左边旋转进入视图



    
                                                                                                                                                                                                                                                                                                                                                                                                                 
    
                                                                                                                                                                                                                                                                                                                                                                                                                 

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    旧界面从右边旋转离开视图



    
                                                                                                                                                                                                                                                                                                                                 
    
                                                                                                                                                                                                                                                                                                                                 


rotation_left_out.xml    旧界面从左边旋转离开视图



    
    

rotation_right_in.xml    新界面从右边旋转进入视图



    
                                                                                                                                   
    
                                                                                                                                   


scale_in.xml    新界面按比例放大进入视图



                                                                                                          

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节点内似乎没任何效果,但是如果用包裹,再将此属性放在节点内,就有效果了,读者可以自己试试看。)

scale_out.xml



                                    

结束~