您的当前位置:首页正文

百叶窗动画效果

来源:华拓网
img.gif

如果不想看啰嗦的介绍,请点击这里

整个设计也十分简单

  • 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;
    }
}