Android实现翻转及延迟动画效果

共 6608字,需浏览 14分钟

 ·

2021-09-26 03:07

最近做了点翻转和延迟入场动画的效果,并做了些封装。

动画基于属性动画实现的,所以仅能在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完成了!

源码地址:

https://github.com/512DIDIDI/Pocket


到这里就结束啦。
浏览 66
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报