current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 14 down vote favorite
12

On UIView you can change the backgroundColour animated. And on a UISlideView you can change the value animated.

Can you add a custom property to your own UIView subclass so that it can be animated?

If I have a CGPath within my UIView then I can animate the drawing of it by changing the percentage drawn of the path.

Can I encapsulate that animation into the subclass.

i.e. I have a UIView with a CGPath that creates a circle.

If the circle is not there it represents 0%. If the circle is full it represents 100%. I can draw any value by changing the percentage drawn of the path. I can also animate the change (within the UIView subclass) by animating the percentage of the CGPath and redrawing the path.

Can I set some property (i.e. percentage) on the UIView so that I can stick the change into a UIView animateWithDuration block and it animate the change of the percentage of the path?

I hope I have explained what I would like to do well.

Essentially, all I want to do is something like...

[UIView animateWithDuration:1.0
 animations:^{
     myCircleView.percentage = 0.7;
 }
 completion:nil];

and the circle path animate to the given percentage.

share|improve this question

3 Answers 3

up vote 16 down vote accepted

If you extend CALayer and implement your custom 

- (void) drawInContext:(CGContextRef) context

You can make an animatable property by overriding needsDisplayForKey (in your custom CALayer class) like this:

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

Of course, you also need to have a @property called percentage. From now on you can animate the percentage property using core animation. I did not check whether it works using the [UIView animateWithDuration...] call as well. It might work. But this worked for me:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"percentage"];
animation.duration = 1.0;
animation.fromValue = [NSNumber numberWithDouble:0];
animation.toValue = [NSNumber numberWithDouble:100];

[myCustomLayer addAnimation:animation forKey:@"animatePercentage"];

Oh and to use yourCustomLayer with myCircleView, do this:

[myCircleView.layer addSublayer:myCustomLayer];
share|improve this answer
    
Thanks for the reply. I will take a look tonight. – Fogmeister Jan 7 '13 at 10:05
    
@Fogmeister Hi, am a bit late to the party. Was hoping to ask: how would we implement - (void) drawInContext:(CGContextRef) context? Is this where a newly customized property would be drawn? Thanks in advance. – Unheilig Mar 27 '14 at 0:07
up vote 0 down vote

you will have to implement the percentage part yourself. you can override layer drawing code to draw your cgpath accroding to the set percentage value. checkout the core animation programming guide and animation types and timing guide

share|improve this answer
    
Thanks for the reply. I will take a look tonight. – Fogmeister Jan 7 '13 at 10:06
    
why the downvote? that too after such a long time? – lukya Dec 18 '13 at 10:37
    
No idea. Nothing to do with me. – Fogmeister Dec 22 '13 at 11:18
up vote 0 down vote

For the ones who needs more details on that like I did:

there is a cool example from Apple covering this question.

E.g. thanks to it I found that you don't actually need to add your custom layer as sublayer (as @Tom van Zummeren suggests). Instead it's enough to add a class method to your View class:

+ (Class)layerClass
{
    return [CustomLayer class];
}

Hope it helps somebody.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.