Tạo nền gradient động tương tự như Ứng dụng thời tiết năng lượng mặt trời trong xCode

Question

Mặc dù tôi đã đặt câu hỏi này trước đây, tôi muốn liên hệ lại để làm rõ những gì tôi muốn thực hiện với sự giúp đỡ của bạn. Tôi đã tự hỏi làm thế nào bạn sẽ tạo ra một nền tảng và ứng dụng iOS trong xCode tương tự như nền của ứng dụng thời tiết năng lượng mặt trời (ảnh chụp màn hình cung cấp) mà thay đổi chút ít theo thời gian (trong một chu kỳ). Như bạn có thể thấy gradient rất trơn tru và rõ ràng chứa hơn hai điểm chính. Bất kỳ trợ giúp nào về ví dụ hoặc đoạn mã sẽ được đánh giá cao. Cảm ơn lần nữa, Ben.

Answer 1

Những gì tôi cần là:

1. thêm một CAGradientLayer để điều khiển của bạn xem (hoặc xem tùy chỉnh), ví dụ:

   @property (nonatomic, retain) CAGradientLayer *gradient; 
   

2. Trong điều khiển xem của bạn , trong viewDidLoad, tạo và thêm lớp gradient vào chế độ xem của bạn:

   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. thêm một NSTimer để điều khiển của bạn mà sẽ cập nhật self.gradient trong khoảng thời gian thích hợp bằng cách thực hiện:

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

   này sẽ cho phép bạn quyết định chính xác mà màu sắc mà bạn muốn sử dụng cho gradient tại mỗi bước. Nếu không, bạn có thể thử với một hoạt ảnh như sau:

   3b. thêm các hình ảnh động như thế này,

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

Bạn cũng có thể kết hợp 3a và 3b.

Answer 2

Ví dụ đơn giản làm việc:

tập tin .h

@property (strong, nonatomic) CAGradientLayer *gradient; 

tập tin .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"]; 
} 

Bạn có thể muốn thực hiện một phương pháp bổ sung để chuyển màu sắc, và sau đó reanimate những thay đổi . Nhưng điều này sẽ giúp bạn đạt được điều đó.