How to transform a circle into a line in swift? - swift

Question

So i have a circe with a certain pattern. I want to make transform this circle into a line. Any ideas how i could accomplish this?
I did have a look at making a UIBezierPath over the circle for then to transform this into a line without any help. I've also seen a link doing this in opencv (fast Cartesian to Polar to Cartesian in Python) but do prefer to do this in native swift.

Answer 1

If you don't care about the nature of the transition, the easiest way is to do CABasicAnimation, animating the path of a CAShapeLayer from one path to another. And to achieve a patterned path with CAShapeLayer is actually to have two overlapping CAShapeLayer objects, one with a dash pattern on top of one without.
let fromPath = UIBezierPath(arcCenter: view.center, radius: 100, startAngle: 0, endAngle: CGFloat(M_PI) * 2.0, clockwise: true)
let toPath = UIBezierPath()
toPath.moveToPoint(CGPoint(x: view.frame.size.width / 2.0 - CGFloat(M_PI) * 100.0, y:view.center.y))
toPath.addLineToPoint(CGPoint(x: view.frame.size.width / 2.0 + CGFloat(M_PI) * 100.0, y: view.center.y))
let shapeLayer = CAShapeLayer()
shapeLayer.path = fromPath.CGPath
shapeLayer.lineWidth = 5
shapeLayer.strokeColor = UIColor.redColor().CGColor
shapeLayer.fillColor = UIColor.clearColor().CGColor
let shapeLayer2 = CAShapeLayer()
shapeLayer2.path = fromPath.CGPath
shapeLayer2.lineWidth = 5
shapeLayer2.strokeColor = UIColor.blackColor().CGColor
shapeLayer2.fillColor = UIColor.clearColor().CGColor
shapeLayer2.lineDashPattern = [100,50]
view.layer.addSublayer(shapeLayer)
view.layer.addSublayer(shapeLayer2)
And
shapeLayer.path = toPath.CGPath
shapeLayer2.path = toPath.CGPath
CATransaction.begin()
CATransaction.setAnimationDuration(5)
let animation = CABasicAnimation(keyPath: "path")
animation.fromValue = fromPath.CGPath
animation.toValue = toPath.CGPath
shapeLayer.addAnimation(animation, forKey: nil)
let animation2 = CABasicAnimation(keyPath: "path")
animation2.fromValue = fromPath.CGPath
animation2.toValue = toPath.CGPath
shapeLayer2.addAnimation(animation, forKey: nil)
CATransaction.commit()
Yielding:
If you want more control over the nature of the transition, then you have to resort to more manual techniques, e.g. a CADisplayLink in which you manually adjust the path. But that's more complicated.

Answer 2

try this code, The animation is not perfect, but you will be able to convert an image to a line this way. I have to say that Rob's solution above is far more superior and if I were give a choice, i would do it his way.
The below code is very self-explanatory, but if in case of any doubt, feel free to ask.
To make the animation happen, tap the yellow button.
class ViewController: UIViewController{
var imageView : UIImageView = {
let image = UIImageView()
image.translatesAutoresizingMaskIntoConstraints = false
image.layer.cornerRadius = 120
image.backgroundColor = UIColor.clearColor()
image.layer.borderWidth = 3.0
image.layer.borderColor = UIColor.blackColor().CGColor
return image
}()
var animatorButton : UIButton = {
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.tintColor = UIColor.blueColor()
button.layer.borderWidth = 3.0
button.layer.borderColor = UIColor.blackColor().CGColor
button.backgroundColor = UIColor.yellowColor()
return button
}()
var constraintHeight = [NSLayoutConstraint]()
override func viewDidLoad() {
view.addSubview(imageView)
view.addSubview(animatorButton)
view.addConstraint(view.centerXAnchor.constraintEqualToAnchor(imageView.centerXAnchor))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:[imageView(240)]", options: NSLayoutFormatOptions(), metrics: nil, views: ["imageView": imageView]))
self.constraintHeight = NSLayoutConstraint.constraintsWithVisualFormat("V:|-100-[imageView(240)]", options: NSLayoutFormatOptions(), metrics: nil, views: ["imageView": imageView])
view.addConstraints(constraintHeight)
view.addConstraint(animatorButton.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-450-[Button(40)]", options: NSLayoutFormatOptions(), metrics: nil, views: ["Button": animatorButton]))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[Button]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["Button": animatorButton]))
animatorButton.addTarget(self, action: #selector(ViewController.animateImageToLine), forControlEvents: .TouchUpInside)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func animateImageToLine() {
view.removeConstraints(constraintHeight)
constraintHeight = NSLayoutConstraint.constraintsWithVisualFormat("V:|-100-[imageView(3)]", options: NSLayoutFormatOptions(), metrics: nil, views: ["imageView": imageView])
view.addConstraints(constraintHeight)
UIView.animateWithDuration(0.3, animations: {
self.imageView.layer.cornerRadius = 0
self.view.layoutIfNeeded()
}, completion: { success in
self.imageView.backgroundColor = UIColor.blackColor()
self.imageView.layer.borderWidth = 3.0
})
}
}