CODEWITHSUNDEEP
iosanimationlineuibezierpath
rishu1992
rishu1992

Reputation: 1434

Animate bezier straight lines

I want how to animate a bezier straight line like see-saw. Can somebody please suggest. Reference link for animation how does it should look (https://www.youtube.com/watch?v=bjCx128BZK8).

Upvotes: 0

Views: 1209

Answers (1)

Rob
Rob

Reputation: 437381

You don't say how you rendered this UIBezierPath, but if you for example added it as a CAShapeLayer you can just apply a CAKeyframeAnimation to it:

// create simple path

let path = UIBezierPath()
path.moveToPoint(CGPoint(x: 50, y: view.bounds.size.height / 2))
path.addLineToPoint(CGPoint(x: view.bounds.size.width - 50, y: view.bounds.size.height / 2))

// create `CAShapeLayer` from that path

let layer = CAShapeLayer()
layer.path = path.CGPath
layer.lineWidth = 10
layer.strokeColor = UIColor.blueColor().CGColor
layer.fillColor = UIColor.clearColor().CGColor

view.layer.addSublayer(layer)

// animate it

let animation = CAKeyframeAnimation(keyPath: "transform")
var values = [NSValue]()
for var x: CGFloat = 0.0; x < CGFloat(M_PI * 4); x += CGFloat(M_PI * 4 / 100.0) {
    var transform = CATransform3DMakeTranslation(view.frame.size.width/2, view.frame.size.height/2, 0.0)
    transform = CATransform3DRotate(transform, sin(x) / 3.0, 0.0, 0.0, 1.0)
    transform = CATransform3DTranslate(transform, -view.frame.size.width/2, -view.frame.size.height/2, 0.0)

    values.append(NSValue(CATransform3D: transform))
}
animation.duration = 2
animation.values = values

layer.addAnimation(animation, forKey: "transform")

That yields:

enter image description here

Or you could add the CAShapeLayer to a view and then use the block-based UIView animation to rotate the view. The basic idea would be the same.

If you want to do something more sophisticated, you can use CADisplayLink, either updating the path for the CAShapeLayer (as outlined here) or updating the properties used by UIView subclass and then call setNeedsDisplay.

Upvotes: 2

Related Questions