一个Gmail刷新动画的Demo

       Gmail上有一个很有意思的刷新动画，就是一个圆色块，然后不断的通过半圆的翻折来改变颜色。

       然后尝试着自己做了一个，只是一个粗略的实现。地址在：点击打开链接

      

       思路：

       第一想法是用CALayer多做几层，然后做3D的翻转动画。这么做感觉比较麻烦，而且我对3D的动画不是很熟悉。后来想到一个思路就是使用CADisplayLink来做，利用三角函数，把翻转的投影计算出来，然后直接绘制。毕竟3d最终还是要投影到平面上，索性自己来做这个投影的计算工作。

      首先圆的方程是：

        x = r·cosα

        y = r·sinα

       其中r为圆的半径。

       这个圆是处在z = 0这个平面的，假设圆开始绕x轴翻转Ax角度，绕y轴旋转Ay角度，则这个圆在z=0平面的投影方程为：

       x1 = cosAy·cosα·r

       y1 = cosAx·sinα·r

       通过控制α的取值，可以得到一条半圆弧，再通过不断的变化Ax、Ay，可以得到半圆弧在圆平面内的投影，是一条不断变化曲线，通过这个曲线，把圆划分为两个部分，然后把这两个部分填充不同的颜色，可以得到一个颜色变化的过程，在视觉上看起来有点像是翻转过去的感觉。但是还不够逼真。

       仔细观察Gmail的动画（虽然这个动画非常的快，看多了眼晕），会发现它在翻转的过程中有一条明显的折痕，给人很强的立体感。我最初以为就是通过加了一条线来实现的，但是感觉总是不对，最后才想到是通过阴影的变化来实现的明暗对比。正是因为因为两处的明暗不一样，导致视觉上给人一种有折痕的感觉。所以我就在运动的那半圆上添加了一个阴影遮罩，算是比较满意地实现了这个效果。

      几个需要注意的点：

     1.在fill path的时候要使用even-odd法则

     2.在设置阴影遮罩层的透明度时，使用三角函数sinAx、sinAy来确定，这样可以比较好的随着翻转角度来变化阴影的色深。