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

效果图

强行解释

看了效果图其实也就明白了，这个是我最近做的一个小项目中的一个效果，其实就是很多个相似的可点击的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() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {oldView.setVisibility(View.GONE);animator2.setDuration(time).start();newView.setVisibility(View.VISIBLE);}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic 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 实验室

Android 点击View实现前后翻转动画相关推荐

Android模仿iPhone View旋转刷新数据动画详解
因为小马很喜欢在不同的页面之间跳转时加点好玩的动画,今天无意间看到一个动画效果感觉不错,几种效果图如下,既然好玩就写在博客中,直接说就是:该效果类似于iPhone中View的切换动画效果,今天就只介绍 ...
如果写一个点击view带动画的下滑展开显示隐藏内容的控件
原理是在onMeasure中得到隐藏内容的高度,点击这个view的时候对隐藏的view startAnimation,让它的高度从0增长到onMeasure得到的这个View的measureHeigh ...
Android 卡片翻转动画效果
转载请标明出处:http://blog.csdn.net/android_mnbvcxz/article/details/78570594 Android 卡片翻转动画效果前言前端时间开发一款应用 ...
Android翻转动画（卡片翻转效果）
文章目录前言需求一.先介绍三个插值器二.实现步骤 1.效果图 2.布局 3.逻辑判断(是否隐藏) 4.翻转动画 5.bug出现 6.bug解决三.源码 MainActivity.java a ...
android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu[转]
http://blog.csdn.net/jj120522/article/details/8095852 示意图就不展示了,和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉,在这 ...
Android ViewPager多页面滑动切换以及动画效果---换view
一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了 ...
iOS的view翻转动画实现--代码老，供参考
新建一个view-based模板工程,在ViewController文件中添加下面的代码,即可实现翻转效果: - (void)viewDidLoad { [super viewDidLoad]; // ...
Android 登录3D翻转动画效果
Android 登录3D翻转动画效果描述:这是一个登录3D翻转效果的Demo. 项目代码在最后面!!!!跳转到最后控件效果如下: 实现功能: 使页面进行3D翻转(3D翻转效果) 可通过回调监听两 ...
Android 点击图片放大至全屏再次点击关闭过度动画 Shared Element效果（共享元素效果）
Android 点击图片放大至全屏再次点击关闭过度动画最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...

Android 点击View实现前后翻转动画

效果图

强行解释

动画思路

动画实现过程

总结

Android 点击View实现前后翻转动画相关推荐

最新文章

热门文章