首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >画线动画、平滑过渡曲线

画线动画、平滑过渡曲线

作者头像
Helloted
发布2022-06-07 13:38:04
发布2022-06-07 13:38:04
1.6K0
举报
文章被收录于专栏:HellotedHelloted

一、动画画线

1、创建CAShaperLayer
代码语言:javascript
复制
    //创建出CAShapeLayer
    _shapeLayer = [CAShapeLayer layer];
    _shapeLayer.frame = self.view.bounds;//设置shapeLayer的尺寸和位置
    _shapeLayer.position = self.view.center;
    _shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor
2、定义线条
代码语言:javascript
复制
    //设置线条的宽度和颜色
    _shapeLayer.lineWidth = 1.0f;
    _shapeLayer.strokeColor = [UIColor redColor].CGColor;
3、设置线条路径
代码语言:javascript
复制
    CGPoint point_1 = CGPointMake(100, 100);
    CGPoint point_2 = CGPointMake(120, 150);
    CGPoint point_3 = CGPointMake(200, 200);
    NSMutableArray *array = [NSMutableArray arrayWithObjects:@(point_1),@(point_2),@(point_3), nil];
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:[[array firstObject] CGPointValue]];
    
    NSIndexSet *indexSet = [NSIndexSet indexSetWithIndexesInRange:NSMakeRange(1, [array count] - 1)];
    [array enumerateObjectsAtIndexes:indexSet
                                      options:0
                                   usingBlock:^(NSValue *pointValue, NSUInteger idx, BOOL *stop) {
                                       [path addLineToPoint:[pointValue CGPointValue]];
                                   }];
    path.usesEvenOddFillRule = YES;
4、添加动画
代码语言:javascript
复制
    //创建动画
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];
    animation.fromValue = @0.0;
    animation.toValue = @1.0;
    animation.duration = 2;//动画时间;
    [_shapeLayer addAnimation:animation forKey:NSStringFromSelector(@selector(strokeEnd))];
5、效果

二、平滑曲线

代码语言:javascript
复制
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    [aPath moveToPoint:CGPointMake(20, 50)];
    [aPath addCurveToPoint:CGPointMake(200, 50) controlPoint1:CGPointMake(110, 0) controlPoint2:CGPointMake(110, 100)];

https://github.com/helloted/Demo_for_WebSite/tree/master/DrawLineDemo

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、动画画线
    • 1、创建CAShaperLayer
    • 2、定义线条
    • 3、设置线条路径
    • 4、添加动画
    • 5、效果
  • 二、平滑曲线
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档