CABasicAnimation on Swift Playground

Question

I lost my mind trying to get a live view of the animation on the Swift Playground, as in the WWDC "Swift Playgrounds" video. I tried to do UIView.animateWithDuration with no luck, so now I am trying to do CABasicaAnimation because it looks like what was used in the demo. I got rid of many confusing errors and imported the correct frameworks, but I still could not get my little circle to do anything other than sit in the center of my XCPShowView . Here is my code:

  import Foundation import XCPlayground import UIKit import QuartzCore //Circle Button class timerButtonGraphics: UIView { override func drawRect(rect: CGRect) { let colorGreen = UIColor(red: 0.310, green: 0.725, blue: 0.624, alpha: 1.000) let colorRed = UIColor(red: 241/255, green: 93/255, blue: 79/255, alpha: 100) var bounds = self.bounds var center = CGPoint() center.x = bounds.origin.x + bounds.size.width / 2 center.y = bounds.origin.y + bounds.size.height / 2 var radius = 61 var path:UIBezierPath = UIBezierPath() path.addArcWithCenter(center, radius: CGFloat(radius), startAngle: CGFloat(0.0), endAngle: CGFloat(Float(M_PI) * 2.0), clockwise: true) path.strokeWithBlendMode(kCGBlendModeNormal, alpha: 100) path.lineWidth = 5 colorGreen.setStroke() path.stroke() //Define the animation here var anim = CABasicAnimation() anim.keyPath = "scale.x" anim.fromValue = 1 anim.toValue = 100 anim.delegate = self self.layer.addAnimation(anim, forKey: nil) } } var test = timerButtonGraphics(frame: CGRect(x: 0, y: 0, width: 400, height: 400)) test.setTranslatesAutoresizingMaskIntoConstraints(true) XCPShowView("Circle Animation", test)` 

Answer 1

The first part of the solution is to enable the Run option in the full simulator . See this answer step by step.

The second part of the solution is to contain an animated container view, for example:

 let container = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400)) XCPShowView("Circle Animation", container) let test = timerButtonGraphics(frame: CGRect(x: 198, y: 0, width: 4, height: 400)) container.addSubview(test) 

The third part of the solution is to fix your animation. KeyPath should be transform.scale.x instead of scale.x , and you need to add duration , for example:

 anim.keyPath = "transform.scale.x" anim.duration = 5 

Then you can watch the animation on the playground.