xCodeのSolar Weather Applicationに似たアニメーショングラデーションの背景を作成する

Question

私はこの質問を以前に聞いたことがありますが、私はあなたの助けを借りて何をしたいのかを明確にするためにもう一度お伝えしたいと思います。私はあなたが太陽の天気アプリ（スクリーンショットが提供されている）の背景に似てxCodeのバックグラウンドとiOSアプリケーションをどのように作成するのかと思っていました。あなたが見ることができるように、勾配は非常に滑らかであり、明らかに2つ以上の主要な点を含んでいる。 コードの例やスニペットに関する助けをいただければ幸いです。ありがとう、ベン。

Answer 1

何が必要なのである。

1. 追加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。実行して、適切な間隔でself.gradientを更新しますあなたのコントローラにNSTimerを追加します。

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

   これは、あなたが正確にあなたが各ステップで勾配のために使用したい色を決定することができます。それ以外の場合は、次のようにアニメーションを試してみてください。

   3bあなたはまた、3a、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..]; 
         }]; 
   } 
   

、このようなアニメーションを追加します。

Answer 2

簡単な作業例：

.hファイル

@property (strong, nonatomic) CAGradientLayer *gradient; 

.mファイル

- (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"]; 
} 

あなたは変化を生き返らその後、色をシフトし、するための追加メソッドを実装する場合があります。しかし、これはあなたがそこに着くのを助けるはずです。