Search code examples
ioscore-animationcalayercatextlayer

The text jumps when changing the height of a CATextLayer

When I change the height of my CATextLayer, a new text comes in from above (or below) as is depicted in the image below. How can I prevent this? 

@IBAction func Tap(sender: UIButton) {
    counter += 1
    CATransaction.begin()
    CATransaction.setAnimationDuration(8.0)
    txtLay!.frame = frameFromCounter()
    CATransaction.commit()
}

enter image description here

Solution

  • CATextLayer draws itself via drawInContext: method, so any change into the rendered representation (e.g. changing string property) will also modify the contents of the layer. In your case you're resizing the layer causing the backing store resize which changes contents which adds an implicit animation to that property.

    If you don't want the animation to happen you can use the actions dictionary to disable the implicit contents animation:

    txtLay!.actions = ["contents" : NSNull()]

    However, disabling contents animation will cause a jump in that case, so you'll probably better of not changing the bounds of the CATextLayer and just embed it into a superlayer to provide any additional styling/layout you want.