正文
贝塞尔曲线 & CAShapeLayer & Stroke 动画 浅谈
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
转载自：http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qiaoqiaoqiao2014/article/details/46928787
1.CAShapeLayer简介
1.1CAShapeLayer继承于CALayer,可以使用CALayer的所有属性值；
1.2CAShapeLayer需要贝塞尔曲线配合使用才有意义（也就是说才有效果）
1.3使用CAShapeLayer(属于CoreAnimation)与贝塞尔曲线可以实现不在view的drawRect（继承于CoreGraphics走的是CPU,消耗的性能较大）方法中画出一些想要的图形
1.4CAShapeLayer动画渲染直接提交到手机的GPU当中，相较于view的drawRect方法使用CPU渲染而言，其效率极高，能大大优化内存使用情况
2.CAShapeLayer使用
2.1代码展示
1.贝塞尔曲线与CAShapeLayer的关系
1.1CAShapeLayer需要一个形状才能生效，贝塞尔曲线可以创建基于矢量的路径，进而可以给CAShapeLayer提供路径，路径会闭环。
1.2贝塞尔曲线作为CAShapeLayer的path，其path是一个首尾相接的闭环的曲线。
2.实际应用
2.2画椭圆
2.2画矩形，画圆形的方法和上边的一致，只是画图时调用的方法不一致而已。
3.注意：贝塞尔曲线与CAShapeLayer的frame值互不干扰，贝塞尔曲线只不过是要放在CAShapeLayer层上而已，所以CAShapeLayer的frame.size不能小于贝塞尔曲线的frame.size,masksToBounds是CAShapeLayer的一个属性，禁止贝塞尔曲线的路径超出CAShapeLayer的frame范围。
4.StrokeStart与StrokeEnd的用法
4.1用法步骤：
4.1.1将ShapeLayer的fillColor设置成透明色
4.1.2设置边缘线的宽度
4.1.3设置边缘线的颜色
4.1.4将strokeStart值设为0，让strokeEnd的值变化，进而触发隐式动画
4.1.5采用计时器让其变化
4.2事例应用
效果图，此效果图是渐变滑动的，类似于扣扣登陆的等待转动视图，大家可以去我的博客资源里面去下载demo哦。
贝塞尔曲线 & CAShapeLayer & Stroke 动画 浅谈的更多相关文章- 贝塞尔曲线与CSS3动画、SVG和canvas的应用
简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfe ...
- iOS 自定义转场动画浅谈
代码地址如下:http://www.demodashi.com/demo/11612.html 路漫漫其修远兮,吾将上下而求索 前记 想研究自定义转场动画很久了,时间就像海绵,挤一挤还是有的,花了差不 ...
- 可视化n次贝塞尔曲线及过程动画演示--大宝剑
起因 研究css中提供了2次.3次bezier,但是没有对n次bezier实现.对n次的实现有很大兴趣,所以就用js的canvas搞一下,顺便把过程动画模拟了一下. 投入真实生产之中,偏少. n次be ...
- iOS UIView 动画浅谈
UIView 等会效果简单实现,哪一个登录页面的demo来举例子吧. + (void)animateWithDuration:(NSTimeInterval)duration animations:( ...
- JS模拟CSS3动画-贝塞尔曲线
一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...
- CSS总结六：动画(一)ransition:过渡、animation:动画、贝塞尔曲线、step值的应用
transition-property transition-duration transition-timing-function transition-delay animation-name a ...
- 用Canvas实现Photoshop的钢笔工具（贝塞尔曲线）
前两天在用Canvas实现一个绘制路径的小功能.做完之后发现加以完善可以“复刻”一下PS里面的钢笔工具. PS里的钢笔工具对我来说是PS中最好用的工具! 所以本文主要介绍如何用Canvas来实现Pho ...
- 贝塞尔曲线与CAShapeLayer的关系以及Stroke动画
1.贝塞尔曲线与CAShapeLayer的关系 1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环. ...
- 浅谈贝塞尔曲线以及iOS中粘性动画的实现
关于贝塞尔曲线,网上相关的文章很多,这里我主要想用更简单的方法让大家理解贝塞尔曲线,当然,这仅仅是我个人的理解,如有错误的地方还请大家能够帮忙指出来,这样大家才能一起进步. 贝塞尔曲线,常用到的可分为 ...
随机推荐- php curl 发送 json 数据
$urlcon= 'http://localhost/******.php'; $data=' { "button":[ { "type":"clic ...
- ubuntu下搭建lamp
一.使用apt-get方式为Ubuntu安装PHP+MYSQL+Apache 分别执行如下命令: (1)安装MYSQL sudo apt-get install mysql-server ...
- GA遗传算法解析
LinJM @HQU 谈及遗传算法,我首先想到的就是孟德尔的豌豆实验.当然,遗传算法实质上并不能用豌豆实验说明,豌豆实验探讨了分离定律和自由组合定律,而遗传算法所借鉴的并不是这两个定律.遗传算法,简 ...
- Python读取Yaml文件
近期看到好多使用Yaml文件做为配置文件或者数据文件的工程,随即也研究了下,发现Yaml有几个优点:可读性好.和脚本语言的交互性好(确实非常好).使用实现语言的数据类型.有一个一致的数据模型.易于实现 ...
- werkzeug中reloader的实现
在用flask开发时,如果把use_reloader设为True(debug设为True也能实现),那当你修改了app代码或调用环境发生改变时,服务器会自动重启,如下 * Detected chang ...
- ThinkPHP 3.1.2 模板的使用技巧
本节课大纲: 一.模板包含 <include file="完整模板文件名" /> <include file="./Tpl/default/Public ...
- 套接字API
Q:套接字特点 A:管道,消息队列,信号量,共享内存这些通信机制只能允许同一计算机上运行的进程相互通信,而套接字不仅可以提供在同一计算机上的进程间通信,还可以提供不同计算机上的进程间通信. 服务器端: ...
- C# 图片识别
项目需要识别图片上的信息,网上搜索试了Asprise-OCR.Microsoft Office Document Imaging(Office 2007) 组件实现两种方式,后者可以识别中文等其他语言 ...
- 关于django1.7.7使用ajax后出现“CSRF token missing or incorrect”问题的解决办法
最近使用Python3.3.25和django1.7.7开发公司项目,在使用ajax来post数据时,居然一直提示:403错误,原因是“CSRF token missing or incorrect” ...
- （转）PaperWeekly 第二十二期---Image Caption任务综述
本文转自:http://mp.weixin.qq.com/s?__biz=MzIwMTc4ODE0Mw==&mid=2247484014&idx=1&sn=4a053986f5 ...
简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfe ...
代码地址如下:http://www.demodashi.com/demo/11612.html 路漫漫其修远兮,吾将上下而求索 前记 想研究自定义转场动画很久了,时间就像海绵,挤一挤还是有的,花了差不 ...
起因 研究css中提供了2次.3次bezier,但是没有对n次bezier实现.对n次的实现有很大兴趣,所以就用js的canvas搞一下,顺便把过程动画模拟了一下. 投入真实生产之中,偏少. n次be ...
UIView 等会效果简单实现,哪一个登录页面的demo来举例子吧. + (void)animateWithDuration:(NSTimeInterval)duration animations:( ...
一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...
transition-property transition-duration transition-timing-function transition-delay animation-name a ...
前两天在用Canvas实现一个绘制路径的小功能.做完之后发现加以完善可以“复刻”一下PS里面的钢笔工具. PS里的钢笔工具对我来说是PS中最好用的工具! 所以本文主要介绍如何用Canvas来实现Pho ...
1.贝塞尔曲线与CAShapeLayer的关系 1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环. ...
关于贝塞尔曲线,网上相关的文章很多,这里我主要想用更简单的方法让大家理解贝塞尔曲线,当然,这仅仅是我个人的理解,如有错误的地方还请大家能够帮忙指出来,这样大家才能一起进步. 贝塞尔曲线,常用到的可分为 ...
- php curl 发送 json 数据
$urlcon= 'http://localhost/******.php'; $data=' { "button":[ { "type":"clic ...
- ubuntu下搭建lamp
一.使用apt-get方式为Ubuntu安装PHP+MYSQL+Apache 分别执行如下命令: (1)安装MYSQL sudo apt-get install mysql-server ...
- GA遗传算法解析
LinJM @HQU 谈及遗传算法,我首先想到的就是孟德尔的豌豆实验.当然,遗传算法实质上并不能用豌豆实验说明,豌豆实验探讨了分离定律和自由组合定律,而遗传算法所借鉴的并不是这两个定律.遗传算法,简 ...
- Python读取Yaml文件
近期看到好多使用Yaml文件做为配置文件或者数据文件的工程,随即也研究了下,发现Yaml有几个优点:可读性好.和脚本语言的交互性好(确实非常好).使用实现语言的数据类型.有一个一致的数据模型.易于实现 ...
- werkzeug中reloader的实现
在用flask开发时,如果把use_reloader设为True(debug设为True也能实现),那当你修改了app代码或调用环境发生改变时,服务器会自动重启,如下 * Detected chang ...
- ThinkPHP 3.1.2 模板的使用技巧
本节课大纲: 一.模板包含 <include file="完整模板文件名" /> <include file="./Tpl/default/Public ...
- 套接字API
Q:套接字特点 A:管道,消息队列,信号量,共享内存这些通信机制只能允许同一计算机上运行的进程相互通信,而套接字不仅可以提供在同一计算机上的进程间通信,还可以提供不同计算机上的进程间通信. 服务器端: ...
- C# 图片识别
项目需要识别图片上的信息,网上搜索试了Asprise-OCR.Microsoft Office Document Imaging(Office 2007) 组件实现两种方式,后者可以识别中文等其他语言 ...
- 关于django1.7.7使用ajax后出现“CSRF token missing or incorrect”问题的解决办法
最近使用Python3.3.25和django1.7.7开发公司项目,在使用ajax来post数据时,居然一直提示:403错误,原因是“CSRF token missing or incorrect” ...
- （转）PaperWeekly 第二十二期---Image Caption任务综述
本文转自:http://mp.weixin.qq.com/s?__biz=MzIwMTc4ODE0Mw==&mid=2247484014&idx=1&sn=4a053986f5 ...
