ios - 在 xCode 中创建类似于太阳天气应用程序的动画渐变背景

Question

尽管我以前曾问过这个问题，但我想再次与您联系，以澄清我想在您的帮助下完成什么。我想知道如何在 xCode 中创建一个 iOS 应用程序的背景，类似于 Solar 天气应用程序的背景（提供屏幕截图），它会随着时间的推移（在一个周期内）略有变化。如您所见，渐变非常平滑，显然包含两个以上的要点。任何有关示例或代码片段的帮助将不胜感激。再次感谢，本。

Answer 1

我需要的是：

1. 将 a 添加CAGradientLayer到您的视图控制器（或自定义视图），例如：

   @property (nonatomic, retain) CAGradientLayer *gradient;
   

2. 在您的视图控制器中，在 viewDidLoad 中，创建渐变层并将其添加到您的视图中：

   self.gradient = [CAGradientLayer layer];
   gradient.frame = self.view.bounds;
   gradient.colors = [NSArray arrayWithObjects:
                  (id)topColor.CGColor,
                  (id)bottomColor.CGColor,
                  nil];
   gradient.locations = [NSArray arrayWithObjects:
                     [NSNumber numberWithFloat:0.0f],
                     [NSNumber numberWithFloat:0.7],
                     nil];
   [self.view.layer addSublayer:self.gradient];
   

   3a。将 NSTimer 添加到您的控制器中，该控制器将self.gradient通过执行以下操作以适当的时间间隔更新：

     topColor = ...; bottomColor = ...;
     NSArray* newColors = [NSArray arrayWithObjects:
                    (id)topColor.CGColor,
                    (id)bottomColor.CGColor,
                    nil];
    [(CAGradientLayer *)self.layer setColors:newColors];
   

   这将允许您准确地决定在每个步骤中要用于渐变的颜色。否则，您可以尝试使用动画，如下所示：

   3b。像这样添加动画，

   - (void)animateLayer... {
   
     [UIView animateWithDuration:duration 
                           delay:0
                         options:UIViewAnimationOptionCurveEaseInOut
                      animations:^{
       [CATransaction begin];
       [CATransaction setAnimationDuration:duration];
   
         topColor = ...; bottomColor = ...;
         NSArray* newColors = [NSArray arrayWithObjects:
                    (id)topColor.CGColor,
                    (id)bottomColor.CGColor,
                    nil];
        [(CAGradientLayer *)self.layer setColors:newColors];
   
        [CATransaction commit];
     }
             completion:^(BOOL b) {
                 [self animateLayer..];
             }];
   }
   

您也可以结合 3a 和 3b。

Answer 2

Simple working example:

.h file

@property (strong, nonatomic) CAGradientLayer *gradient;

.m file

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear: animated];

    self.gradient = [CAGradientLayer layer];
    self.gradient.frame = self.view.bounds;
    self.gradient.colors = @[(id)[UIColor purpleColor].CGColor,
                             (id)[UIColor redColor].CGColor];

    [self.view.layer insertSublayer:self.gradient atIndex:0];

    [self animateLayer];
}

-(void)animateLayer
{

    NSArray *fromColors = self.gradient.colors;
    NSArray *toColors = @[(id)[UIColor redColor].CGColor,
                          (id)[UIColor orangeColor].CGColor];

    [self.gradient setColors:toColors];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"colors"];

    animation.fromValue             = fromColors;
    animation.toValue               = toColors;
    animation.duration              = 3.00;
    animation.removedOnCompletion   = YES;
    animation.fillMode              = kCAFillModeForwards;
    animation.timingFunction        = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.delegate              = self;

    // Add the animation to our layer

    [self.gradient addAnimation:animation forKey:@"animateGradient"];
}

You might want to implement an additional method to shift the colors, and then reanimate the changes. But this should help you get there.