iOS时钟翻转动画

我正在参与「启航计划」

最近项目有个时间倒计时的功用，研讨了一下。有好几种方法完成，笔者选取较简略一种，研讨一下。

效果图

思路

以一次完好动画为例，分过程解析：

第一步：

新建3个UILable，分别是正在显现(currentLabel)、下一个显现(nextLabel)、做动画的(animationLabel)。

第二步：

每次动画前给nextLabel设置默许的X轴起始视点翻转，为了能够只显现上半部分，下半部分被躲藏（zPosition不改动的情况下），如下图，红色nextLabel，绿色currentLabel，灰色animationLabel。

代码：

// 设置默许的X轴起始视点翻转，为了能够只显现上半部分，下半部分被躲藏（zPosition不改动的情况下）
func setupStartRotate() -> CATransform3D {
    var transform = CATransform3DIdentity
    transform.m34 = CGFLOAT_MIN
    transform = CATransform3DRotate(transform, .pi*kStartRotate, -1, 0, 0)
    return transform
}

第三步：

运用CADisplayLink做动画，这儿设置改写帧率为60，动画执行时间0.5s，即每次改写动画执行2/60进展。

随后animationLabel以X轴进行翻转，动画进展超越一半，咱们会发现如下问题：

这个是倒计时 2 ~ 1 的动画进展超越一半的显现。咱们换个视点看看：

可知在当前情况下，灰色的标签应该显现的是 1 的下部分，而不是 2 的反面的上部分。有点拗口，简略来说便是View沿X轴翻转大于90度后，看到的实践是上下、前后倒置的View，所以才会如此的不和谐。

所以为了动画和谐流通，咱们需求动画在临界点翻转90度，与屏幕笔直的时候，恢复下，即需求将动画的animationLabel同时翻转Y和Z轴，并切换文字。即：

if animateProgress >= 0.5 {
   t = CATransform3DRotate(t, .pi, 0, 0, 1);
   t = CATransform3DRotate(t, .pi, 0, 1, 0);
   animationLabel.text = nextLabel.text
 }else{
   animationLabel.text = currentLabel.text
 }

到这儿一个完好的动画就完毕了，后面定时重复上述动画就可以了。

RCFoldAnimation