无奈产品喜欢在APP中加入各种动画,再加上UI小姐姐的奇思妙想,然后就设计出了一大堆动画,前两周才把动画写完,故有了此篇博客来记录一下当时所遇到的坑,效果图镇楼,如下:
注:点击哪个那个旋转到最下面,旋转到最下面的为选中状态。
哇,当时看到这效果,真的是有辞职的冲动,但是转眼一想,哎,反正动画也不太熟悉,那就把这个做出来吧,我们先不加动画,就先实现静态的,如下图:
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/a2f9162e8da0cc5d25bf8efac8042303.jpeg)
后面的圆环是怎么画出来的?
先实现简单的吧,我们可以看到后面有个圆环,我们都知道圆环嘛,大圆套小圆,就可以实现,但是现在的圆环颜色是不一样的,我们若还是用普通的圆来实现的话,就有点儿困难了。既然直接画圆不行,那就用圆弧把这个圆拼出来吧,代码如下:
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/704a43768d0041d6c0d50202d0547515.jpeg)
额……若是RectF不知道是什么玩意儿的话…简单总结RectF、Rect 和Matrix ,还有Paint的使用方法这篇博客里面有讲。同理啦,圆环是大圆套小圆的,那么画小圆的方法和这个类似,只是改变了paint的颜色罢了,这就不贴代码啦,继续解决下一个问题~
圆环上的圆位置是怎么确定的?
主要的代码如下:
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/802108a13a08f0dca99f73eeb38d6df6.png)
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/3e6ac7f90a81fb10b42785a99e67b4b5.png)
没错,就是重写onLayout来确定圆环上圆的位置,每当要旋转时就调用requestLayout()重新确定圆的位置~
圆环上的圆旋转的角度是怎么确定的?
在效果图上可以看到,点击哪个哪个就旋转到最下面,这中间有个问题,就是:我们人眼是可以看到那个在最上面,那个在左,在右,但是,在代码中实现的时候,我们并不知道它们的位置是在哪里,这就有个问题了,我们不知道位置,所以就没办法确定到底要旋转多少度,不知道要旋转的角度,那么这个效果就无法实现了。
后来想了半天,其实我们可以这样想,如下图:
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/863dc554c16d62d23386803f3beb6258.png)
首先我们可以获取的资源如下:当前选中的ImageView,要选中的ImageView,当前ImageView的在数组中的下标和要选中的ImageView在数组中的下标。这些我们是可以知道的,假如,现在选中了下标为1的ImageView,那么我不管是要选中下标为2还是0的都旋转90度,那么这个角度就可以用要选中的ImageView的下标来减去当前选中 X 90就好了,然后顺时针转还是逆时针转就看需求啦~但是还有一个要解决的,就是,当前选中的下标为0,那么左右的下标就是3和1了,这样(3-0) X 90要旋转的角度就不是我们想要的角度了,所以,在0和3的时候要有个判断,分析结束,主要的代码如下:
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/af8483ed223b022f99e5d25b205d06cb.png)
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/5d008aa2cdaea821e202e49fa1081644.png)
ok,这里用了ValueAnimator属性动画,主要就是通过返回的数值,达到旋转的效果~
实现背景圆环同步旋转
我们在效果图上可以看到后面的圆环也是可以同步旋转的哈,其实要实现同步旋转很简单,在RingView加属性动画,然后外部调用就好啦!如下:
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/6282e88eaeef20ea3bf76ac2e6c6bb8c.png)
外部调用:
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/c5739b0ce383b509859504ea926125f0.png)
圆环颜色美化
在效果图上,可以看到当圆环在旋转的时候之前选中的颜色渐渐显示,要选中的渐渐隐藏,这个其实很简单,还是借助ValueAnimator属性动画就可以实现啦,同样的我们在外部调用它,在RingView里面添加如下代码:
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/a1ffae5bbd44558e2391672d75f92acd.jpeg)
由于每段圆弧的颜色透明度不一样,所以要判断下当前的圆环和要选择的圆环的透明度。而它们的条件就是是否可以被2整除!
外部调用如下:
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/8fcd9d9fc9038f1a87afc29806b7821c.png)
圆弧上的ImageView美化
效果图上,可以看到圆弧上的ImageView是带有动画的,其实加动画也不难,主要的就是在点击后,有个缩放动画,主要代码如下:
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/02ef65c0124006fa777f61a2a8987ea0.jpeg)
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/1f0061eb829a746248493502f0c749d9.jpeg)
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/03ed24a1555e16ea77add5f9920ee112.jpeg)
![0?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/477e693a9b3322db43c0893e03475ad3.jpeg)
就不多做解释啦,里面都注释了。
简单总结RectF:
http://blog.csdn.net/struggle323/article/details/50818320
Rect 和Matrix:
http://blog.csdn.net/struggle323/article/details/50818320
Paint的使用方法:
http://blog.csdn.net/struggle323/article/details/50818320
码源:
https://github.com/lilinxiong/RingView