如何在CAShapeLayer上快速循環顏色？

問題：通過顏色上的CAShapeLayer()如何在CAShapeLayer上快速循環顏色？

在下面的代碼週期迅速。它工作正常，但它使設備變暖。在CAShapeLayer()上有更好更多的快速循環顏色嗎？

第1部分

在下面的代碼繪製，作爲一個例子，一個方形UIBezierPath()，並且填充層CAShapeLayer()。

let path = UIBezierPath() 
path.moveToPoint(CGPoint(x: 0, y: 0)) 
path.addLineToPoint(CGPoint(x: 0, y: 100)) 
path.addLineToPoint(CGPoint(x: 100, y: 100)) 
path.addLineToPoint(CGPoint(x: 100, y: 0)) 
path.closePath() 

let shape = CAShapeLayer() 
shape.path = path.CGPath 
shape.fillColor = UIColor.yellowColor().CGColor

第2部分。

接下來，我添加CAKeyframeAnimation動畫到CAShapeLayer()其有效地循環通過快速連續色調，給人的多色圖像閃爍效果，下面的示例圖像。

let colorsAnimation = CAKeyframeAnimation(keyPath: "fillColor") 

colorsAnimation.values = [UIColor.redColor().CGColor, UIColor.yellowColor().CGColor, UIColor.greenColor().CGColor, UIColor.blueColor().CGColor] 

colorsAnimation.keyTimes = [0.25, 0.5, 0.75, 1.0] 
colorsAnimation.calculationMode = kCAAnimationLinear 
colorsAnimation.removedOnCompletion = false 
colorsAnimation.fillMode = kCAFillModeForwards 
colorsAnimation.duration = 0.5 
colorsAnimation.repeatCount = Float.infinity 

shape.addAnimation(colorsAnimation, forKey: nil)

圖片：

來源

2016-12-07 user4806509

嘗試computeMode'kCAAnimationDiscrete'，當前你的線性嘗試插值顏色，離散不會這樣做。不知道你能做得更好嗎？ – Alistra

謝謝，@Alistra。我確實嘗試過'kCAAnimationDiscrete'，但它並沒有像'kCAAnimationLinear'似乎那樣提供顏色之間的平滑變化。我認爲我的形象有些誤導。然而，你的建議讓我更多地思考我想要達到的目標，所以謝謝！ – user4806509

只需在陣列中使用更多顏色，不要插入 – Alistra

這是一個有點冗長，但是，這是我要做的事在我的應用程序（電話should't得到溫暖，至少我的沒有）：

var colorArray = [UIColor.red, UIColor.blue, UIColor.yellow, UIColor.orange, UIColor.green, UIColor.cyan, UIColor.purple] 

var colorIndex = 0 
var shouldStop = false 

func sequenceA() { 

    UIView.animate(withDuration: 0, delay: 0.2, options: .allowUserInteraction, animations: { 

     shape.fillColor = colorArray[colorIndex].CGColor 

    }, completion: {finished in 

     print(colorArray[colorIndex]) 

     if colorIndex == colorArray.count - 1 { 
      colorIndex = 0 
     } 
     colorIndex+=1 
     sequenceB() 

    }) 
} 

func sequenceB() { 

    // When you want to stop 
    if shouldStop == true { 
     return 
    } 


    UIView.animate(withDuration: 0, delay: 0.2, options: .allowUserInteraction, animations: { 

     shape.fillColor = colorArray[colorIndex].color 


    }, completion: {finished in 

     print(colorArray[colorIndex]) 

     if colorIndex == colorArray.count - 1 { 
      colorIndex = 0 
     } 
     colorIndex+=1 
     sequenceA() 

    }) 
} 


sequenceA()

要initate只是調用sequenceA或B和將自己鎖定到該切換顏色的重複過程。當你想停止時，你可以將shouldStop設置爲true。

您可以通過更改兩種功能的延遲將顏色切換的速度更改爲任何您想要的顏色，並將顏色類型切換爲您希望的顏色類型。希望這可以幫助！

來源

2016-12-07 17:06:13

謝謝@Garret Kaye。這可以工作，但我實際上是在我的圖像沒有顯示的顏色之間進行平滑變化之後。抱歉。從我現在的其他閱讀中，我相信只有通過「CAKeyframeAnimation」才能實現「CAShapeLayer」的平滑填充更改。但是，你的建議也讓我思考更多，並重新審視我正在努力實現的目標，所以謝謝！ – user4806509

沒問題，祝你好運！ –

如何在CAShapeLayer上快速循環顏色？

回答

相關問題