How to animate the end and the control points SWIFT - swift

Question

I have a CAShapeLayer im my view which has the to CGPath casted path of an instance of an Bezierpath. I now want to animate the end and the two control points so e.g. the end of that line is moving(not stopping). How to do that? I looked at CABasicAninmations but did not get how the access the end point. The same with animate with duration. How to make this happen for an endlessness time.

Answer 1

You can use a CADisplayLink (it's like a NSTimer, except optimally timed for animation frame updates) and update the path of the CAShapeLayer.
For example:
var displayLink: CADisplayLink?
var startTime: CFAbsoluteTime?
let duration = 2.0
var shapeLayer: CAShapeLayer?
override func viewDidLoad() {
super.viewDidLoad()
shapeLayer = CAShapeLayer()
shapeLayer?.fillColor = UIColor.clearColor().CGColor
shapeLayer?.strokeColor = UIColor.blueColor().CGColor
shapeLayer?.lineWidth = 10
shapeLayer?.frame = view.bounds
view.layer.addSublayer(shapeLayer!)
startTime = CFAbsoluteTimeGetCurrent()
displayLink = CADisplayLink(target: self, selector: "handleDisplayLink:")
displayLink?.addToRunLoop(NSRunLoop.mainRunLoop(), forMode: NSRunLoopCommonModes)
}
func handleDisplayLink(displayLink: CADisplayLink) {
let elapsed = CFAbsoluteTimeGetCurrent() - startTime!
let percent = (elapsed % duration) / duration
let path = UIBezierPath()
let startPoint = CGPoint(x: 0, y: view.bounds.size.height / 2.0)
let controlPoint = CGPoint(x: view.bounds.size.width / 20, y: view.bounds.size.height * CGFloat(0.5 + sin(percent * M_PI * 2.0) / 2.0))
let endPoint = CGPoint(x: view.bounds.size.width - 1, y: view.bounds.size.height / 2.0)
path.moveToPoint(startPoint)
path.addQuadCurveToPoint(endPoint, controlPoint: controlPoint)
shapeLayer?.path = path.CGPath
}
That yields:

Answer 2

Here are some possibilities.
Configure the animation in advance, that is, by generating a series of drawings, just like the cells of a cartoon, and use simple UIImageView animation of those images.
Use CAShapeLayer and animate between two path values. Unfortunately this doesn't give you total control over the intermediate frames, but you could use keyframe animation to supply intermediate frames and thus provide additional control.
Animate the actual points of the drawing. This is the hardest to configure, but it is true animation and it gives you total control over the animation. That's what I'm doing here: I did it by creating a custom animatable property - in this case, a property representing the x-position of the bottom point of the triangle. You'd have to do that for all the points you want to animate.