最近工作一直挺忙，偶有闲暇时都在翻看《iOS Animations by Tutorials》，受益良多，尤其是让我对Core Animation有了更深入的理解。所以本来今天是打算总结一下这些日子学习Core Animation的心得的，但是突然发现更早之前一时兴起写的卡片动画还没完成，强迫症不能忍啊，果断花了一个下午大致搞定了，先上图：
模仿
这个效果是仿照【每天】的首页做的，当时刚下了【每天】的时候觉得整个APP非常文艺，我很喜欢，就想仿写一个出来自娱自乐的。结果突然就忙了起来，“山寨”计划胎死腹中，到今天也只来得及写了一个卡片动画。代码在这里,大家有兴趣的话可以看看。
大致介绍一下思路吧，这个动画主要是分为卡片的飞上飞下和日期小圈圈中的数字滚动两部分。其实【每天】的日期并不是这样的滚动，而应该是两个Label的飞上飞下，我这个小圈圈是参考了之前看到的叶孤城的一篇博客做的，个位数跟十位数分别放一个ScrollView，然后放上显示0-9的10个Label进行滚动，感觉也挺不错的。滚动到某个具体数字的函数如下:
func slideToNum(num: Int) {
if num < 0 || num > 9 {
return
}
switch type {
case .TenDigit:
UIView.animateWithDuration(0.85) {
self.contentOffset.y = self.height * CGFloat(num)
}
case .SingleDigit:
UIView.animateWithDuration(1) {
self.contentOffset.y = self.height * CGFloat(num)
}
}
}
然后在封装好的CircleView(显示日期的圆圈) 中有一个date属性，在属性监听里调用slideToNum,像这样：
var date: Int! {
didSet {
assert(date < 32 && date > 0, "date应在0~31之间")
tenDigitSlider.slideToNum(date/10)
singleDigitSlider.slideToNum(date%10)
}
}
这样每当date的值改变的时候就会分别调用个位数和十位数的sliderToNum方法，滚动到对应的数字，这里为了处理边界条件我写了一个assert（断言）,如果date不在1-31之间的话，程序就会触发断言而中断。
再说到卡片动画，这个稍微复杂一点，主要是手势的处理，要分多种情况（第一张时，最后一张时，向上，向下，边界条件处理），由于我是用的
pan手势（拖动），而不是swip手势(快速滑动)，是没有direction（方向）属性的，所以方向只能自己判断，譬如这样:
//滑动过程中取滑动位移的y值，大于0则表示向下滑动
case .Changed:
let touchPointY = sender.translationInView(self).y
if touchPointY > 0 {
还有这样：
//滑动停止时取停止点的y值与起始点y值比较，若停止点y大于起始点y则为向下滑动
case .Ended:
let endPointY = sender.locationInView(self).y
let border = card.frame.height/4
if startPointY < endPointY && index > 0{
具体的逻辑可以看代码，我还是稍微写了一点注释的- -。哦对了，卡片的3D效果是用等比缩放+阴影做的，整个小项目我都没有用Layer层的东西，动画都是用View层的动画接口写的，所以说也不要小看了View层的动画接口，《iOS Animations by Tutorials》里在介绍Layer层的动画之前有这么一句话：
choose view animations any time you can to do the job
所以啊，长者告诫我们，不要为了显示自己的姿势水平就滥用layer animations，能用view animations解决的就安心用好了。由于时间仓促，代码还有许多可以优化的地方，有时间的话我会接着写。
网友评论