核心动画知识点

1> CALayer简介

2>  属性和新建图层

* 01-CALayer01-基本使用

掌握

* 怎么设置阴影:shadowOpacity,shadowRadius + 解释圆角半径 + 边框 达到效果:太阳发光

* 比较特殊的View:UIImgeView + UIImageView圆角半径 + 主层和contents + 裁剪 + 阴影无效,达到效果,圆形头像

* 可以改变图层的形变属性:touchBegin

* 怎么旋转图层:给三维坐标系的点,与原点形成向量,绕着向量旋转,加动画演示旋转效果

* 怎么利用KVC改变形变

KVC注意点:

1> 给对象的哪个属性赋值,就写到keyPath里面。

2> value的值一定是属性的类型才行

* 如何快速二维旋转:ketPath为transform.rotation

* 缩放注意:z轴不需要缩放,为1就好。

* KVC的好处:利用KVC可以快速的进行二维旋转和,宽,高同时缩放.

*讲解顺序 阴影 -> 圆角半径 -> 边框 -> -> UIImageView圆角半径 ->transform -> KVC

* 02-CALayer02-新建图层

掌握

怎么显示自己的图层,直接加到控制器view的图层,还得设置位置和尺寸,背景。

怎么给layer设置图片,设置contents:看头文件,contents必须是CGImageRef,UIImage先转CGImageRef在转id。

为什么图层要的图片和颜色使用CoreGraphics框架,不直接用UIKit框架。PPT解释CALayer的疑惑

图层也可以显示,为什么还要UIView,PPT解释CALayer的选择

讲解顺序 创建图层 -> 位置 -> 背景 -> 内容 -> CALayer疑惑 -> CALayer的选择

3> 讲解两个非常重要的属性position和anchorPoint锚点

掌握

什么是position

什么是anchorPoint,他的取值范围,他在图层的哪个位置,

*讲解顺序 PPT解释 -> 注意点:0~1,1表示一个单位。 -> position设置图层的位置 -> 一个图层中很多点,哪个点移动到position.

4> 隐式动画

03-CALayer03-隐式动画

掌握:

只有非rootCalyer才有隐式动画。

如何学习哪些属性有隐式动画,跳进CALayer头文件,找animatable。

怎么演示隐式动画,点击屏幕就改变属性。

怎么取消隐式动画,每执行一个动画,开启一个事物CATransaction,只要setDisableActions等于YES就好

*讲解顺序 PPT解释 -> 监听控制器的点击,点一下改变下属性 -> 背景颜色,位置,边框,圆角半径

5> 时钟-自定义图层

程序思路:

* 了解时钟由什么组成的,使用哪些控件。(UIImgeView,CALayer)

* 为什么不使用UIView,而使用CALayer,需要监听事件吗?

* 现实生活中秒针是怎么旋转的,绕着时钟的中点转,PPT演示,拖一根秒针线条

* 在ios中默认是绕着中心点旋转的,因为锚点默认在图层的中点,要想绕着下边中心点转,需要改变图层锚点的位置。

* 根据锚点,设置position坐标,为时钟的中点。

* 思考秒针旋转的角度,怎么知道当前秒针旋转到哪,当前秒针旋转的角度 = 当前秒数 * 每秒转多少°。

1> 计算一秒转多少° 360 * 60 = 6

2> 获取当前秒数,通过日历对象,获取日期组成成分 NSCalendar -> NSDateComponents -> 获取当前秒数

* 每隔一秒,获取最新秒数,更新时钟。

* 分钟一样的做法

* 时钟也一样

1.每一分钟,时钟也需要旋转,60分钟 -> 1小时 - > 30°  ==》 每分钟 30 / 60.0  一分钟时针转0.5°

* 把时针和秒针头尾变尖,设置圆角半径

6> 核心动画01-CABasicAnimation

*    PPT简介

*  Core Animation是直接作用在CALayer上的,并非UIView。

