Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Draw Line And Circle with Animation

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 338
    Comment on it

    CoreAnimation has provided various animation APIs that can be used to accomplish the animation needs. Using UIBeizierPath and CoreAnimation APIs here I’m drawing a line and a circle using CAShapeLayer.

    //Below is the function to draw a line between two points(say startPoint and endPoint)
    func drawLineForMonth(from startPoint:CGPoint, to endPoint:CGPoint) -> Void {
            
            let pathAnimation: CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
            let animDuration = 2.0 // you can change animation duration here.
            pathAnimation.duration = animDuration
            pathAnimation.fromValue = 0.0
            pathAnimation.toValue = 1.0
            let shapeLayer = CAShapeLayer()
            shapeLayer.lineWidth = 20
           	pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
            let path = UIBezierPath()
            path.move(to: startPoint)
            path.addLine(to: endPoint)
            shapeLayer.path = path.cgPath
            shapeLayer.strokeColor = UIColor.red.cgColor
            self.layer.addSublayer(shapeLayer)
            shapeLayer.add(pathAnimation, forKey: "strokeEnd")
        }

     

    //Here is a function to draw a circle having centre point 100,100
    func drawCircle() -> Void {
            
            let circlePath = UIBezierPath(arcCenter: CGPoint(x: 100, y: 100), radius: CGFloat(100), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
            
            let shapeLayer = CAShapeLayer()
            shapeLayer.path = circlePath.cgPath
            shapeLayer.fillColor = UIColor.clear.cgColor
            shapeLayer.strokeColor = UIColor.red.cgColor
            shapeLayer.lineWidth = 3.0
            self.layer.addSublayer(shapeLayer)
            let pathAnimation: CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
            let animDuration = 1.0
            pathAnimation.duration = animDuration
            pathAnimation.fromValue = 0.0
            pathAnimation.toValue = 1.0
            pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
            shapeLayer.add(pathAnimation, forKey: "strokeEnd")
            
        }
    

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: