先看效果
这个demo是仿照极客学院某个2D卡片翻转的效果做的。原来的demo是使用了补间动画, 我这里改用了属性动画(我更喜欢用属性动画)。
首先在布局的frameLayout里放两个imagView, 就是两张图片。将下面一张图片的rotationY改为90度
<ImageView
android:id="@+id/iv_b"
android:rotationY="90"
android:src="@drawable/image_b"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
然后在activity中
// 翻过去的动画
mAnimatorA1 = ObjectAnimator.ofFloat(mIvA, View.ROTATION_Y, 0, 90).setDuration(500);
mAnimatorB1 = ObjectAnimator.ofFloat(mIvB, View.ROTATION_Y, 90, 180).setDuration(500);
mAnimatorA1.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
mActivityMain.setClickable(false);
}
@Override
public void onAnimationEnd(Animator animation) {
mActivityMain.setClickable(true);
mAnimatorB1.start();
}
});
mAnimatorB1.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
mActivityMain.setClickable(false);
}
@Override
public void onAnimationEnd(Animator animation) {
mActivityMain.setClickable(true);
}
});
动画过程是这样的:图片A绕着最中间的Y轴旋转90度, 结束时让图片B绕着最中间的Y轴从90度旋转到180。这样看起来就像是图片A的反面就是图片B一样。关于属性动画如果不熟可以使用搜索引擎看看, 我就这么干的。
记得给两个动画都设置监听, 在动画开始的时候让布局可以不可点击, 在动画结束的时候让布局可以点击。这个细节非常重要。
demo我已经上传到github了, 有兴趣的可以看看。
demo地址