android 页面翻转进场动画_Android实现翻转及延迟动画效果

最近在学习安卓一些动画效果制作。做了点翻转和延迟入场动画的效果，并做了些封装。动画基于属性动画实现的，所以仅能在api11以后运行，不过现在应该也没有11以前的机器了吧...废话不多说，先上效果再贴代码(原谅图的渣画质...1080p容易加载不出来 裁剪下大小?)。关于这个界面，由于控件都在一个界面。所以我这里采用了FrameLayout作为父布局，内部嵌套多层RelativeLayout，例如登录、注册、找回密码等。然后翻转动画其实原理就很简单了：

只需要翻转背景FrameLayout180度(注意：此时整个页面是反转的?)，

然后把当前的RelativeLayout也翻转180度(当前的页面被翻转成正确的方向了)，

最后把要显示的RelativeLayout逆向翻转180度(要显示的页面也被翻转成正确的方向了)。

/** * 翻转动画 * * @param context 当前上下文，提供给setCameraDistance()使用 * @param backgroundView 背景View * @param frontView当前处于前面的View * @param behindView想要翻转显示的View */public static void setFlipAnimation(Context context, View backgroundView,View frontView, View behindView) {setCameraDistance(context, backgroundView, backgroundView); setCameraDistance(context, frontView, behindView); setAlphaAnimation(frontView, 1, 0, 0, 500, false); //必须让backgroundView和frontView同时翻转 否则会出现异常 setRotateAnimation(backgroundView, ROTATION_Y, 0, 180, 0, 1000, false); setRotateAnimation(frontView, ROTATION_Y, 0, 180, 0, 1000, false); setRotateAnimation(behindView, ROTATION_Y, 0, -180, 0, 1000, false); setAlphaAnimation(behindView, 0, 1, 500, 500, true);}

上面是翻转动画的方法封装，

setCameraDistance()是因为旋转Y轴会导致视角变化，所以此方法是用来调整视角距离

/** * 调整相机距离，避免旋转的时候高度差变化引起视觉效果差 * * @param context 当前上下文 * @param frontView 正面的view * @param behindView 背面的view */private static void setCameraDistance(Context context, View frontView, View behindView) {int distance = 16000; float scale = context.getResources().getDisplayMetrics().density * distance; frontView.setCameraDistance(scale); behindView.setCameraDistance(scale);}

这里还有一个细节是旋转动画的时候需要配合着透明动画，这样效果会更好。

并且为了防止误点，在透明动画过程中得设置RelativeLayout的Visibility

/** * 透明动画 * 最后一个isVisible是为了防止alpha为0时控件依然可被点击 */public static void setAlphaAnimation(final View view, float startAlpha, float endAlpha, long delayMills, long duration, boolean isVisible) {ObjectAnimator animator; animator = ObjectAnimator.ofFloat(view, "alpha", startAlpha, endAlpha); animator.setDuration(duration).setStartDelay(delayMills); animator.start(); //透明度动画伴随着页面是否可见，否则前一个页面仍然有点击事件 //如果为true，即要显示的页面，如果为false，即要隐藏的页面 if (isVisible) {animator.addListener(new Animator.AnimatorListener() {@Override public void onAnimationStart(Animator animation) {view.setVisibility(View.VISIBLE); } @Override public void onAnimationEnd(Animator animation) {} @Override public void onAnimationCancel(Animator animation) {} @Override public void onAnimationRepeat(Animator animation) {} }); } else {animator.addListener(new Animator.AnimatorListener() {@Override public void onAnimationStart(Animator animation) {} @Override public void onAnimationEnd(Animator animation) {view.setVisibility(View.INVISIBLE); } @Override public void onAnimationCancel(Animator animation) {} @Override public void onAnimationRepeat(Animator animation) {} }); }}

旋转和平移动画就很简单了..

/** * 平移动画 * translationDistance指的是应该平移多少距离 */public static void setTranslationAnimation(View view, String translation, float startTranslation, float translationDistance, long delayMills, long duration,boolean isOvershoot) {ObjectAnimator animator; animator = ObjectAnimator.ofFloat(view, translation, startTranslation, translationDistance).setDuration(duration); animator.setStartDelay(delayMills); if (isOvershoot){animator.setInterpolator(new OvershootInterpolator(1.5f)); } animator.start();}/** * 旋转动画，其中isOvershoot代表是否有回弹效果 */public static void setRotateAnimation(View view, String rotate, float startAngle, float endAngle, long delayMills, long duration, boolean isOvershoot) {ObjectAnimator animator; if (ROTATION_X.equals(rotate)) {animator = ObjectAnimator.ofFloat(view, ROTATION_X, startAngle, endAngle); } else if (ROTATION_Y.equals(rotate)) {animator = ObjectAnimator.ofFloat(view, ROTATION_Y, startAngle, endAngle); } else {throw new RuntimeException("rotate can not be else string," +" except 'rotationY,rotationX'"); } if (isOvershoot) {animator.setInterpolator(new OvershootInterpolator(1.5f)); } animator.setDuration(duration).setStartDelay(delayMills); animator.start();}

至此，翻转动画效果就完成了。至于延迟入场动画，我在这里也做了简单的封装：

/** * 设置移动延迟动画，类似于每个控件依次入场或退场动画 * * @param isVisible 控件是否可见 参考setAlphaAnimation解释 * @param eachDelay 每一个控件进场或退场的延迟时间 * @param eachDuration 每一个控件的duration * @param views 控件可变长参数，按顺序输入依次进场或退场 */public static void setMoveDelayAnimation(String translation, float startTranslation, float endTranslation, float startAlpha, float endAlpha, boolean isVisible, long firstDelay, long eachDelay, long eachDuration, @NonNull View... views) {int i = 0; for (View view : views) {if (i == 0) {setTranslationAnimation(view, translation,startTranslation, endTranslation, firstDelay, eachDuration,true); setAlphaAnimation(view, startAlpha, endAlpha, firstDelay, eachDuration, isVisible); } else {long delayMills = eachDelay * i + firstDelay; setTranslationAnimation(view, translation,startTranslation, endTranslation, delayMills, eachDuration,true); setAlphaAnimation(view, startAlpha, endAlpha, delayMills, eachDuration, isVisible); } i++; }}

在使用时仅需：

//登录信息页面依次从右往左出现PocketAnimation.setMoveDelayAnimation(PocketAnimation.TRANSLATION_X, SizeUtils.dp2px(100), 0, 1, true, 1000, 100, 500, mSignInLayoutLogin, mSignInLayoutAccount, mSignInLayoutPassword, mSignInLayoutSignIn, mSignInLayoutSignUp, mSignInLayoutForgetPassword);

这样一句话即可实现控件按顺序延时入场。嗯。这样动画就easy完成了！?

源码地址：

/512DIDIDI/Pocket

到这里就结束啦往期精彩回顾：

Android实现短信验证码自动填充功能

Android仿echo精美弹幕功能

Android实现头像重叠排列功能

Android仿QQ个性标签功能

Android仿QQ侧滑删除的功能

如果觉得《android 页面翻转进场动画_Android实现翻转及延迟动画效果》对你有帮助，请点赞、收藏，并留下你的观点哦！