*  Core Animation结构

*  Core Animation 使用步骤

*  代码演示

* 创建CALayer

* touchBegin,点击屏幕,做动画

* 创建动画,添加动画到CALayer

* 怎样执行动画?执行动画的本质是改变图层的属性。

* 告诉动画执行怎样的动画?设置动画属性(position)

* 告诉动画属性怎么改变?设置动画属性值改变 toValue fromValue

* duration:动画时长

* 动画有反弹?取消反弹

1> 执行动画完毕不要移除

2> 设置动画填充模式,保持最新的位置。

* rotation:

三维旋转:transform

二维旋转:transform.rotation

* scale

* 设置图层内容(心)

* tovalue:@0.5

* 总结CABasicAnimation只能在两个值之间做动画,怎么多个值做动画,用CAKeyframeAnimation

7> CAKeyframeAnimation

* 面向view开发,拖一个view

* values:能多个值之间做动画,按照顺序做。

* path

* 动画节奏(timingFunction)

* 代理

8> * 图标抖动

* PPT分析,左边旋转右边旋转 -> keyPath(transform.rotation) -> values -> 有点瘸 -> PPT分析 -> values添加一个值

9> * CATransition

过度动画又叫转场动画 -> type(转场类型) -> subtype(方向) -> 动画进度

注意:转场动画必须和过度代码放在一块,否则没有效果

10> * CAAnimationGroup

同时进行多种动画 -> 平移,旋转,缩放 -> 取消反弹

11> * UIView封装的动画

* 什么时候用核心动画,什么时候用UIView动画

* 核心动画的缺点:都是假象,不能真正改变图层属性的值

* 展示和真实的位置不同

* 如果改变位置就用UIView的动画

* 转场动画就用核心动画

* 为什么转场用核心动画?因为UIView的转场动画太少。

* 演示UIView的转场动画

* touchBegin,切换图片

12> 转盘

* 看素材分析控件(2个UIImgeView,1个按钮)

* 自定义HMWheelView(处理转盘功能,以后其他项目直接拷贝就好了)

* xib描述(界面固定,按钮有两种状态的图片)

* 添加按钮,父控件是中间的那个UIImgeView,只有他需要旋转。

* 在awakeFormNib添加,initWithCoder还没连线。

* 按钮的位置:PPT分析,所有按钮的frame都一样,但是根据不同的角标,旋转不同的角度,相对上一个都旋转30°。

1> 设置锚点:旋转是绕着锚点旋转的

2> 设置position

3> 设置尺寸

4> 形变,旋转按钮

* 按钮选中的背景

* 监听按钮点击,允许父控件交互。

* 裁剪大图片

* CGImageCreateWithImageInRect(CGImageRef image, CGRect rect)

* image:裁剪的图片 rect:裁剪的尺寸

* CGImageRef 是 像素,而我们传的是点坐标,转换坐标系

* 旋转转盘:不能用核心动画

* 搞个定时器,每隔一段时间旋转一点角度,一秒旋转45°,每次旋转45/60,因为一秒调用60次,那个方法

* 给外界提供开始旋转和停止旋转两个方法

* 监听开始旋转按钮

1> 不需要和用户交互,用核心动画

2> 快速旋转的时候,暂停定时器,不需要同时旋转,会有问题

* 旋转完之后,需要处理的业务逻辑

1> 允许用户交互

2> 选中按钮回到最上面中间位置,只要旋转按钮才知道自己旋转了多少,反向旋转这么多角度就好了,用make,把之前的旋转全部清空。

3> 2秒后自动旋转

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,461评论 6 30
  • 核心动画 CAlayer 图层颜色都是CGColor 每个View都有涂层系统帮你创建的层是主/根层 每个层都有个...
    Shawn_阅读 468评论 0 1
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,091评论 5 13
  • 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你...
    Yiart阅读 3,786评论 3 34
  • 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你...
    被吹落的风阅读 1,545评论 1 2