Wie zu animieren Gradienten auf iOS

Question

animieren Ich möchte die "Want" iPhone App Hintergrund nachahmen, gibt es 3 Farben, die ich möchte eine Ansicht durchlaufen, sagen wir rot, blau und grün.

Ich möchte, dass es ein Farbverlauf mit rot zu blau zu grün, jedes 1/3 des Bildschirms, verblasst ineinander (Farbverlauf), dann möchte ich das rot auf dem Bildschirm oben gehen und zurückkommen auf der Unterseite. (Siehe Fotos unten ...)

Die Animation sollte nach oben gehen, ich möchte, dass der Farbverlauf nach oben geht und am unteren Bildschirmrand nach oben korrigiert wird.

Ich habe versucht, mit CAGradiantLayer und animieren die "Farben" -Eigenschaft, aber das sieht aus wie alles ineinander überblendet, nicht unbedingt aus dem Bildschirm.

Betrachten mit OpenGL, aber nicht so niedrig für etwas, das scheint ziemlich einfach scheint. Jede Hilfe/Code-Beispiele würden sehr geschätzt werden. Ich brauche im Grunde Hilfe, einen Gradient mit CoreAnimation/CoreGraphics zu animieren.

Vielen Dank im Voraus!

Answer 1

Animieren der colors Eigenschaft eines CAGradientLayer wird nur ein Fade verursachen, wie Sie entdeckt haben. Ich denke jedoch, dass eine Gradientenschicht der richtige Weg ist. Sie sollten in den folgenden Optionen aus:

• die positions Eigenschaft sowie/anstelle der colors Animieren.
• eine größere Gradientenschicht zu schaffen, die Ihren vollen Animationszyklus enthält und Animieren seine Position

Die zweite Option wird wahrscheinlich die beste Leistung geben, wie der Gradient nicht neu berechnet werden muß.

Answer 2

Sie sollten UIView von Unterklassen ableiten, um eine GradientView-Klasse zu erstellen. Fügen Sie ein Array hinzu, das die Farben enthält, durch die Sie sich bewegen. Die Wahl ist wichtig und ich wrote an article erklären warum. Überschreiben der drawRect (rect: CGRect) Verfahren und eine Interpolation zwischen den Komponenten der Farben:

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); 
} 

die Indexvariable beginnt bei 0 und umschlingt die Array Farben während der Faktor zwischen 0,0 und 1,0 ist und animiert durch ein Zeitgeber:

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() 
}