关闭

UIBezierPath和CAShapeLayer结合绘制任意弧度的圆形(包含旋转动画)

标签: 动画uibezierpathcashaperlayer
1521人阅读 评论(0) 收藏 举报
分类:

       首先来看一张要绘制弧度圆的图片,从图中可知中心点的坐标为(150,150),弧度的半径为75(radius),起始点为0°开始到135°,代码中的pi为3.14159265359,如下图所示:


      来看一下具体是如何实现的,代码部分如下:

#import "ViewController.h"

#define pi 3.14159265359
#define DEGREES_TO_RADIANS(degress) ((pi * degress)/180)

@interface ViewController ()

@property (nonatomic,strong) CAShapeLayer *shapeLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CALayer *testLayer = [CALayer layer];
    testLayer.backgroundColor = [UIColor clearColor].CGColor;
    testLayer.frame = CGRectMake(100, 100, 100, 100);
    [self.view.layer addSublayer:testLayer];
    
    _shapeLayer = [CAShapeLayer layer];
    _shapeLayer.fillColor = [UIColor clearColor].CGColor;
    _shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
    _shapeLayer.lineCap = kCALineCapRound;
    _shapeLayer.lineWidth = 7;
    
    UIBezierPath *thePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:50-3.5 startAngle:0 endAngle:DEGREES_TO_RADIANS(135) clockwise:YES];
    _shapeLayer.path = thePath.CGPath;
    [testLayer addSublayer:_shapeLayer];
    
}
           查看一下运行效果:


        根据要求,可以看到绘制出了一个135°角的弧度圆,接下来让这个弧度圆做一个简单的绕z轴旋转360°的动画。在最后面添加这句话,代码如下:

    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"transform.rotation.z";
    animation.duration = 4.f;
    animation.fromValue = @(0);
    animation.toValue = @(2*M_PI);
    animation.repeatCount = INFINITY;
    
    [testLayer addAnimation:animation forKey:nil];
                看一下运行效果:


       希望对你有帮助微笑

1
0
查看评论

iOS-利用UIBezierPath和CAAnimation制作心跳动画

空闲之余,练习下UIBezierPath进行绘图和CAAnimation动画的使用,制作了一个心跳的动画,很简单的示例GIF示例:核心代码1-首先通过 drawRect 绘制心形view- (void)drawRect:(CGRect)rect { // 间距 CGFloat pa...
  • Mazy_ma
  • Mazy_ma
  • 2017-02-15 18:17
  • 1926

iOS-利用UIBezierPath和CAAnimation制作路径动画

继上篇的心跳动画,今天实现一个根据心跳路径实现一个路径动画,让某一视图沿着路径进行运动.核心代码1-首先通过 drawRect 绘制心形路径- (void)drawRect:(CGRect)rect { // Drawing code // 初始化UIBezierPath U...
  • Mazy_ma
  • Mazy_ma
  • 2017-02-16 10:47
  • 3397

UIBezierPath 画圆弧(角度问题)

UIBezierPath通过 - (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockw...
  • benyoulai5
  • benyoulai5
  • 2015-10-27 21:21
  • 987

iOS 通过UIBezierPath和CAShapeLayer绘制圆形进度条

不需要重写drawRect方法绘制圆形进度条,希望对大家有帮助 //创建显示进度label _progressLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 150, 100)]; _progressLabel.fo...
  • u012661893
  • u012661893
  • 2016-04-21 01:20
  • 740

iOS CAShapeLayer和UIBezierPath绘图

前言1、UIBezierPathUIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径。此类是Core Graphics框架关于path的一个OC封装。使用此类可以定义常见的圆形、多边形等形状 。我们使用直线、弧(arc)来创建复杂的曲线形状。每一个直线...
  • u010545480
  • u010545480
  • 2016-02-16 17:11
  • 921

IOS-CAShapeLayer与UIBezierPath的基本用法

##1.CAShapeLayer CAShapeLayer顾名思义,继承于CALayer。 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具体的形状由其path(类型为CGPathRef)属性指定。 普通的CALayer是矩形,所以需要frame属性。C...
  • Arnly
  • Arnly
  • 2016-03-11 10:54
  • 2004

利用CAShapeLayer和UIBezierPath实现中空透明圆,圆外填充色

CAShapeLayer和UIBezierPath结合,调用CAShapeLayer的path属性,然后再实现CAShapeLayer的fillcolor属性,便可以在UIBezierPath所绘制的路径内填充颜色。顺着这个思路,来实现一下:
  • w_x_p
  • w_x_p
  • 2016-01-21 14:03
  • 2690

CAShapeLayer + UIBezierPath结合动画效果

先简单的介绍下CAShapeLayer 1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性 2,CAShapeLayer需要和贝塞尔曲线配合使用才有意义。 Shape:形状 贝塞尔曲线可以为其提供形状,而单独使用CASha...
  • ideaspress
  • ideaspress
  • 2016-03-18 11:41
  • 1830

UIBezierPath + CAShapeLayer (弧形 + 线条)

最近又再次 折腾了一下   UIBezierPath + CAShapeLayer 绘图。 图形是这样的    (灰色部分)。 然后有人建议 找美工切图,然后我感觉这个 应该可以 绘图出来, 毕竟能不切图就不切图。 图片上面的数字 看代码 ...
  • liwenjie0912
  • liwenjie0912
  • 2015-08-29 12:04
  • 2410

CAShapeLayer和UIBezierPath

一:贝塞尔曲线 UIBezierPath使用UIBezierPath类可以创建基于矢量的路径,这个类再UIKit中。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。1、UIBezierPath基础UIBezie...
  • xiaoxiaobukuang
  • xiaoxiaobukuang
  • 2015-12-24 01:40
  • 1835
    个人资料
    • 访问:80809次
    • 积分:1167
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:6篇
    • 译文:0篇
    • 评论:45条
    最新评论