安卓翻转及延迟动画
2018-10-30 本文已影响170人
512DIDIDI
好久没有写博客了...
最近在学习安卓一些动画效果制作。
做了点翻转和延迟入场动画的效果，并做了些封装。
动画基于属性动画实现的，所以仅能在api11以后运行，不过现在应该也没有11以前的机器了吧...
废话不多说，先上效果再贴代码(原谅图的渣画质...1080p容易加载不出来 裁剪下大小😭)。
自己捣鼓的app登录注册界面
关于这个界面，由于控件都在一个界面。
所以我这里采用了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) {
}
});
}
}
旋转动画就很简单了..
/**
* 旋转动画，其中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完成了！😊
