iOS学习:CAShapeLayer与UIBezierPath动画

CAShapeLayer与UIBezierPath动画:

CAShapeLayer与UIBezierPath的动画,就离不开 CABasicAnimation;也将会使用到 strokeEnd、strokeStart、lineWidth 三个属性:

先做一条贝塞尔曲线:

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(40, 80)];
    [path addCurveToPoint:CGPointMake(280, 80)
            controlPoint1:CGPointMake(120, 40)
            controlPoint2:CGPointMake(200, 120)];

    _animLayer = [CAShapeLayer layer];
    _animLayer.path = path.CGPath;
    _animLayer.lineWidth = 2.f;
    _animLayer.strokeColor = [UIColor blackColor].CGColor;
    _animLayer.fillColor = [UIColor clearColor].CGColor;

    [self.view.layer addSublayer:_animLayer];
  • strokeEnd:

    self.animLayer.strokeStart = 0.f;   // 设置起点为 0
    self.animLayer.strokeEnd = 0.f;     // 设置终点为 0

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 3.f;   // 持续时间
    animation.fromValue = @(0); // 从 0 开始
    animation.toValue = @(1);   // 到 1 结束
    // 保持动画结束时的状态
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    // 动画缓慢的进入,中间加速,然后减速的到达目的地。
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.animLayer addAnimation:animation forKey:@""];

  注意:当曲线给了填充色后,填充色是不参与动画的。

    self.animLayer.fillColor = [UIColor grayColor].CGColor;

  

  • strokeStart & strokeEnd:

    self.animLayer.strokeStart = 0.5;
    self.animLayer.strokeEnd = 0.5;
    CABasicAnimation *animationStart = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    animationStart.fromValue = @(0.5);
    animationStart.toValue = @(0);

    CABasicAnimation *animationEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animationEnd.fromValue = @(0.5);
    animationEnd.toValue = @(1.f);
  
    CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
    groupAnimation.duration = 2.f;
    groupAnimation.animations = @[animationStart, animationEnd];
    groupAnimation.removedOnCompletion = NO;
    groupAnimation.fillMode = kCAFillModeForwards;
    [self.animLayer addAnimation:groupAnimation forKey:@""];
  • lineWidth:

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"lineWidth"];
    animation.fromValue = @(2);
    animation.toValue = @(6);
    animation.duration = 2.f;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    [self.animLayer addAnimation:animation forKey:@""];
  • 圆形指示器:

- (void)viewDidLoad {
    [super viewDidLoad]; 

    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(40, 40, 100, 100)];
    _circleLayer = [CAShapeLayer layer];
    _circleLayer.path = path.CGPath;
    _circleLayer.lineWidth = 2.f;
    _circleLayer.strokeColor = [UIColor redColor].CGColor;
    _circleLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:_circleLayer];
}

- (void)circleAnimation {
    self.circleLayer.strokeStart = 0.f;
    self.circleLayer.strokeEnd = 0.f;

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 3.f;   // 持续时间
    animation.fromValue = @(0); // 从 0 开始
    animation.toValue = @(1);   // 到 1 结束
    // 保持动画结束时的状态
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    // 动画缓慢的进入,中间加速,然后减速的到达目的地。
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.circleLayer addAnimation:animation forKey:@""];
}

  

时间: 02-15

iOS学习:CAShapeLayer与UIBezierPath动画的相关文章

iOS关于CAShapeLayer与UIBezierPath的知识内容

使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装.使用此类可以定义常见的圆形.多边形等形状 .我们使用直线.弧(arc)来创建复杂的曲线形状.每一个直线段或者曲线段的结束的地方是下一个的开始的地方.每一个连接的直线或者曲线段的集

IOS CAShapeLayer CAGradientLayer UIBezierPath 使用实例

CGRect rect = CGRectMake(100, 100, 100, 100); UIView * bgView = [[UIView alloc]initWithFrame:rect]; bgView.backgroundColor = [UIColor grayColor]; [self.view addSubview:bgView]; CAShapeLayer * trackLayer = [CAShapeLayer layer]; trackLayer.frame = bgVi

