iOS'ta hareketli degrade animasyonu nasıl yapılır

Question

"Want" iPhone uygulaması arkaplanını taklit etmek istiyorum, içinde gezinmek için bir görünüm olmasını istediğim 3 renk var, kırmızı, mavi ve yeşil diyelim.

Kırmızıdan maviye yeşili degrade olsun, ekranın her birinin 1/3'ü birbirine geçiyor (degrade), sonra kırmızıyı ekranın üstünden kapatıp geri döneceğim en altta. (Aşağıdaki fotoğraflara bakın ...)

Animasyon yukarı çıkmalı, degradenin yukarı çıkmasını ve ekranın alt kısmına geçmesini istiyorum.

CAGradientLayer'ı kullanarak ve "renkler" özelliğini canlandırmayı denedim, ancak her şey ekranın dışına taşmayacak şekilde birbirine karışıyor gibi görünüyor.

OpenGL kullanarak düşünmek, ancak oldukça basit gibi görünen bir şey için o kadar düşük gitmek istemiyorum. Herhangi bir yardım/kod örneği çok takdir edilecektir. Temel olarak CoreAnimation/CoreGraphics kullanarak bir gradyanı canlandırma konusunda yardıma ihtiyacım var.

Şimdiden teşekkürler!

Answer 1

keşfettiğiniz gibi, bunlar yalnızca bir solmasına neden olacak CAGradientLayer ait colors özelliği animasyon

. Bununla birlikte, bir degrade tabakasının gitmenin yolu olduğunu düşünüyorum. Aşağıdaki seçenekler bakmak gerekir:

• colors yerine positions özelliğini animasyon yanı/sıra.
• tam animasyon döngüyü içeren daha büyük bir degrade katman oluşturma ve konumunu

degrade yeniden hesaplanır gerekmez ikinci seçenek muhtemelen en iyi performansı verecektir animasyon.

Answer 2

Bir GradientView sınıfı oluşturmak için UIView alt sınıfı kullanmalısınız. Hareket ettiğiniz renkleri tutmak için bir dizi ekleyin. Seçim önemlidir ve nedenini açıklayan wrote an article. drawRect (diag: CGRect) ile tahrik yöntem ve renk bileşenleri arasında aradeğerleme:

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

indeks değişkeni 0 ile başlar ve faktör 0.0 ile 1.0 arasında olan ve içinden animasyon ise renk dizisi sarar bir zamanlayıcı:

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