更新
遇到一個(gè)很奇怪的問題防嗡，tableview里面如果多個(gè)cell使用了這個(gè)PKView，有一定概率會(huì)導(dǎo)致動(dòng)畫錯(cuò)位侠坎。排查了很久終于解決了蚁趁，動(dòng)畫加在layer上以后，動(dòng)畫結(jié)束一定要將動(dòng)畫移除掉实胸，不然就會(huì)出現(xiàn)和我一樣詭異的問題他嫡。
PK動(dòng)畫效果如下
1.需求：
1.兩邊的條狀顏色為漸變色
2.動(dòng)畫方向如上圖所示，從兩邊往中間延展
3.兩邊的條狀圖形不規(guī)則
2.實(shí)現(xiàn)方式：
1.漸變色
CAGradientLayer可以實(shí)現(xiàn)漸變色
- (CAGradientLayer *)leftLayer {
if (!_leftLayer) {
CAGradientLayer *itemLayer = [CAGradientLayer layer];
//藍(lán)色
itemLayer.colors = @[(__bridge id) [self jercolorWithRGB:0x79C0FF].CGColor,
(__bridge id) [self jercolorWithRGB:0x589AFF].CGColor];
itemLayer.locations = @[@0, @1.0];
itemLayer.startPoint = CGPointMake(0, 0);//漸變色以x軸為方向漸變
itemLayer.endPoint = CGPointMake(1.0, 0);
_leftLayer = itemLayer;
}
return _leftLayer;
}
- (CAGradientLayer *)rightLayer {
if (!_rightLayer) {
CAGradientLayer *itemLayer = [CAGradientLayer layer];
//紅色
itemLayer.colors = @[(__bridge id) [self jercolorWithRGB:0xFF73C9].CGColor,
(__bridge id) [self jercolorWithRGB:0xFF86DF].CGColor];
itemLayer.locations = @[@0, @1.0];
itemLayer.startPoint = CGPointMake(0, 0);//漸變色以x軸為方向漸變
itemLayer.endPoint = CGPointMake(1.0, 0);
_rightLayer = itemLayer;
}
return _rightLayer;
}
- (UIColor *)jercolorWithRGB:(uint32_t)rgbValue{
return [UIColor colorWithRed:((rgbValue & 0xFF0000) >> 16) / 255.0f
green:((rgbValue & 0xFF00) >> 8) / 255.0f
blue:(rgbValue & 0xFF) / 255.0f
alpha:1];
}
2.動(dòng)畫
要實(shí)現(xiàn)這個(gè)從兩邊往中間延展的動(dòng)畫庐完，我用的是CAAnimationGroup钢属，兩個(gè)CABasicAnimation作為一組動(dòng)畫。一個(gè)是CAGradientLayer的position位置動(dòng)畫门躯，還有一個(gè)是bounds動(dòng)畫(經(jīng)過一番折騰淆党，我發(fā)現(xiàn)根本不需要bounds動(dòng)畫，而且加入bounds動(dòng)畫會(huì)導(dǎo)致左邊的layer在動(dòng)畫過程中形變)讶凉，就能實(shí)現(xiàn)這個(gè)需求染乌。關(guān)鍵點(diǎn)是，CABasicAnimation的position變化是以layer的錨點(diǎn)也就是中心點(diǎn)為對(duì)象的懂讯。
3.不規(guī)則圖形
要畫出左右layer的不規(guī)則形狀荷憋，我們拆分一下，view的外輪廓用切圓角實(shí)現(xiàn)褐望，那么剩下就是如何畫出中間部分的斜邊勒庄。用關(guān)鍵點(diǎn)畫貝塞爾線的方式來實(shí)現(xiàn)串前，然后用CAShapeLayer作為左右layer的mask
CAShapeLayer *shapLayerRight = [CAShapeLayer layer];
shapLayerRight.path = [self getPathByPoints:pointArray1].CGPath;
self.rightLayer.mask = shapLayerRight;
//利用關(guān)鍵點(diǎn)畫貝塞爾線
- (UIBezierPath*)getPathByPoints:(NSArray*)points {
UIBezierPath *path = [UIBezierPath bezierPath];
for (int i = 0; i < points.count; i++) {
CGPoint retrievedPoint = CGPointFromString([points objectAtIndex:i]);
if (i == 0) {
[path moveToPoint:retrievedPoint];
}else
[path addLineToPoint:retrievedPoint];
}
[path closePath];
return path;
}
3.使用方法：
self.pkView = [[PKView alloc]initWithLeftRate:0.5 frame:CGRectMake(15, 200, SCREEN_WIDTH-30, 36)];
self.pkView.layer.cornerRadius = 18;
self.pkView.layer.masksToBounds = YES;
[self.view addSubview:self.pkView];
