背景色の変更をアニメーション化する - 横向き

Question

私は水平に長方形の矩形を持っているとしましょう。それは青です。私はそれを赤くしたい。しかし、私は色の変化を一方の側で開始し、他方で終了させたい。

キーフレームアニメーションを使用して、全体のビューを赤から青まで徐々に変化させることができます。徐々に左から右に変更する方法はありますか？

UIView.animateKeyframesWithDuration(2.0 /*Total*/, delay: 0.0, options: UIViewKeyframeAnimationOptions.CalculationModeLinear, animations: { 
    UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 1/1, animations:{ 
     self.view.backgroundColor = UIColor.redColor()  
     self.view.layoutIfNeeded() 
    }) 
    }, 
    completion: { finished in 
     if (!finished) { return } 
}) 

Answer 1

CAGradientLayerをご覧ください。あなたはここでそのlocations、colorsまたはendPointとstartPoint

あなたは遊び場に貼り付けると、それが動作することができますどのように見ることができます迅速なスニペットでアニメーション化することができます。この場合、グラデーションの色の位置をアニメートしています。

import UIKit 
import XCPlayground 

XCPlaygroundPage.currentPage.needsIndefiniteExecution = true 

let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 400)) 

let startLocations = [0, 0] 
let endLocations = [1, 2] 

let layer = CAGradientLayer() 
layer.colors = [UIColor.redColor().CGColor, UIColor.blueColor().CGColor] 
layer.frame = view.frame 
layer.locations = startLocations 
layer.startPoint = CGPoint(x: 0.0, y: 1.0) 
layer.endPoint = CGPoint(x: 1.0, y: 1.0) 
view.layer.addSublayer(layer) 

let anim = CABasicAnimation(keyPath: "locations") 
anim.fromValue = startLocations 
anim.toValue = endLocations 
anim.duration = 2.0 
layer.addAnimation(anim, forKey: "loc") 
layer.locations = endLocations 

XCPlaygroundPage.currentPage.liveView = view 

Answer 2

スウィフト3バージョン：

import UIKit 
import PlaygroundSupport 

PlaygroundPage.current.needsIndefiniteExecution = true 


let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 400)) 

let startLocations = [0, 0] 
let endLocations = [1, 2] 

let layer = CAGradientLayer() 
layer.colors = [UIColor.red.cgColor, UIColor.blue.cgColor] 
layer.frame = view.frame 
layer.locations = startLocations as [NSNumber]? 
layer.startPoint = CGPoint(x: 0.0, y: 1.0) 
layer.endPoint = CGPoint(x: 1.0, y: 1.0) 
view.layer.addSublayer(layer) 

let anim = CABasicAnimation(keyPath: "locations") 
anim.fromValue = startLocations 
anim.toValue = endLocations 
anim.duration = 2.0 
layer.add(anim, forKey: "loc") 
layer.locations = endLocations as [NSNumber]? 

PlaygroundPage.current.liveView = view