Android打造不一样的圆盘签到

作者：_LINXIONG

博客：http://my.csdn.net/lilinxiong

哎，期末考试完后，找工作找了一个月，好不容易找到一个工作，要实现的效果，哇，当时一看，感觉好难（主要是对动画不了解，不熟悉），但是没办法，毕竟最终还是要实现的，要不然，公司养你何用，说了这么多，先看下最终要实现的效果是啥吧：

当时看到这个效果说实在的，根本不知道如何下手，在伟大的群友的帮助下，找到了启舰大神写的动画专栏动画动画详解，看完这个系列文章后，然后再看这个效果，突然发现其实并不是很难，都是一些最简单的动画来实现的，主要用到：位移，缩放，透明度，然后把这些最简单的动画，用AnimatorSet控制一下就好了.OK，我们来具体的分析一下吧！

ImageView的的初始位置在哪里？

在实现这个动画的时候我们首先要明确一点就是周围的圆和中间的大圆的初始位置和初始大小分别在哪里，我们可以很清楚的看到，周围的小圆是围成的一个圆，然后大圆是在圆心的位置，且当点击的时候，会交换位置，之前大的变小，小的变大，这样的话，我们就可以确定，其实所有的圆的初始位置和初始大小都是在屏幕的中心，然后通过动画的位移，位移到周围的，中间的圆是通过缩放来达到放大效果的中间的那些显示出来有100分的那些的TextView也是同理哈，所以布局代码如下：

其中的样式代码如下：

周围的ImageView的是如何位移的？

其实这个问题，只要我们学过三角函数就很容易理解了，其实启舰大神专栏中也有写，写的非常浅显易懂：自定义控件三部曲之动画篇（十） -联合动画的XML与实现使用示例文章的开篇展示的效果就状语从句：这个几乎的英文一样的，原理部分在最后面，建议看一下这里就不细讲了实现的代码如下。：

点击中间大圆后的操作有那些

我们再来看一下效果图：

再点击大圆后的主要操作有：中间大圆翻盘 - >替换周围小圆位置同时小圆放大，大圆缩小主要的只有这两个，至于其它的显示积分啦，更换背景色啦，都是在这个基础之上加的，只是一个时机问题而已，逻辑理清之后，我们再来看下主要用到了哪些动画，翻盘效果已经很多了，主要的还是，缩放和位移，只用到了这两种动画，实现的代码如下：

• 翻盘：

• 动画文件代码如下：

back_scale.xml：

front_scale.xml：

替换周围小圆位置，同时大圆缩小，小圆放大：

OK，这样我们的基本功能就实现了，但是现在有个问题，就是，翻盘的动画写了，交换位置的动画也写了，但是这两个动画怎么关联起来呢，我们看效果图可以发现，交换位置是在翻盘动画结束后才启动的，那么就很简单啦，监听下翻盘的结束动画就好了，如下：

这样的话，只要给ImageView的添加点击事件就好了，最基本的功能就实现了。周围圆的不规则的随机上下左右的的动（其实是斜着动的）代码就更简单了，只用到位移了，然后设置动画事件无限就好了，代码如下：

里面用到了线程，主要是，随机值取的范围实在是太小了，不利用线程制造时间差，动画就成同步动的了，看着特别难受。

这样主体就差不多做完了，其他的就是一些小细节了，左上角提示的就用了滑入滑出的动画，也没什么难度，动画代码如下：

in_animation.xml：

out_animation.xml：

在上面的代码中，大家应该对TextImageBean这个不太理解哈，其实这个我是把一些的TextView和ImageView的以及位移的XY值和取的随机值等扔进去了，然后getIv就是取出的ImageView，getTv就是取出的TextView ，下载的依次已经上传到Github了，地址如下：

Android动画实现圆盘签到演示链接 
https://github.com/lilinxiong/CircularRingSign 

代码很乱，应该写一个动画管理来管理动画的，点击事件应该自定义的ViewGroup来管理一下的，无奈，拉iOS的太多了，要赶进度哇......所以代码就很乱了......希望各位不要嫌弃哈〜嘿嘿......

一命二运三风水，四修阴德五读书！

刘桂林

微信号 : Android_LiuGuiLin

新浪微博：@刘某人程序员