iOS 仿福彩3D走势图

今天下班的路上，路过彩票店看到上面滚动的广告""读书不一定能改变命运，买彩票可以",想想自己大学毕业苦逼的样子,感觉挺有道理的。就进去买了一注，看到墙上的号码的走势图，技术病又犯了，想着它是怎么搞定的。错过了改变命运的机会。

CAShapeLayer

CAShapeLayer属于QuartzCore框架，继承自CALayer。CAShapeLayer是在坐标系内绘制线，根据shape(形状)的path(路径)，
从而绘制各种各样的图形以及不规则图形。因此，使用CAShapeLayer需要与UIBezierPath一起使用。

通俗点就是UIBezierPath用来指定绘制图形路径，而CAShapeLayer就是根据路径来绘图的。

   -(CAShapeLayer*)shapeLayer{
    if (!_shapeLayer) {
        _shapeLayer = [CAShapeLayer layer];
        // 2. 设置ShapeLayer样式
        _shapeLayer.borderWidth = 2; // 线宽
        _shapeLayer.strokeColor = kColorWithHex(0xff3434).CGColor; // 线的颜色
        _shapeLayer.fillColor = [UIColor clearColor].CGColor; // 填充色
        // 3. 给画线的视图添加ShapeLayer
        [self.tableView.layer addSublayer:_shapeLayer];
    }
    return _shapeLayer;
}

UIBezierPath

UIBezierPath类负责绘制和渲染由直线和曲线组成的路径.
你可以在初始化的时候直接为你的UIBezierPath指定一个几何图形。

-(UIBezierPath*)path{
    if (!_path) {
        _path = [UIBezierPath bezierPath];
    }
    return _path;
}

创建UIScrollView 和 UITableView

        self.scrollView = [[UIScrollView alloc] initWithFrame:frame];
        [self addSubview:self.scrollView];
        
        
        self.tableView =[[UITableView alloc] initWithFrame:CGRectMake(0,0, self.frame.size.width, lineHeigh*32) style:UITableViewStylePlain];
        self.tableView.scrollEnabled  = NO;
        self.tableView.rowHeight = lineHeigh;
        self.tableView.separatorInset = UIEdgeInsetsMake(0, -5, 0, 0);
        self.tableView.separatorColor = [UIColor grayColor];
        self.tableView.delegate = self;
        self.tableView.dataSource = self;
        [self.scrollView addSubview:self.tableView];

计算球号在UITableView 上的坐标

            CGRect rect1 = [button convertRect:button.frame fromView:cell.contentView];//获取button在contentView的位置
            CGRect rect2 = [button convertRect:rect1 toView:self.tableView];
            [self.pointArray addObject:NSStringFromCGPoint(CGPointMake(rect2.origin.x+(CGRectGetMaxX(button.frame)-CGRectGetMinX(button.frame))/2, indexPath.row*30+15))];

绘制

   NSMutableArray * tempArray = [NSMutableArray arrayWithObjects:@(0),@(11), nil];
    for (int i=1; i<self.pointArray.count; i++) {
        
        CGPoint point = CGPointFromString(self.pointArray[i-1]);
        CGPoint point1 = CGPointFromString(self.pointArray[i]);
        CGFloat deltaX = point.x - point1.x;
        CGFloat deltaY = point.y - point1.y;
        CGFloat longDepth =  sqrt(deltaX*deltaX + deltaY*deltaY);
        [tempArray addObject:@(longDepth-21)];
        [tempArray addObject:@(21)];
        [self.path addLineToPoint:CGPointFromString(self.pointArray[i])];
    }
    // 4. 设置shapeLayer的路径  使球号区域为虚线
    self.shapeLayer.lineDashPattern = tempArray;
    // 4. 设置shapeLayer的路径
    self.shapeLayer.path = self.path.CGPath;

如果使用动画

    self.shapeLayer.path = self.path.CGPath;
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3;
    pathAnimation.repeatCount = 1;
    pathAnimation.removedOnCompletion = YES;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [self.shapeLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

效果图

数据是假的，胡编的
代码封装的不够彻底 ，只是提供一个思路，如果大家有更好的思路，请留言谢谢
具体代码:https://github.com/ShuiZhongZhiHao/Movements.git