動畫CAShapeLayer/CAGradientLayer

Question

這是對我昨天提出的問題的補充。結果非常完美，但我想要修改。 Using drawRect to draw & animate two graphs. A background graph, and a foreground graph

以下代碼基於上述線程生成一個CABasicAnimation，它生成深藍色的「三角形」。而不是深藍色的純色，我希望這是一個CAGradientLayer，帶3檔：紅色/綠色/藍色。

我嘗試添加CAGradientLayer來配置漸變，然後使用addSubLayer將漸變添加到動畫化的CAShapeLayer。我在下面發佈的結果不會生成動畫。顏色和形狀保持不變。梯度看起來不錯，只是需要爲它動畫出來：

import UIKit 
import QuartzCore 
import XCPlayground 

let view = UIView(frame: CGRect(x: 0, y: 0, width: 521, height: 40)) 
view.backgroundColor = UIColor.whiteColor() 
XCPlaygroundPage.currentPage.liveView = view 

let maskPath = UIBezierPath() 

maskPath.moveToPoint(CGPoint(x: 0, y: 30)) 
maskPath.addLineToPoint(CGPoint(x: 0, y: 25)) 
maskPath.addLineToPoint(CGPoint(x: 300, y: 10)) 
maskPath.addLineToPoint(CGPoint(x: 300, y: 30)) 
maskPath.closePath() 

let maskLayer = CAShapeLayer() 
maskLayer.path = maskPath.CGPath 
maskLayer.fillColor = UIColor.whiteColor().CGColor 

let rectToAnimateFrom = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 0, height: 40)) 
let rectToAnimateTo = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 97, height: 40)) 

let backgroundGray = CAShapeLayer() 
backgroundGray.path = maskPath.CGPath 
backgroundGray.fillColor = UIColor.grayColor().CGColor 

let foregroundGradient = CAShapeLayer() 
foregroundGradient.mask = maskLayer 
foregroundGradient.backgroundColor = UIColor.clearColor().CGColor 


let gradientLayer = CAGradientLayer() 
gradientLayer.startPoint = CGPointMake(0, 0) 
gradientLayer.endPoint = CGPointMake(1, 0) 
gradientLayer.frame = maskPath.bounds 

let colors = [UIColor.redColor().CGColor, UIColor.greenColor().CGColor, UIColor.blueColor().CGColor] 
gradientLayer.colors = colors 


foregroundGradient.addSublayer(gradientLayer) 


view.layer.addSublayer(backgroundGray) 
view.layer.addSublayer(foregroundGradient) 


let animation = CABasicAnimation(keyPath: "path") 
animation.fromValue = rectToAnimateFrom.CGPath 
animation.toValue = rectToAnimateTo.CGPath 
animation.duration = 2 
animation.removedOnCompletion = false 
animation.fillMode = kCAFillModeForwards 


foregroundGradient.addAnimation(animation, forKey: nil) 

我需要foregroundGradient對象，以便從左至右（與gradientLayer子！）。

如果您從上述代碼中刪除漸變，並將foregroundGradient保持爲純色，您將看到動畫。

Answer 1

我認爲您必須在您的視圖中使用您的mask，如下所述。

//Remove below line 
view.layer.addSublayer(backgroundGray) 

//Add your mask to view 
view.layer.mask = backgroundGray 

整體功能看起來像這樣：

func getGradientView() { 
    let view = UIView(frame: CGRect(x: 0, y: 50, width: 521, height: 40)) 
    view.backgroundColor = UIColor.grayColor() 
    self.view.addSubview(view) 

    let maskPath = UIBezierPath() 

    maskPath.moveToPoint(CGPoint(x: 0, y: 30)) 
    maskPath.addLineToPoint(CGPoint(x: 0, y: 25)) 
    maskPath.addLineToPoint(CGPoint(x: 300, y: 10)) 
    maskPath.addLineToPoint(CGPoint(x: 300, y: 30)) 
    maskPath.closePath() 

    let maskLayer = CAShapeLayer() 
    maskLayer.path = maskPath.CGPath 
    maskLayer.fillColor = UIColor.whiteColor().CGColor 

    let rectToAnimateFrom = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 0, height: 40)) 
    let rectToAnimateTo = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 300, height: 40)) 

    let backgroundGray = CAShapeLayer() 
    backgroundGray.path = maskPath.CGPath 
    backgroundGray.fillColor = UIColor.grayColor().CGColor 

    let foregroundGradient = CAShapeLayer() 
    foregroundGradient.mask = maskLayer 
    foregroundGradient.backgroundColor = UIColor.clearColor().CGColor 


    let gradientLayer = CAGradientLayer() 
    gradientLayer.startPoint = CGPointMake(0, 0) 
    gradientLayer.endPoint = CGPointMake(1, 0) 
    gradientLayer.frame = maskPath.bounds 

    let colors = [UIColor.redColor().CGColor, UIColor.greenColor().CGColor, UIColor.blueColor().CGColor] 
    gradientLayer.colors = colors 

    foregroundGradient.addSublayer(gradientLayer) 

    //Remove below line 
    //view.layer.addSublayer(backgroundGray) 

    view.layer.addSublayer(foregroundGradient) 

    //Add you mask to view 
    view.layer.mask = backgroundGray 

    let animation = CABasicAnimation(keyPath: "path") 
    animation.fromValue = rectToAnimateFrom.CGPath 
    animation.toValue = rectToAnimateTo.CGPath 
    animation.duration = 1 
    animation.repeatCount = 1000 
    animation.removedOnCompletion = false 
    animation.fillMode = kCAFillModeForwards 


    maskLayer.addAnimation(animation, forKey: "fill animation") 
} 

讓我知道，如果按你的例外工作。