渐变图层和插值曲线

渐变图层通常与插值贝塞尔曲线混合使用来绘制各种变化曲线。刚开始也是公司需求,要绘制这种光滑的曲线,我也找了很多的第三方,带动画的、不带动画的种种,结果都不满意,然后就开始自己搞,其中同事也给了我很多提示。
贝塞尔曲线可能都会画,但是于要求还远远不够,怎么画出光滑的曲线,再加上渐变的图层,这就是关键了,下面的代码主要讲解处理插值数据,让贝塞尔曲线更加光滑,通过贝塞尔曲线绘制渐变图层。俗话说授人以鱼不如授人以渔,下面就以代码来讲解实现和使用的方法,让初学者都能自己写自己想要的曲线图。
讲解全靠代码注释
GradeColorView类,.h文件

#import <UIKit/UIKit.h>


@interface GradeColorView : UIView

@property(strong,nonatomic)UIColor * lineColor;/////线的颜色

@property (nonatomic, strong)NSMutableArray *allPoints;///所有点包括插值点


- (instancetype)initWithFrame:(CGRect)frame;

- (void)updateUIWithPointArray:(NSArray *)pointsArray insertNum:(NSInteger)insertNum withLineColor:(UIColor *)color;

@end

.m文件

#import "GradeColorView.h"
#import "DataGetY.h"

///把对应的颜色
#define kSetAlColor(rd,ge,be,al) ([UIColor colorWithRed:rd<=1?rd:rd/255.0 green:ge<=1?ge:ge/255.0 blue:be<=1?be:be/255.0 alpha:al])

//获取颜色R G B
#define kGetColorRed(color) ([[[CIColor alloc]initWithColor:color] red])
#define kGetColorGreen(color) ([[[CIColor alloc]initWithColor:color] green])
#define kGetColorBlue(color) ([[[CIColor alloc]initWithColor:color] blue])

@interface GradeColorView ()

@property (nonatomic, strong)CAGradientLayer *gradientLayer;////渐变色层

@property (nonatomic, strong)NSArray *pointsArray;////曲线的点数组

@property (nonatomic, assign)NSInteger insertNum;

@end

@implementation GradeColorView


- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
        self.allPoints = [[NSMutableArray alloc]init];
    }
    return self;
}

////传入数据 数组
- (void)updateUIWithPointArray:(NSArray *)pointsArray insertNum:(NSInteger)insertNum withLineColor:(UIColor *)color
{
    self.lineColor = color;///设置曲线颜色
    self.insertNum = insertNum;
    self.pointsArray = pointsArray;
    
    ////创建BezierPath
    UIBezierPath *path = [UIBezierPath bezierPath];
    ////对数据进行处理,开始插值,为渐变色图层提供范围
    [self makeDownPointWithInsertNum:insertNum andPointsArray:self.pointsArray withPath:path];
    path.lineWidth = 0;
    [path stroke];
    ///self.gradientLayer为渐变色层
    CAShapeLayer *layer = [CAShapeLayer layer];////创建一个Layer层
    layer.path = [path CGPath];
    layer.lineCap = kCALineCapRound;
    self.gradientLayer.mask = layer;/////layer的背景色选中区域
    [self.layer addSublayer:self.gradientLayer];
    [self setNeedsDisplay];
}

-(void)drawRect:(CGRect)rect
{
    [super drawRect:rect];
    
    UIBezierPath *path = [UIBezierPath bezierPath];

    [self makeDownPointWithInsertNum:self.insertNum andPointsArray:self.pointsArray withPath:path];
    [self.lineColor setStroke];
    [path stroke];
}
////对数据进行插值处理 params: num参数表示插值的点数,自己定,点数越多,曲线越光滑   pointsArray参数表示要处理的所有点
- (void)makeDownPointWithInsertNum:(NSInteger)num andPointsArray:(NSArray *)pointsArray withPath:(UIBezierPath *)path
{
    /*
     插值法 使用说明 p1 和 p2 之间插值 要计算 p0 和 p3 
     其中 p0 是 p1 前面的一个点(如果p1已经是数组里第一个点了,那p0就是p1点左下方一点,计算如例)
     p3 是p2 后面的一个点(如果p2已经是最后一个点了,那p3就是p2正右上方的点)
     
     |
     |
     |
     |          .p2
     |
     |
     |                .p3
     |     .p1
     |
     |.p0
     |
     |__________________________________________________
     
     */
    for (int i = 0; i < pointsArray.count-1; i ++) {
        CGPoint p1 = CGPointFromString(pointsArray[i]);
        CGPoint p0;
        if (i == 0) {
            p0 = CGPointMake(p1.x-2, p1.y-2);
            [path moveToPoint:p1];
        }else{
            [path addLineToPoint:p1];
            p0 = CGPointFromString(pointsArray[i-1]);
        }
        CGPoint p2 = CGPointFromString(pointsArray[i + 1]);
        CGPoint p3 ;
        if (i == pointsArray.count - 2) {
            p3 = CGPointMake(p1.x+2, p1.y+2);
        }else{
            p3 = CGPointFromString(pointsArray[i + 2]);
        }

      ////这个是插值算法,不讲了,固定写法,因为我也不会,装B装漏了 -_-|
        for (int i = 1; i <= num; i++) {
            float t = i * (1.0f / num);
            float tt = t * t;
            float ttt = tt * t;
            CGFloat pointx_x = (float) (0.5 * (2 * p1.x + (p2.x - p0.x) * t + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * tt + (3 * p1.x - p0.x - 3 * p2.x + p3.x)
                                               * ttt));
            CGFloat pointx_y = (float) (0.5 * (2 * p1.y + (p2.y - p0.y) * t + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * tt + (3 * p1.y - p0.y - 3 * p2.y + p3.y)
                                               * ttt));
            [path addLineToPoint:CGPointMake(pointx_x, pointx_y)];
        }
    }
}

