iOS CAShapeLayer的strokeStart和strokeEnd屬性

CAShapeLayer的strokeStart和strokeEnd屬性

• 蘋果官方給出這兩個屬性的解釋爲：

/* These values define the subregion of the path used to draw the
* stroked outline. The values must be in the range [0,1] with zero
* representing the start of the path and one the end. Values in
* between zero and one are interpolated linearly along the path
* length. strokeStart defaults to zero and strokeEnd to one. Both are
* animatable. */

我們可以對繪製的Path進行分區。這兩個屬性的值在0~1之間，0代表Path的開始位置，1代表Path的結束位置。是一種線性遞增關係。strokeStart默認值爲0，strokeEnd默認值爲1。這兩個屬性都支持動畫。

1. keyPath = strokeStart 動畫的fromValue = 0，toValue = 1
   表示從路徑的0位置畫到1 怎麼畫是按照清除開始的位置也就是清除0 一直清除到1 效果就是一條路徑慢慢的消失

2. keyPath = strokeStart 動畫的fromValue = 1，toValue = 0
   表示從路徑的1位置畫到0 怎麼畫是按照清除開始的位置也就是1 這樣開始的路徑是空的（即都被清除掉了）一直清除到0 效果就是一條路徑被反方向畫出來

3. keyPath = strokeEnd 動畫的fromValue = 0，toValue = 1
   表示 這裏我們分3個點說明動畫的順序 strokeEnd從結尾開始清除 首先整條路徑先清除後2/3，接着清除1/3 效果就是正方向畫出路徑

4. keyPath = strokeEnd 動畫的fromValue = 1，toValue = 0
   效果就是反方向路徑慢慢消失
   註釋： 動畫的0-1（fromValue = 0，toValue = 1） 或1-0 （fromValue = 1，toValue = 0） 表示執行的方向 和路徑的範圍。

總結一句話就是：

**
strokeStart 把一個圓先畫完，然後 再慢慢減少
strokeEnd 從原點開始畫，然後把圓畫完整
**

代碼如下，可以直接複製代碼測試

/** 註釋
 
 strokeStart
 strokeStartAnimation
 strokeEnd
 strokeEndAnimation
 
 strokeAnimation
 groupAnimation
 */
- (void)_strokeStarttest
{
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        shapeLayer.frame = self.shapeLayer.bounds;

        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.shapeLayer.bounds];

        shapeLayer.path = path.CGPath;

        shapeLayer.fillColor = [UIColor clearColor].CGColor;
        shapeLayer.lineWidth = 2.0f;
        shapeLayer.strokeColor = [UIColor redColor].CGColor;

        [self.shapeLayer addSublayer:shapeLayer];

    /** 註釋
     
     strokeStart 把一個圓先畫完，然後 再慢慢減少
     strokeEnd 從原點開始畫，然後把圓畫完整
     */
        CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
        pathAnima.duration = 3.0f;
        pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
        pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
        pathAnima.fillMode = kCAFillModeForwards;
        pathAnima.removedOnCompletion = NO;
    pathAnima.repeatCount = CGFLOAT_MAX;
    
        [shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];
    
}

PS：strokeStart動畫的效果如下面gif

strokeEnd動畫的效果如下面gif
動畫 從無到有

如何實現聲音波紋的動畫