今天我們來說說CAShapeLayer的兩個非常神奇的屬性strokeStart和strokeEnd 我把它寫成了一個Hud 老規(guī)矩 先上動圖
strokeStart
我們都知道CAShapeLayer可以通過矢量圖形來繪制的CALayer子類 我們可以指定線寬啊 顏色之類的 最后通過CGPath來繪制出我們想要的圖形
strokeStart它表示描線開始的地方占總路徑的百分比，默認(rèn)值是0 取值范圍[0,1] 比如說我們起點在(0,0) 終點在(100,0) 我們設(shè)置strokeStart如果為0.5的話 那么此時起點就在(50,0) 我們做個CABasicAnimation動畫 讓strokeStart從0.5 到1.0的話 那么表現(xiàn)在動畫形式上就是線越來越短 為何更好的理解 我畫了一張圖
虛線就是看不到的 你可以把strokeStart理解成一個橡皮擦 如果我們讓strokeStart從0到1的話 那么這個線就會被從(0,0)一直檫除到(100,0)
strokeEnd
對比strokeStart 只不過它代表了繪制結(jié)束的地方站總路徑的百分比 默認(rèn)值是1 取值范圍是[0,1] 如果小于等于strokeStart 則繪制不出任何內(nèi)容
如果我們讓strokeEnd從0 動畫到 1 那么動畫表現(xiàn)為線越來越長 可以把strokeEnd理解為一個畫筆
分析動畫
首先要了解iOS貝塞爾曲線畫圓的坐標(biāo)系 直接上圖
我們可以看到這個動畫分為兩個動畫 第一個是先畫一個滿圓(起點在3π/2 終點在7π/2) 第二個動畫是去檫除這個圓(起點在3π/2 終點在7π/2) 結(jié)合我們上面講的strokeStart和strokeEnd 畫圓我們采用strokeEnd來做動畫 讓他從0動畫到1 檫除圓我們選擇strokeStart來做動畫 讓其也從0動畫到1
來 先看畫圓的路徑代碼
#pragma mark -- 獲取路徑
- (CGPathRef )getAnimationOnePath{
// 畫出這個圓的路徑
// clockwise:是否是順時針
// startAngle: 起始角度
// endAngle :終點角度
UIBezierPath *ciclePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2,self.frame.size.height/2) radius:0.8*self.currentSize.width/2 startAngle:M_PI * 3 / 2 endAngle:M_PI * 7 / 2 clockwise:YES];
return ciclePath.CGPath;
}
動畫代碼
#pragma mark -- 默認(rèn)的動畫
- (CAAnimationGroup *)AnimationOne{
// 第一個滿圓旋轉(zhuǎn)動畫
CABasicAnimation *aniamtion1 = [CABasicAnimation animation];
aniamtion1.keyPath = @"strokeEnd";
aniamtion1.fromValue = @0;
aniamtion1.toValue = @1;
// aniamtion1.removedOnCompletion = YES;
aniamtion1.duration = 1.5;
aniamtion1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// 第二個檫除路徑路徑動畫
CABasicAnimation *aniamtion2 = [CABasicAnimation animation];
aniamtion2.keyPath = @"strokeStart";
aniamtion2.fromValue = @0;
aniamtion2.toValue = @1;
aniamtion2.duration = 1.5;
aniamtion2.beginTime = 1.5;
// aniamtion1.removedOnCompletion = YES;
aniamtion2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// 最后合并到動畫組當(dāng)前去
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations =@[aniamtion1,aniamtion2];
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.fillMode = kCAFillModeForwards;
group.duration = 3;
group.repeatCount = MAXFLOAT;
return group;
}
好了我們第一個動畫完成了 是不是很簡單哇
對勾動畫
假如我們現(xiàn)在要畫出這個圖案 大家會怎么畫呢 很簡單先畫一個圓 然后在里面畫出一個對勾 對沒錯 我們動畫也是這么做的 我們先把路徑用貝賽爾曲線畫出來 最后用strokeEnd做動畫就ok了
矩形是當(dāng)前的view 1234 使我們畫對勾的路徑點 下面是詳細(xì)代碼
#pragma mark -- 成功的路徑
-(CGPathRef)getSuccessPath{
// 圓
UIBezierPath *ciclePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2,self.frame.size.height/2) radius:0.8*self.currentSize.width/2 startAngle:M_PI * 3 / 2 endAngle:M_PI * 7 / 2 clockwise:YES];
// 對勾
CGFloat W = self.frame.size.width *0.9;
CGFloat H = self.frame.size.height*0.9;
UIBezierPath *subPath = [UIBezierPath bezierPath];
[subPath moveToPoint:CGPointMake(W/4,H/2)];
[subPath addLineToPoint:CGPointMake(W/2,(H/2)+ H/4)];
[subPath addLineToPoint:CGPointMake(W-(W/8),H/4)];
// 添加到路徑上 由于CAShapeLayer只能添加一條路徑 幸好貝賽爾曲線有個appendPath: 方法 可以讓我們畫多條路徑
[ciclePath appendPath:subPath];
return ciclePath.CGPath;
}
最后動畫部分就很簡單了啊
#pragma mark -- 成功的動畫
- (CABasicAnimation*)successAnimtion{
// 第一個滿圓旋轉(zhuǎn)
CABasicAnimation *aniamtion1 = [CABasicAnimation animation];
aniamtion1.keyPath = @"strokeEnd";
aniamtion1.fromValue = @0;
aniamtion1.toValue = @1;
aniamtion1.duration = 1.5;
// 這個是緩沖函數(shù)
// 可以自定義
//
// aniamtion1.timingFunction = [CAMediaTimingFunction functionWithControlPoints:1 :1 :1 :1];
aniamtion1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
aniamtion1.fillMode = kCAFillModeBackwards;
return aniamtion1;
}
