Изменение фона градиента, как в Instagram Вход

Question

Как сделать меняющийся фон градиента, как в Instagram Войти?

В Android вы делаете это как this:

Есть ли подобный способ сделать это в Swift?

Answer 1

Вы можете сделать это довольно легко с помощью CAGradientLayer:

let grad = CAGradientLayer() 
grad.colors = [ 
    UIColor.red.cgColor, // top color 
    UIColor.blue.cgColor // bottom color 
] 
grad.locations = [ 
    0.0, // start gradating at top of view 
    1.0 // end gradating at bottom of view 
] 

grad.frame = view.bounds 
view.layer.addSublayer(grad) 

Вы можете увеличить первый элемент в местах (0.0), чтобы начать gradating дальше вниз, или вы можете уменьшить от 1,0 до завершения градация повыше. Это немного сложно объяснить, бросьте это на детскую площадку и немного побейте, пока не получите желаемый эффект.

Пример градиент и площадка из кода выше:

Answer 2

Если вы хотите, чтобы постоянно менять изменить цвет фона вида по с анимацией вы можете установить это что-то вроде этого.

var colors: [UIColor] = [.red, .blue, .green] 

func startAnimation(index: Int) { 
    UIView.animate(withDuration: 2.5, delay: 0, options: UIViewAnimationOptions.curveEaseInOut, animations: { 
     self.view.backgroundColor = self.colors[index] 
     }) { (finished) in 
      var currentIndex = index + 1 
      if currentIndex == self.colors.count { currentIndex = 0 } 
      self.startAnimation(index: currentIndex) 
    } 
} 

И называть эту функцию индексом 0.

self.startAnimation(index: 0) 

Answer 3

Вы можете сделать, как это в СВИФТ 3. Вы можете дать больше цветов в нем.

let gradient1 = CAGradientLayer() 
gradient1.frame = CGRect(origin: CGPoint.zero , size: CGSize (width: self.view.frame.size.width,height: self.view.frame.size.height)) 
gradient1.colors = [UIColor.red.cgColor, UIColor.blue.cgColor] 
print(gradient1.frame) 
view_gradient.layer.masksToBounds = true 
view_gradient.layer.addSublayer(gradient1) 

Надеюсь, это сработает для вас.

Answer 4

В Swift3

Использование CAGradientLayer с помощью CABasicAnimation

создать PastelView библиотеку, чтобы сделать так фоном instgram эффект анимации

Репо https://github.com/cruisediary/Pastel

цвета

var colors: [UIColor] = [UIColor(red: 156/255, green: 39/255, blue: 176/255, alpha: 1.0), 
         UIColor(red: 255/255, green: 64/255, blue: 129/255, alpha: 1.0), 
         UIColor(red: 123/255, green: 31/255, blue: 162/255, alpha: 1.0), 
         UIColor(red: 32/255, green: 76/255, blue: 255/255, alpha: 1.0), 
         UIColor(red: 32/255, green: 158/255, blue: 255/255, alpha: 1.0), 
         UIColor(red: 90/255, green: 120/255, blue: 127/255, alpha: 1.0), 
         UIColor(red: 58/255, green: 255/255, blue: 217/255, alpha: 1.0)] 

Set Gradient

let gradient = CAGradientLayer() 
gradient.frame = bounds 
gradient.colors = currentGradientSet() 
gradient.startPoint = CGPoint(x:0, y:1) 
gradient.endPoint = CGPoint(x:1, y:0) 
gradient.drawsAsynchronously = true 
layer.insertSublayer(gradient, at: 0) 

Добавить Animation градиента

let animation = CABasicAnimation(keyPath: Animation.keyPath) 
animation.duration = animationDuration 
animation.toValue = currentGradientSet() 
animation.fillMode = kCAFillModeForwards 
animation.isRemovedOnCompletion = false 
animation.delegate = self //this is important 
gradient.add(animation, forKey: Animation.key) 

После цикла конца анимации другого набора цветов зацикливания

extension PastelView: CAAnimationDelegate { 
    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) { 
     if flag { 
      gradient.colors = currentGradientSet() 
      animateGradient() 
     } 
    } 
} 

Pastel должен помочь вам :)