开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