iOS动画学习笔记4 Video Tutorial iOS Animation with Swift - Ray Wenderlich

这几天学习了Video Tutorial iOS Animation with Swift 后面的课程，有这样一个下拉刷新的页面很不错，如图：

主要的实现思路就是在tableview上面放置了一个RefreshView,并实现UIScrollViewDelegate，在下拉一定距离后RefreshView上画一个圆，小飞机转圈。主要记录一下这部分的代码：

let ovalShapeLayer: CAShapeLayer = CAShapeLayer()let airplaneLayer: CALayer = CALayer()

主要是一个圆形的ShapeLayer和一个小飞机的Layer，在整个RefreshView的init方法中，画出圆和放置小飞机的图片：

ovalShapeLayer.strokeColor = UIColor.whiteColor().CGColor  //画笔颜色ovalShapeLayer.fillColor = UIColor.clearColor().CGColor   //画出的闭合图形的填充颜色ovalShapeLayer.lineWidth = 4.0   //画笔粗细ovalShapeLayer.lineDashPattern = [2, 3]   //虚线的样式，什么地方划线，什么地方线断了let refreshRadius = frame.size.height / 2 * 0.8//画圆，用UIBezierPath曲线ovalShapeLayer.path = UIBezierPath(ovalInRect: CGRect(x: frame.size.width / 2 - refreshRadius, y: frame.size.height / 2 - refreshRadius, width: 2 * refreshRadius, height: 2 * refreshRadius)).CGPathlayer.addSublayer(ovalShapeLayer)let airplaneImage = UIImage(named: "icon-plane")airplaneLayer.opacity = 1.0airplaneLayer.contents = airplaneImage?.CGImageairplaneLayer.bounds = CGRect(x: 0.0, y: 0.0, width: (airplaneImage?.size.width)!, height: (airplaneImage?.size.height)!)airplaneLayer.position = CGPoint(x: frame.size.width/2 + frame.size.height / 2 * 0.8, y: frame.size.height / 2)layer.addSublayer(airplaneLayer)

特别的是，这里的圆是用贝塞尔曲线画的，用到ovalInRect来画一个圆。现在需要为这两个Layer加上动画效果：

let strokeStartAnimation = CABasicAnimation(keyPath: "strokeStart")strokeStartAnimation.fromValue = -0.5strokeStartAnimation.toValue = 1let strokeEndAnimation = CABasicAnimation(keyPath: "strokeEnd")strokeEndAnimation.fromValue = 0.0strokeEndAnimation.toValue = 1.0let strokeAnimationGroup = CAAnimationGroup()strokeAnimationGroup.duration = 1.5strokeAnimationGroup.repeatDuration = 5.0strokeAnimationGroup.animations = [strokeStartAnimation,strokeEndAnimation]ovalShapeLayer.addAnimation(strokeAnimationGroup, forKey: nil)

圆圈主要是定义一个group动画效果，添加两个basic动画，分别是圆圈起始和结束的位置，形成旋转的效果。

let flightAnimation = CAKeyframeAnimation(keyPath: "position")flightAnimation.path = ovalShapeLayer.pathflightAnimation.calculationMode = kCAAnimationPacedlet airplaneOrientationAnimation = CABasicAnimation(keyPath: "transform.rotation")airplaneOrientationAnimation.fromValue = 0airplaneOrientationAnimation.toValue = 2 * M_PIlet flightAnimationGroup = CAAnimationGroup()flightAnimationGroup.duration = 1.5flightAnimationGroup.repeatDuration = 5.0flightAnimationGroup.animations = [flightAnimation,airplaneOrientationAnimation]airplaneLayer.addAnimation(flightAnimationGroup, forKey: nil)

飞机转圈的动画首先用到CAKeyframeAnimation (关键帧动画），与CABasicAnimation的区别是CABasicAnimation只能从一个数值 (fromValue)变到另一个数值 (toValue)，而CAKeyframeAnimation会使用一个 NSArray保存这些数值，path属性这里规定了layer的运动路径（这里也就是之前画的那个圆）。之后再给飞机加一个旋转的动画，模拟飞机飞行的感觉。需要注意的是，旋转的有一个旋转的坐标系：

参照这个坐标系设置fromValue和toValue，之后为airplaneLayer添加动画，如图：