I'm writing a function to define the location and size of a highlighted area on the screen and animate changes to the area as the user clicks through a tutorial. Specifically, the entire screen is dimmed except for this area, which is defined by the corners()
function referenced in the function below. The corners()
function is working properly but the function below is not allowing the sublayer/path to permanently change to the new location after each execution of the function. In other words, each time the function is called, the start of the animation is the original location of the path on the screen.
func prepareForEditing(editing:Bool) {
let animation = CABasicAnimation(keyPath: "path")
animation.duration = 0.3
//the corners() function sets the sublayer, including the sublayer's path
//let lastShape = corners(frame: TutorialModal.tutorialRects[tutorialItem - 2])
let newShape = corners(frame: TutorialModal.tutorialRects[tutorialItem - 1])
animation.fromValue = (dimScreen.layer.sublayers?[0] as! CAShapeLayer).path
animation.toValue = newShape.path
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
animation.autoreverses = false
dimScreen.layer.sublayers?[0].add(animation, forKey: nil)
}
I was originally using lastShape
to make animate the cutout, however, this was resulting in the duration of the animation being ignored (i.e., instant updating of the cutout instead of animating it on the screen). I updated the fromValue characteristic of animation to use the actual current sublayer path (from the dimScreen
view) and now I'm having the problem described above.
I also tried completely removing and replacing dimScreen
's sublayer after the animation, but that clears the entire screen before reapplying the path, which is not what I'm looking for.