如何在iOS上動畫漸變動​​畫

Question

我想模仿「想要」iPhone應用程序背景，有3種顏色我想讓視圖循環，讓我們說紅色，藍色和綠色。

我想在那裏有一個漸變，紅色到藍色到綠色，每個屏幕的三分之一，漸變爲對方（漸變），然後，我想讓紅色離開屏幕頂部，並返回在底部。 （見下面的圖片...）

動畫應該向上移動，我想梯度上升，並在屏幕底部進行改造，然後往上走。

我嘗試使用CAGradientLayer併爲「顏色」屬性設置動畫效果，但看起來像是所有東西都相互淡入，不一定會從屏幕上移開。

考慮使用OpenGL，但不想爲了看起來很簡單的東西而做得那麼低。任何幫助/代碼示例將不勝感激。我基本上需要幫助動畫使用CoreAnimation/CoreGraphics漸變。

在此先感謝！

Answer 1

動畫一個CAGradientLayer的colors屬性只會導致褪色，因爲你已經發現。不過，我認爲一個漸變圖層是要走的路。你應該看看以下選項：

• 動畫positions屬性以及/而不是colors。
• 創建一個包含完整的動畫週期較大的梯度層和動畫的位置

第二個選項可能會提供最佳性能的梯度不會需要重新計算。

Answer 2

你應該繼承UIView類來創建一個GradientView類。添加一個數組來保存您正在移動的顏色。選擇很重要，我解釋了原因。覆蓋的drawRect（RECT：的CGRect）方法和顏色的部件之間進行內插：

override func drawRect(rect: CGRect) { 

    let context = UIGraphicsGetCurrentContext(); 
    CGContextSaveGState(context); 

    let c1 = colors[index == 0 ? (colors.count - 1) : index - 1] // previous 
    let c2 = colors[index]          // current 
    let c3 = colors[index == (colors.count - 1) ? 0 : index + 1] // next 

    var c1Comp = CGColorGetComponents(c1.CGColor) 
    var c2Comp = CGColorGetComponents(c2.CGColor) 
    var c3Comp = CGColorGetComponents(c3.CGColor) 

    var colorComponents = [ 
     c1Comp[0] * (1 - factor) + c2Comp[0] * factor, // color 1 and 2 
     c1Comp[1] * (1 - factor) + c2Comp[1] * factor, 
     c1Comp[2] * (1 - factor) + c2Comp[2] * factor, 
     c1Comp[3] * (1 - factor) + c2Comp[3] * factor, 
     c2Comp[0] * (1 - factor) + c3Comp[0] * factor, // color 2 and 3 
     c2Comp[1] * (1 - factor) + c3Comp[1] * factor, 
     c2Comp[2] * (1 - factor) + c3Comp[2] * factor, 
     c2Comp[3] * (1 - factor) + c3Comp[3] * factor  
    ] 

    let gradient = CGGradientCreateWithColorComponents(CGColorSpaceCreateDeviceRGB(), &colorComponents, [0.0, 1.0], 2) 

    let startPoint = CGPoint(x: 0.0, y: 0.0) 
    let endPoint = CGPoint(x: rect.size.width, y: rect.size.height) 
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, CGGradientDrawingOptions.DrawsAfterEndLocation) 

    CGContextRestoreGState(context); 
} 

索引變量從0開始和顏色陣列周圍纏繞而因子是0.0和1.0之間和動畫通過計時器：

var index: Int = 0 
var factor: CGFloat = 1.0 
var timer: NSTimer? 

func animateToNextGradient() { 
    index = (index + 1) % colors.count 
    self.setNeedsDisplay() 
    self.factor = 0.0  
    self.timer = NSTimer.scheduledTimerWithTimeInterval(1.0/60.0, target: self, selector: "animate:", userInfo: nil, repeats: true) 

} 

func animate(timer: NSTimer) { 
    self.factor += 0.02 
    if(self.factor > 1.0) { 
     self.timer?.invalidate() 
    } 
    self.setNeedsDisplay() 
}