"MindManager"学习iOS系列之"CAAnimation-核心动画"详解,让你的应用“动”起来。

"MindManager"学习iOS系列之"CAAnimation-核心动画"详解,思维导图内展示了CAAnimation-核心动画的大多数基本功能和知识,每个part都有代码讲解,展示出CAAnimation-核心动画的清晰轮廓,编者提供了"JPG"."SWF"."PDF"."Word"."Mmap"格式的源文件供给使用.注意:JPG格式仅为图片总览,SWF格式使用

iOS学习资源收集

https://github.com/Tim9Liu9/TimLiu-iOS 自己总结的iOS.mac开源项目及库,持续更新.... github排名 https://github.com/trending,github搜索:https://github.com/search 目录 UI 下拉刷新 模糊效果 AutoLayout 富文本 图表 表相关与Tabbar 隐藏与显示 HUD与Toast 对话框 其他UI 动画 侧滑与右滑返回手势 gif动画 其他动画 网络相关 网络连接 图像获取 网络

iOS学习笔记-精华整理

iOS学习笔记总结整理 一.内存管理情况 1- autorelease,当用户的代码在持续运行时,自动释放池是不会被销毁的,这段时间内用户可以安全地使用自动释放的对象.当用户的代码运行告一段 落,开始等待用户的操作,自动释放池就会被释放掉(调用dealloc),池中的对象都会收到一个release,有可能会因此被销毁. 2-成员属性:     readonly:不指定readonly,默认合成getter和setter方法.外界毫不关心的成员,则不要设置任何属性,这样封装能增加代码的独立性和安全

2015最新iOS学习线路图

iOS是由苹果公司开发的移动操作系统,以xcode为主要开发工具,具有简单易用的界面.令人惊叹的功能,以及超强的稳定性,已经成为iPhone.iPad 和iPod touch 的强大基础:iOS 内置的众多技术和功能让 Apple设备始终保持着遥遥领先的地位. iOS学习路线:http://www.mobiletrain.org/page/ios.html 课程分  类 课程模块 模块介绍 课程内容 Part1C语言 C语言和Objective-C语言 C语言 Mac系统及常用工具.进制:C数据

iOS学习笔记(3)— 屏幕旋转

iOS学习笔记(3)— 屏幕旋转 一.屏幕旋转机制: iOS通过加速计判断当前的设备方向和屏幕旋转.当加速计检测到方向变化的时候,屏幕旋转的流程如下: 1.设备旋转时,系统接收到旋转事件. 2.系统将旋转事件通过AppDelegate通知当前的主Window. 3.window通知它的rootViewController. 4.rootViewController判断所支持的旋转方向,完成旋转. iOS系统中屏幕旋转事件没有像触碰事件那样进行hitTest,所以只有rootViewControl

我的IOS学习资源收录

IOS7视频教程-storyboard与UIApplication http://v.youku.com/v_show/id_XNzMxMjgwNzEy.html 关东升老师的ios视频教程 iPhone与iPad开发实战-ios经典应用剖析-7大项目实战开发 1第1讲工具类应用密码生成(Amuck Password Generator)57分钟   2第2讲工具类应用密码生成(Amuck Password Generator)52分钟   3第3讲工具类应用--密码生成(Amuck Passw

iOS学习笔记(1)— UIView 渲染和内容管理

iOS学习笔记(1)— UIView 渲染和内容管理 iOS中应用程序基本上都是基于MVC模式开发的.UIView就是模型-视图-控制器中的视图,在iOS终端上看到的.摸到的都是UIView. UIView在屏幕上定义了一个矩形区域和管理区域内容的接口.在运行时,一个视图对象控制该区域的渲染:UIView继承自UIResponder,UIResponder是用来响应事件的类,UIView也具有响应事件的能力.所以说UIView具有三个基本的功能,绘制内容并管理内容的布局,响应用户交互,动画.正是