img.gif
如果不想看啰嗦的介绍，请点击这里 Demo源码
整个设计也十分简单
- 1、画一条竖线
- 2、画一堆横线
拉开的效果：
通过动态改变每一条横线之间的距离
旋转的效果
通过
transform属性，很容易做到
为了能方便自定义：在头文件内暴露了以下属性
// default 0.5
@property (nonatomic,assign) CGFloat angle;
// default 0.5
@property (nonatomic,assign) CGFloat progress;
// default 10
@property (nonatomic,assign) int lines;
// default 2
@property (nonatomic,assign) CGFloat lineWidth;
// default gray
@property (nonatomic,strong) UIColor *lineColor;
画中间的竖线
- (void)drawVerticalLine {
UIBezierPath *line = [UIBezierPath bezierPath];
CGFloat x = self.frame.size.width * 0.5 - _lineWidth * 0.5;
[line moveToPoint:CGPointMake(x, 0)];
[line addLineToPoint:CGPointMake(x, self.frame.size.height)];
line.lineWidth = _lineWidth;
[_lineColor setStroke];
[line stroke];
}
画横线
- (void)drawHorizontalLine {
// length
CGFloat lineLength = self.frame.size.width * 0.7;
/// 总spaceing
CGFloat sumSpaceing = self.frame.size.height - (_lines * _lineWidth);
/// 根据progress 设置spaceing
CGFloat currentSpaceing = sumSpaceing / _lines * _progress ;
switch (self.subviews.count) {
case 0:
[self createViewsWithLineLength:lineLength currentSpaceing:currentSpaceing];
break;
default:
[self layoutViewsWithLineLength:lineLength currentSpaceing:currentSpaceing];
break;
}
}
