xCode 在渐变渐变时为视图设置动画

Posted 2023-02-23

【中文标题】xCode 在渐变渐变时为视图设置动画

【英文标题】：xCode animate View while slowly changing gradient

【发布时间】：2013-01-23 11:58:38

【问题描述】：

我正在使用块代码创建一个反映一些数据的水平进度条，数据可以是任何东西。它只需要一个最小值、一个最大值和一个允许我设置动画的当前值，即最小值 0，最大值 100，当前值为 50，进度条将填充 50%。我有一个进度条容器，里面有一个视图，在制作动画时视图会被拉伸。

我已经使用块代码让动画部分正常工作，即

[UIView animateWithDuration:3.0
                              delay:0.0f
                            options:UIViewAnimationCurveEaseInOut
                         animations:^(void)
         
             progressView.frame = CGRectMake(progressView.frame.origin.x,progressView.frame.origin.y,iWidth,progressView.frame.size.height);

         
                         completion:^(BOOL finished)
         

         ]; 

我想做的是在制作动画的同时，通过插入子图层来慢慢改变渐变，快速示例

    (This method will be called on a timer, the idea is to slowly change the gradient
    after 0.5 seconds for example)
    CAGradientLayer *testLayer = [BackgroundLayer customGradient:iRedValue :iGreenValue :0];
    testLayer.frame = progressView.bounds;
    [progressView.layer insertSublayer:testLayer atIndex:1];

（背景层只是我拥有的一个自定义类，它允许用户使用 RGB 值创建自定义渐变颜色）。这个想法是，随着 progressView 完成动画，我将继续缓慢地插入子层来改变渐变。这个想法是视图从一种颜色开始，比如绿色，沿着条形动画越远，它就会将颜色变为琥珀色，如果达到最大值，则变为红色。

当我添加子层时，动画只是跳到最后，因为 testLayer 在完成动画后会占用 progressView 的宽度，并添加它。我希望这在动画过程中慢慢发生。

对我将如何做这件事有任何想法吗？

提前致谢！

【问题讨论】：

colors 的属性 CAGradientLayer 是可动画的。也许这消除了在动画期间插入新图层的所有麻烦。

没有意识到你可以为 CAGradientLayer 设置动画。你能给我一个例子，说明我如何使用 CAAnimation 更改 CAGradientLayer 的渐变。

【参考方案1】：

CAGradientLayercolors 的动画小例子

@interface GradientAnimationView : UIView

@end

@implementation GradientAnimationView 
    NSArray *_colorsFirst;
    NSArray *_colorsSecond;
    NSArray *_currentColor;


+ (Class)layerClass 
    return [CAGradientLayer class];


- (id)initWithFrame:(CGRect)frame

    self = [super initWithFrame:frame];
    if (self) 
        CAGradientLayer *layer = (CAGradientLayer *)[self layer];
        _colorsFirst = @[(__bridge id)[[UIColor blueColor] CGColor], (__bridge id)[[UIColor greenColor] CGColor]];
        _colorsSecond = @[(__bridge id)[[UIColor redColor] CGColor], (__bridge id)[[UIColor yellowColor] CGColor]];
        _currentColor = _colorsFirst;
        [layer setColors:_colorsFirst];
    
    return self;


- (void)animateColors 
    if (_currentColor == _colorsSecond) 
        _currentColor = _colorsFirst;
     else 
        _currentColor = _colorsSecond;
    

    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"colors"];
    anim.fromValue = [[self layer] valueForKey:@"colors"];
    anim.toValue = _currentColor;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.duration = 0.4;
    anim.delegate = self;

    [self.layer addAnimation:anim forKey:@"colors"];


- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
    [self animateColors];


- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag 
    CAGradientLayer *layer = (CAGradientLayer *)[self layer];
    [layer setColors:_currentColor];


@end

【讨论】：

为您的帮助干杯！！代码正是我设置进度条所需要的！