Search code examples
iosswiftanimationcore-animation

Animation with Swift

I want to hav this kind of animation in my app, a case where an arrow shape such that when clicked it transforms into a mark.

This is what i have at present using the code below

present work

func handleTransform(){

    let arrowPath = UIBezierPath()
    arrowPath.move(to: CGPoint(x: 50, y: 0))
    arrowPath.addLine(to: CGPoint(x: 25, y: 75))
    arrowPath.addLine(to: CGPoint(x: 25, y: 75))
    arrowPath.addLine(to: CGPoint(x: 25, y: 45))
    arrowPath.addLine(to: CGPoint(x: 25, y: 35))
    arrowPath.close()

    let progressLines = CAShapeLayer()
    progressLines.path = arrowPath.cgPath
    progressLines.strokeColor = UIColor.black.cgColor
    progressLines.fillColor = UIColor.clear.cgColor
    progressLines.lineWidth = 10.0
    progressLines.lineCap = kCALineCapRound

    self.view.layer.addSublayer(progressLines)

    let animateStrokeEnd = CABasicAnimation(keyPath: "strokeEnd")
    animateStrokeEnd.duration = 3.0
    animateStrokeEnd.fromValue = 0.0
    animateStrokeEnd.toValue = 1.0

    progressLines.add(animateStrokeEnd, forKey: "animate stroke end animation")

}

the flow is illustrated in the images bellow

On click of this image arrow icon

It transform to this image Mark icon

Solution

  • I have been able t solve, i did a switch image with animation