创建类似于X code中的太阳能应用气象动画渐变背景 [英] Creating an animated gradient background similar to the Solar Weather Application in xCode

问题描述

虽然我以前也问过这个问题，我想能再次澄清，我想在你的帮助来完成的。我想知道你将如何建立在类似太阳的天气应用程序（截图提供）的背景X code语言背景和iOS的应用程序，随着时间的推移稍有变化（在一个周期）。正如你所看到的渐变是非常流畅，显然包含两个以上的要点。
以实例或code的片段任何帮助将大大AP preciated。再次感谢，本。

Even though I have asked this question before, I would like to reach out again to clarify what I would like to accomplish with your help. I was wondering how you would create a background of and iOS application in xCode similar to the background of the Solar weather app (screenshots provided) that changes slightly over time (in a cycle). As you can see the gradient is very smooth and obviously contains more than two main points. Any help with example or snippets of code would be greatly appreciated. Thanks Again, Ben.

推荐答案

我需要的是：

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

1. adding a CAGradientLayer to your view controller (or custom view), e.g.:

@property (nonatomic, retain) CAGradientLayer *gradient;

在您的视图控制器，在viewDidLoad中，创造和梯度层添加到您的视图：

In your view controller, in viewDidLoad, create and add the gradient layer to your 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到控制器，将做更新 self.gradient 以适当的间隔：

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

这将让你准确地决定你要使用在每一步渐变的颜色。否则，你可以尝试用动画，像这样：

This will allow you to exactly decide which colour you want to use for the gradient at each step. Otherwise, you might try with an animation, like this:

3b上。添加动画这样，

3b. add the animation like this,

- (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。

You might also combine 3a and 3b.

这篇关于创建类似于X code中的太阳能应用气象动画渐变背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！