#pragma mark -- getter/setter 专门负责添加渐变色

- (CAGradientLayer *)gradientLayer
{
    if (!_gradientLayer) {
        _gradientLayer = [CAGradientLayer layer];
        _gradientLayer.frame = self.bounds;
        _gradientLayer.colors = @[(__bridge id)kSetAlColor(kGetColorRed(_lineColor), kGetColorGreen(_lineColor), kGetColorBlue(_lineColor), 0.8).CGColor,(__bridge id)kSetAlColor(kGetColorRed(_lineColor), kGetColorGreen(_lineColor), kGetColorBlue(_lineColor), 0.1).CGColor];///其中渐变层的颜色种类,alpha表示所占的百分比
        _gradientLayer.startPoint = CGPointMake(0, 0);///表示开始的方位(左 ,上)
        _gradientLayer.endPoint = CGPointMake(0, 1);////结束方位(右,下)
    }
    return _gradientLayer;
}

@end

最后是封装的曲线类的使用

- (void)viewDidLoad {
    [super viewDidLoad];
    GradeColorView *colorView = [[GradeColorView alloc]initWithFrame:CGRectMake(80, 120, 250, 250)];
    [colorView updateUIWithPointArray:@[NSStringFromCGPoint(CGPointMake(0,250)),NSStringFromCGPoint(CGPointMake(20, 160)),NSStringFromCGPoint(CGPointMake(40, 100)),NSStringFromCGPoint(CGPointMake(60, 20)),NSStringFromCGPoint(CGPointMake(80, 90)),NSStringFromCGPoint(CGPointMake(100, 120)),NSStringFromCGPoint(CGPointMake(120, 80)),NSStringFromCGPoint(CGPointMake(140, 140)),NSStringFromCGPoint(CGPointMake(160, 190)),NSStringFromCGPoint(CGPointMake(250, 250))] insertNum:19 withLineColor:[UIColor orangeColor]];
    [self.view addSubview:colorView];

}

在下面是数组元素转化便于数组存取的DataGetY类

.h文件

#import <Foundation/Foundation.h>
#define Str(f)   [NSString stringWithFormat:@"%f",f]

@interface DataGetY : NSObject
- (NSMutableDictionary *)makeDownDataWithDataArray:(NSArray *)points;
@end

.m文件

#import "DataGetY.h"
#import <UIKit/UIKit.h>

@implementation DataGetY

- (NSMutableDictionary *)makeDownDataWithDataArray:(NSArray *)points
{
    if (points.count > 0) {
        NSMutableDictionary *dic;
        for (NSString *pointStr in points) {
            CGPoint point = CGPointFromString(pointStr);
            [dic setObject:Str(point.y) forKey:Str(point.x)];
        }
        return dic;
    }
    return nil;
}
@end

下面是插值曲线的效果:


MyImg

推荐阅读更多精彩内容

  • 书写的很好,翻译的也棒!感谢译者,感谢感谢! iOS-Core-Animation-Advanced-Techni...
    钱嘘嘘阅读 1,841评论 0 6
  • 图层树 在UIKit中所有的视图都是基于UIView派生而来,UIView支持触摸时间,可以支持基于CoreGra...
    maguns阅读 1,015评论 1 3
  • 官网中文版 1 简易天空替换## 技能:线性擦除,追踪运动,用颜色键K出人物,用色彩曲线调色。(1)天空图片素材放...
    朱细细阅读 9,430评论 4 82
  • 如何你想某事正确,自己动手做吧。——Charles-Guillaume Étienne 前一章介绍了隐式动画的概念...
    liril阅读 1,026评论 0 3
  • 欲买桂花同载酒,终不似,少年游。 许是雾霾的原因,突然间抽疯用电脑进空间把留言板从第一条翻了个遍。第一...
    刘太阳阅读 660评论 6 18
  • 1-始源 故事发生于11月5号,某商场三名工作人员对着一名怀有三个月身孕的孕妇进行推搡期间,还对她进行掌掴。这时候...
    林大白不白阅读 1,464评论 0 0
  • 不思终生昨日梦 回忆今生事事情 双鬓霜至无问津 只得冷心心痛心
    SmileToLin阅读 113评论 0 3
  • 1 多少年了,我还是记得那天陆羽初识李笑的下午,寒冷...
    土屋之子阅读 500评论 0 1
  • 故乡记忆(八)--我家的青山羊 文/朱秋霞 在农村养一群羊简直是一个家庭富裕的象征。我家只是养了十几只鸡和一头猪,...
    传记撰写者阅读 354评论 0 0