ios - 在 xCode 中创建类似于 Solar Weather Application 的动画渐变背景

Question

尽管我之前已经问过这个问题，但我还是想再次与您联系，以阐明我希望在您的帮助下完成什么。我想知道如何在 xCode 中创建一个 iOS 应用程序的背景，类似于 Solar weather 应用程序(提供的屏幕截图)的背景，随着时间的推移(在一个周期中)略有变化。如您所见，渐变非常平滑，显然包含两个以上的主要点。 非常感谢任何有关示例或代码片段的帮助。再次感谢本。

Answer 1

我需要的是:

1. 将 CAGradientLayer 添加到您的 View Controller (或自定义 View )，例如:

   @property (nonatomic, retain) CAGradientLayer *gradient;
   

2. 在您的 View Controller 中，在 viewDidLoad 中，创建渐变层并将其添加到您的 View 中:

   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 到你的 Controller ，它将通过以下方式以适当的时间间隔更新 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。