How can I animate a gradient using multiple color transitions?
Here's my code so far:
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = twoDrums.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor grayColor] CGColor], (id)[[UIColor blackColor] CGColor], nil];
gradient.locations = [NSArray arrayWithObjects: [NSNumber numberWithFloat:0.00], [NSNumber numberWithFloat:0.70] , nil];
[twoDrums.layer insertSublayer:gradient atIndex:0];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"colors"];
animation.fromValue = [NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor], (id)[[UIColor blackColor] CGColor], nil];
animation.toValue = [NSArray arrayWithObjects:(id)[[UIColor blueColor] CGColor], (id)[[UIColor blackColor] CGColor], nil];
animation.duration = 15.0;
animation.removedOnCompletion = NO;
animation.autoreverses = YES;
animation.fillMode = kCAFi开发者_JS百科llModeForwards;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[gradient addAnimation:animation forKey:@"animateGradient"];
It's a gradient which changes from red/black to blue/black and back again. What I'm trying to do is change from like red/black to yellow/black to blue/black to green/black etc. all in the same animation.
Any help is greatly appreciated. Thanks and Merry Xmas!
I know you're asking for multiple animations, but here's how I ended up doing it for just one gradient color change. Maybe you can build from this.
First I made the gradient layer like so:
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = _view.frame;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor yellowColor] CGColor], (id)[[UIColor orangeColor] CGColor], nil];
UIView *gradientView = [[UIView alloc] initWithFrame:_view.frame];
[gradientView setBackgroundColor:[UIColor clearColor]];
[gradientView.layer insertSublayer:gradient atIndex:0];
[gradientView setHidden:NO];
[_window addSubview:gradientView];
Then I animate the color change:
- (void)animateViewToTransparent:(UIView *)view {
NSArray *sublayers = [view.layer sublayers];
CAGradientLayer *gradientLayer = [sublayers objectAtIndex:0];
CABasicAnimation *gradientAnimation = [CABasicAnimation animationWithKeyPath:@"colors"];
gradientAnimation.toValue = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor], [[UIColor clearColor] CGColor], nil];
gradientAnimation.duration = 0.4f;
URAnimationDelegate *delegate = [[URAnimationDelegate alloc] init];
[gradientAnimation setDelegate:delegate];
[gradientLayer addAnimation:gradientAnimation forKey:@"colors"];
}
So now the animation will work, except the color changes won't stay once the animation has completed. The final step in the URAnimationDelegate class is to set the layer.colors property.
NSArray *sublayers = [_view.layer sublayers];
CAGradientLayer *gradientLayer = [sublayers objectAtIndex:0];
gradientLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor], [[UIColor clearColor] CGColor], nil];
Et voilà !
Ended up getting it to work using CAAnimationGroup. For each animation had to set a beginTime so they didnt start at the same time.
精彩评论