views:

52

answers:

0

Hi, I have taken the popular colorizeImage procedure and modified it to display incremental section fills for an image using a mask.

Now I am trying to give a look of the image filling up gradually, I have tried to use Basic Animation to do this but I get a fade between the two images, and if I try and add it to an animationgroup and add the below basic animation multiple times, it shows the results of of the animation rather than animating each section separately.

Any tips: The code is below

(Basic Animation):

 CABasicAnimation *theAnimation;
 theAnimation=[CABasicAnimation animationWithKeyPath:@"contents"];
 theAnimation.duration=1;
 theAnimation.fromValue=(id)[self colorizeImage:theImage components:fromColor theCount:fromCount].CGImage;
 theAnimation.toValue=(id)[self colorizeImage:theImage components:toColor theCount:toCount].CGImage;
 [self.layer addAnimation:theAnimation forKey:@"animateContents"];
  • theImage is an UImage
  • components is the color components for a gradient fill
  • theCount is used to do a stepwise increment of the clipped images height to show the image filling.