CAKeyframeAnimationを使ってUIBezierPathをアニメーションさせる

ベジェ曲線を引っ張って動かしてみました。

こちらを参考にしました。
https://www.youtube.com/watch?v=pTrW3cZg1YU
Desarrollo iOS 7: Core Animation: CAKeyFrameAnimation y mucho más

viewを追加

class sampleView: UIView,UIGestureRecognizerDelegate {
    var verticalLine:CAShapeLayer?
}

addGestureRecognizerを追加

func addPanGesture() {
    var sgr = UIPanGestureRecognizer(target: self, action: "handleSlide:")
    sgr.delegate = self
    self.addGestureRecognizer(sgr)
}

タッチ位置の変化量を取得

func handleSlide(gr:UIPanGestureRecognizer) {
    var amountX = gr.translationInView(self).x
    var amountY = gr.translationInView(self).y
    self.verticalLine?.path = self.getLinePathWithAmount(amountX: amountX, amountY: amountY)
    
    if gr.state == UIGestureRecognizerState.Ended {
        self.removeGestureRecognizer(gr)
        self.animateLineReturnFrom(positionX: amountX, positionY: amountY)
    }
}

今回はY方向の移動量しか使用していませんが、X方向の移動量も計算しています。

アニメーション定義

func animateLineReturnFrom(#positionX: CGFloat,positionY: CGFloat) {
    var bounce = CAKeyframeAnimation(keyPath: "path")
    bounce.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
    
    var values = [
        self.getLinePathWithAmount(amountX: positionX, amountY: positionY),
        self.getLinePathWithAmount(amountX: -(positionX * 0.7), amountY: -(positionY * 0.7)),
        self.getLinePathWithAmount(amountX: positionX * 0.4, amountY: positionY * 0.4),
        self.getLinePathWithAmount(amountX: -(positionX * 0.3), amountY: -(positionY * 0.3)),
        self.getLinePathWithAmount(amountX: positionX * 0.15, amountY: positionY * 0.15),
        self.getLinePathWithAmount(amountX: 0.0, amountY: 0.0)
    ]
    
    bounce.values = values
    bounce.duration = 0.9
    bounce.removedOnCompletion = false
    bounce.fillMode = kCAFillModeForwards
    bounce.delegate = self
    self.verticalLine?.addAnimation(bounce, forKey: "return")
}

配列valuesにベジェ曲線を追加します。すべての位置を追加するのはとても大変なのですが、CAKeyframeAnimationを使えばkeyframe間を補完してアニメーションしてくれます。

CAKeyframeAnimationとCABasicAnimationとの違いは以下の通り。

CAKeyframeAnimation

• 3つ以上の値を補完するアニメーション

CABasicAnimation

• 2つの値を補完するアニメーション

・参考
http://www.slideshare.net/nakiwo/cakeyframeanimation-25415214

ベジェ曲線を定義

func getLinePathWithAmount(#amountX:CGFloat,amountY:CGFloat) -> CGPathRef {
    let w = UIScreen.mainScreen().bounds.width
    let h = UIScreen.mainScreen().bounds.height
    let centerY = h / 2
    
    var bezierPath = UIBezierPath()
    
    var topLeftPoint = CGPointMake(0, centerY)
    var topMidPoint = CGPointMake(w / 2, centerY + amountY)
    var topRightPoint = CGPointMake(w, centerY)
    
    bezierPath.moveToPoint(topLeftPoint)
    bezierPath.addQuadCurveToPoint(topRightPoint, controlPoint: topMidPoint)
    
    return bezierPath.CGPath
}

CurrentPoint、Control Point,Endpointの関係はAppleのリファレンスを参考にしました。
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBezierPath_class/#//apple_ref/occ/instm/UIBezierPath/addQuadCurveToPoint:controlPoint:

ベジェ曲線を描画する

func createLine() {
    verticalLine = CAShapeLayer(layer: self.layer)
    verticalLine?.lineWidth = 3.0
    verticalLine?.path = getLinePathWithAmount(amountX: 0.0, amountY: 0.0)
    verticalLine?.strokeColor = UIColor.whiteColor().CGColor
    verticalLine?.fillColor = UIColor.clearColor().CGColor
    
    self.layer.addSublayer(verticalLine)
}

CAShapeLayerに描画します。

以上。