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