Animating a custom property of CALayer subclass

Question

I have a CALayer subclass, MyLayer, that has a NSInteger property called myInt. I'd really like to animate this property via CABasicAnimation, but it seems CABasicAnimation only works on so-called "animatable" properties (bounds, position, etc). Is there something I can override to make my custom myInt property animatable?

Wellbeloved

Try making that property a float? – Scarbrough

I found objc.io/issues/12-animations/animating-custom-layer-properties and airsource.co.uk/blog/2017/01/31/intro-calayer-animations to be good explanations – Blanks

Answer 1

Yes, it's possible (only in the latest Core Animation releases though, I believe, i.e. iPhone 3.0+ and OS X 10.6+).

1. Make your property dynamic so that CA implements the accessors for you:

   @dynamic myInt;
   

2. Tell the layer that changes of the property require redrawing:

   + (BOOL)needsDisplayForKey:(NSString*)key {
       if ([key isEqualToString:@"myInt"]) {
           return YES;
       } else {
           return [super needsDisplayForKey:key];
       }
   }
   

3. Use the value of myInt in your drawInContext: method. Now, when you animate myInt, Core Animation will interpolate the values for each step of the animation and repeatedly ask the layer to draw itself.

4. If you also want to enable implicit animations for this property, also override actionForKey:.

Chianti

Thank you! This has me so close to a solution I can taste it! -drawInContext: is called several times with myInt interpolated correctly. Unfortunately CGContextDrawImage() no longer functions while the animation is running. Rects I fill or paths I stroke are all drawn correctly, but the image normally drawn by CGContextDrawImage() just disappears until the animation is over as if CGContextDrawImage() is never called. I'm baffled. Any thoughts? – Wellbeloved

No idea, sorry. I hope you find a solution. – Chianti

That's ok. You're reply is still one of the best written answers I've seen on Stack Overflow :) – Wellbeloved

Dear future googlers: CGContextDrawImage() wasn't drawing because I was storing its CGImageRef in an ivar. When CoreAnimation spawns off its multiple presentation layers (or whatever) it doesn't copy ivars, only KVC values. Storing my image in a UIImage and then [self setValue:myUIImage forKey:@"image"] for later retrieval in -drawInContext: did the trick. – Wellbeloved

@dynamic myInt didn't work for me; I had to @synthesize myInt to get this to work. – Unstopped

I got a problem that the layer did call drawInContext, but the value of the property is not changed according to my toValue and fromValue. – Portsmouth

Is it possible to animate custom properties that are NOT on CALayer subclasses? For example, I have a custom property on a UIView subclass I want to animate. Possible or "custom CALayer subclass properties only"? – Fernandafernande

@Wellbeloved the right solution in that case would be to copy those properties in initWithLayer: – Eigenvalue

Save me so much time... Thanks for you explanation. – Tetrameter

@OleBegemann here's a challenge ... https://mcmap.net/q/470638/-custom-animatable-property-returns-nsnull/294884 (and man, you need the 50 pts right! :) ) – Outspoken

Answer 2

There is a way to retain the iVars of your custom CALayer subclasses. You override initWithLayer:, the method which is called to create a copy of custom layers. For example, if you have a layer in which you want to create a custom property called 'angle', you might use the following code:

@implementation AngledLayer
@synthesize angle = _angle

// Tell Core Animation that this key should be animated
+ (BOOL) needsDisplayForKey:(NSString *)key
{
    if ([key isEqualToString:@"angle"]) return YES;
    return [super needsDisplayForKey:key];
}


// Make sure that, when the layer is copied, so is the custom ivar
- (id) initWithLayer:(id)layer
{
    self = [super initWithLayer:layer];
    if (self) {
        AngledLayer *angledVersion = (AngledLayer *)layer;
        self.angle = angledVersion.angle;
    }
    return self;
}

And bob's your uncle! Note that you can't use this object with implicit animation, for which you'd also have to overide the actionForKey: method.

Skindeep

This doesn't work for me. Inside initWithLayer, the layer always has the starting value of the property, even while animating. The setter is called somewhere else. – Fernandafernande

I'm seeing the same as yourfriendzak. While the combination of initWithLayer and needsDisplayForkey allows the animation to happen, as soon as it ends, the layer goes back to its starting value. I'm still searching for a solution. – Brynnbrynna

Okay, it looks like I didn't realize that @dynamic causes the setter to automatically animate. But if for some reason you needed to do more to it, you probably need to create your own setter that has it's own animation block so that you can change your layer property before the animation takes place. See link – Brynnbrynna

Answer 3

Swift version

// Custom property
@NSManaged public var progress: CGFloat
    
open override class func needsDisplay(forKey key: String) -> Bool {
    if key == "progress" {
        return true
    }
    return super.needsDisplay(forKey: key)
}

Guesswarp