一个不留神又好久没写博客了，有点儿惭愧。一方面最近实验室的项目巨多...手上同时两三个新的app一起做，关键就我一个人做...（说多了都是泪）...再加上还有学车的费劲事儿，就忘了博客这个事儿了，算了，废话少说，直接进入今天的正题，先上效果图

效果图

翻转动画.gif

强行解释

看了效果图其实也就明白了，这个是我最近做的一个小项目中的一个效果，其实就是很多个相似的可点击的view，点击之后有翻牌子的效果，整个运行效果个人感觉还算可以，所以就想写出来分享一下，欢迎批评指正和建议

动画思路

在实现这种效果之前也搜索了一些情况，而本文的效果也是参考了这个博主的一篇博客 编写的，感谢这位博主，有兴趣的可以去围观。
点击翻转的动画其实也挺简单,把整个过程可以分解为两个步骤

1、第一个view，也就是点击的view以自身正中间的X轴为轴向上翻转90°消失；
2、第二个view，也就是翻转后要显示的view以相同的轴向下翻转90度出现；

整个过程就是这么简单，就看怎么用动画去实现了。

动画实现过程

自定义一个view的翻转动画静态方法

public class AnimUtil {

    public static void FlipAnimatorXViewShow(final View oldView, final View newView, final long time) {

        ObjectAnimator animator1 = ObjectAnimator.ofFloat(oldView, "rotationX", 0, 90);
        final ObjectAnimator animator2 = ObjectAnimator.ofFloat(newView, "rotationX", -90, 0);
        animator2.setInterpolator(new OvershootInterpolator(2.0f));

        animator1.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                oldView.setVisibility(View.GONE);
                animator2.setDuration(time).start();
                newView.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator1.setDuration(time).start();
    }
}

在该方法中使用了属性动画里的ObjectAnimator，现在点击的view就是要传入的oldView参数，该view先会绕自身中间的x轴向上旋转90度；
然后设置了对上述动画动作的监听，当oldView的动画animator1完成时，将oldView设为不可见，开始要在翻转后显示的view的动画animator2，即newView从水平位置向下翻转90度，设为可见，这样就完成了整个翻转的动画动作，是不是so easy。
另外给第二个动画设置了一个OvershootInterpolator的插值器，这样在动画即将完成时会有一个弹性回弹的效果，视觉效果更好。

总结

哈哈，这篇博客就这样写完了？好像是太快了点儿，不过毕竟确实东西也挺简单的，主要自己觉得动画效果还行，所以就记录一下，以供学习使用。

水平还是太菜，如果有什么不对的地方或者好的建议，欢迎批评指正

2017.6.2 10:08
806 实验室