Animate Line Drawn In Swift

Hello,


I've looked about for an easy way to do this but haven't come across anything yet. I'm new to Swift and just starting to look at animating things. In my application I've got a straight line drawn from point A to point B. That works well enough, but I'd like to animate the line drawing itself now. Any help or pointers in the right direction would be appreciated. Thanks.

Answered by TommieC in 44570022

The net is awash with examples of this. Although most are in objc, it is very easy to convert, as the underlying APIs will respond to code completion. A quick search found the solution below from this source (stackoverflow.com/questions/5526216/animate-the-drawing-of-lines-in-uiview). Converted at this location (objectivec2swift.net/#/converter). You'll need to add the headers and paste those references into your browser. Please let me know if this answers your question by clicking the link below otherwise feel free to revise your original post for clarification.


var path: UIBezierPath = UIBezierPath.bezierPath()
path.moveToPoint(CGPointMake(50.0, 0.0))
path.addLineToPoint(CGPointMake(120.0, 600.0))

//Create a CAShape Layer
var pathLayer: CAShapeLayer = CAShapeLayer.layer()
pathLayer.frame = self.view.bounds
pathLayer.path = path.CGPath
pathLayer.strokeColor = UIColor.redColor().CGColor()
pathLayer.fillColor = nil
pathLayer.lineWidth = 2.0
pathLayer.lineJoin = kCALineJoinBevel

//Add the layer to your view's layer
self.view.layer.addSublayer(pathLayer)

//This is basic animation, quite a few other methods exist to handle animation see the reference site answers
var pathAnimation: CABasicAnimation = CABasicAnimation.animationWithKeyPath("strokeEnd")
pathAnimation.duration = 2.0
pathAnimation.fromValue = NSNumber.numberWithFloat(0.0)
pathAnimation.toValue = NSNumber.numberWithFloat(1.0)
//Animation will happen right away
pathLayer.addAnimation(pathAnimation, forKey: "strokeEnd")

Check out the Core Animation framework. It's really powerful and enables you to create almost any kind of animation you can think of.

Accepted Answer

The net is awash with examples of this. Although most are in objc, it is very easy to convert, as the underlying APIs will respond to code completion. A quick search found the solution below from this source (stackoverflow.com/questions/5526216/animate-the-drawing-of-lines-in-uiview). Converted at this location (objectivec2swift.net/#/converter). You'll need to add the headers and paste those references into your browser. Please let me know if this answers your question by clicking the link below otherwise feel free to revise your original post for clarification.


var path: UIBezierPath = UIBezierPath.bezierPath()
path.moveToPoint(CGPointMake(50.0, 0.0))
path.addLineToPoint(CGPointMake(120.0, 600.0))

//Create a CAShape Layer
var pathLayer: CAShapeLayer = CAShapeLayer.layer()
pathLayer.frame = self.view.bounds
pathLayer.path = path.CGPath
pathLayer.strokeColor = UIColor.redColor().CGColor()
pathLayer.fillColor = nil
pathLayer.lineWidth = 2.0
pathLayer.lineJoin = kCALineJoinBevel

//Add the layer to your view's layer
self.view.layer.addSublayer(pathLayer)

//This is basic animation, quite a few other methods exist to handle animation see the reference site answers
var pathAnimation: CABasicAnimation = CABasicAnimation.animationWithKeyPath("strokeEnd")
pathAnimation.duration = 2.0
pathAnimation.fromValue = NSNumber.numberWithFloat(0.0)
pathAnimation.toValue = NSNumber.numberWithFloat(1.0)
//Animation will happen right away
pathLayer.addAnimation(pathAnimation, forKey: "strokeEnd")

Thanks, that did point me in the right direction. The conversion tool doesn't convert it perfectly, but with a few adjustments I got it to work. Adjustments below if anyone is looking for help on a similar problem.


        var path: UIBezierPath = UIBezierPath()
        path.moveToPoint(CGPointMake(fromPoint.x, fromPoint.y))
        path.addLineToPoint(CGPointMake(toPoint.x, toPoint.y))

        // Create a CAShape Layer
        var pathLayer: CAShapeLayer = CAShapeLayer()
        pathLayer.frame = self.view.bounds
        pathLayer.path = path.CGPath
        pathLayer.strokeColor = UIColor.redColor().CGColor
        pathLayer.fillColor = nil
        pathLayer.lineWidth = 2.0
        pathLayer.lineJoin = kCALineJoinBevel
   
        // Add layer to views layer
        self.view.layer.addSublayer(pathLayer)
   
        // Basic Animation
        var pathAnimation: CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        pathAnimation.duration = 2.0
        pathAnimation.fromValue = NSNumber(float: 0.0)
        pathAnimation.toValue = NSNumber(float:1.0)
   
        // Add Animation
        pathLayer.addAnimation(pathAnimation, forKey: "strokeEnd")

how can this be adapted to be used in a SpriteKit game ?

Animate Line Drawn In Swift
 
 
Q