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進(jìn)行分區(qū)。這兩個屬性的值在0~1之間，0代表Path的開始位置，1代表Path的結(jié)束位置。是一種線性遞增關(guān)系。strokeStart默認(rèn)值為0，strokeEnd默認(rèn)值為1。這兩個屬性都支持動畫。
keyPath = strokeStart 動畫的fromValue = 0，toValue = 1
表示從路徑的0位置畫到1 怎么畫是按照清除開始的位置也就是清除0 一直清除到1 效果就是一條路徑慢慢的消失keyPath = strokeStart 動畫的fromValue = 1，toValue = 0
表示從路徑的1位置畫到0 怎么畫是按照清除開始的位置也就是1 這樣開始的路徑是空的（即都被清除掉了）一直清除到0 效果就是一條路徑被反方向畫出來keyPath = strokeEnd 動畫的fromValue = 0，toValue = 1
表示 這里我們分3個點(diǎn)說明動畫的順序 strokeEnd從結(jié)尾開始清除 首先整條路徑先清除后2/3，接著清除1/3 效果就是正方向畫出路徑keyPath = strokeEnd 動畫的fromValue = 1，toValue = 0
效果就是反方向路徑慢慢消失
注釋： 動畫的0-1（fromValue = 0，toValue = 1） 或1-0 （fromValue = 1，toValue = 0） 表示執(zhí)行的方向 和路徑的范圍。
總結(jié)一句話就是：
**
strokeStart 把一個圓先畫完，然后 再慢慢減少
strokeEnd 從原點(diǎn)開始畫，然后把圓畫完整
**
代碼如下，可以直接復(fù)制代碼測試
/** 注釋
strokeStart
strokeStartAnimation
strokeEnd
strokeEndAnimation
strokeAnimation
groupAnimation
*/
- (void)test_strokeStar
{
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 從原點(diǎn)開始畫，然后把圓畫完整
*/
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
pathAnima.duration = 3.0f;
pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
/** fromValue 0 到1 先出現(xiàn)一個完整的圓， 然后順時針慢慢減少 */
// pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
// pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
/** fromValue 1 到0 從無到有 然后逆時針畫圓 */
pathAnima.fromValue = [NSNumber numberWithFloat:1.0f];
pathAnima.toValue = [NSNumber numberWithFloat:0.0f];
pathAnima.fillMode = kCAFillModeForwards;
pathAnima.removedOnCompletion = NO;
pathAnima.repeatCount = CGFLOAT_MAX;
[shapeLayer addAnimation:pathAnima forKey:@"strokeStartAnimation"];
}
- (void)_teststrokeEnd
{
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 從原點(diǎn)開始畫，然后把圓畫完整
*/
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnima.duration = 3.0f;
pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
/** fromValue 0 到1 從無到有，順時針畫圓 */
pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
/** fromValue 1 到0 先出現(xiàn)一個完整的圓，然后逆時針慢慢減少 */
// pathAnima.fromValue = [NSNumber numberWithFloat:1.0f];
// pathAnima.toValue = [NSNumber numberWithFloat:0.0f];
pathAnima.fillMode = kCAFillModeForwards;
pathAnima.removedOnCompletion = NO;
pathAnima.repeatCount = CGFLOAT_MAX;
[shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];
}
PS：strokeStart fromValue 0-1動畫的效果如下面gif
strokeEnd. fromValue 0-1 動畫的效果如下面gif
動畫 從無到有
