1. 运行效果
实际的效果比图片看起来要更加丝滑流畅,已验证过大部分的主流机型,即使机子本身比较卡顿,跑起来后也是非常丝滑流畅的,并已运用到实际的项目当中
test_3d.gif
2. 完整代码
代码很简单,两个属性动画,一个处理旋转,一个处理旋转时的缩放,硬件加速能有效提升动画体验
/**
* 3D翻转动画
*
* @param rootView
* @param view1
* @param view2
* @author QiuLong
*/
public static void start3DRotateAnimator(final View rootView, final View view1, final View view2) {
final float from = view1.getVisibility() == View.INVISIBLE ? 0 : 180;
final float to = from == 0 ? 180 : 0;
ValueAnimator rotateAnimator = ValueAnimator.ofFloat(from, to);
rotateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float value = (float) valueAnimator.getAnimatedValue();
if (value <= 90) {
if (view1.getVisibility() != View.INVISIBLE) {
view1.setVisibility(View.INVISIBLE);
view2.setVisibility(View.VISIBLE);
}
rootView.setRotationY(value);
} else {
if (view1.getVisibility() != View.VISIBLE) {
view1.setVisibility(View.VISIBLE);
view2.setVisibility(View.INVISIBLE);
}
rootView.setRotationY(value - 180);
}
}
});
ValueAnimator tzAnimator = ValueAnimator.ofFloat(1, 0.6f, 1);
tzAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float value = (float) valueAnimator.getAnimatedValue();
rootView.setScaleX(value);
rootView.setScaleY(value);
}
});
AnimatorSet set = new AnimatorSet();
set.setDuration(600);
set.playTogether(rotateAnimator, tzAnimator);
set.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
// 开启硬件加速
rootView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
// 这里做页面翻转前的操作
}
@Override
public void onAnimationEnd(Animator animation) {
// 关闭硬件加速
rootView.setLayerType(View.LAYER_TYPE_NONE, null);
// 这里做页面翻转后的操作
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
set.start();
}
3. 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<FrameLayout
android:id="@+id/root_view"
android:layout_width="240dp"
android:layout_height="480dp">
<TextView
android:id="@+id/root_view_2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#6200EE"
android:gravity="center"
android:text="2"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:visibility="invisible" />
<TextView
android:id="@+id/root_view_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#03DAC5"
android:gravity="center"
android:text="1"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:visibility="visible" />
</FrameLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickRotate"
android:text="翻转" />
</LinearLayout>
4. 使用
AnimationHelper.start3DRotateAnimator(rootView, rootView2, rootView1);