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