核心动画
核心动画 CALayer
- UIView之所以能显示在屏幕上,完全是因为它内部有一个图层
- 基本作用
- 调整UIView的一些外观属性
- 阴影
- 圆角大小
- 边框宽度和颜色
- 添加动画
- 调整UIView的一些外观属性
- CALayer基本操作
- .layer.shadowOpacity阴影的不透明度 1.0代表不透明
- .layer.shadowOffset【(正、正)右下】
- .layer.shadowRadius模糊程度默认是3.
- .layer.borderColor--CGColor
- .layer.borderWidth边框宽度
- 往里走
- .layer.cornerRadius圆角
- 阴影、边框对于imageView也适用
- 圆角不适用,因为image不是直接放到layer里面的,而是放到layer内部的contents里的,
- .layer.masksToBounds超出根层以外的内容给裁剪掉,阴影也会被裁减掉
- imageV.clipsToBounds = YES
-
注意
:
- 圆形图片裁剪imageV.layer.ConerRadius + masksToBounds 在tableView中不能使用,耗性能,造成离屏渲染
- 一般使用在个人详情页当中可以使用layer做圆形图片裁剪
- layer的属性
- layer可以单独的去做平移、旋转、缩放的操作
- CATransform3D ,结构体,比UIView功能强大,矩阵操作
-
旋转
- .layer.transform = CATransform3DMakeRotation(旋转角度,x,y,z)
- x,y,z绕着哪个轴旋转
- 绕着哪个轴,哪个值等于1
- CATransform3DRotation(),不带make相对于上一次,多次旋转
- .layer.transform = CATransform3DMakeRotation(旋转角度,x,y,z)
-
平移
- CATransform3DMakeTranslation(x,y,z) - z:有两个view的时候才能体现出来
-
缩放
- CATransform3DMakeScale(x,y,z)
- z一般写1
- CATransform3DMakeScale(x,y,z)
-
KVC
- [.layer setValue:结构体转成对象forKeyPath:@"transform"]
- 把结构体转成对象
- 【NSValue valueWithCATransform3D】
- KVC,一般做一些快速形变时候使用,单独对其某一个值进行修改
- layer setValue:@(0.5)forKeyPath:@"transform.scale.x"
- 官方文档:CATransform3D KeyPath
- 为什么颜色和图片要转成CGColor/CGImage
- 什么时候用CALayer?什么时候用UIView?怎么选择?
- CALayer是定义在QuartzCore框架中的
- CGImageRef/CGColorRef是定义在CoreCraphics框架中的
- UIColor/UIImage是定义在UIKit框架中的
- 通过CALayer能做出和UIImageView一样的界面效果
- UIView多了一个事件处理,继承UIResponder
- CALayer不具备处理事件能力
- 显示出来的东西需要和用户进行交互,用UIView
- CALayer性能高一些,如果不需要与用户交互,不需要事件处理的时候,可以选择CALayer
- 但是开发中一般不用CALayer,因为产品经理改需求的时候会很麻烦
- 多了一种修改view.layer位置的方法
-
position
- CGPoint
- 设置layer在父层当中的位置
- 以父层左上角为原点(0,0)
-
anchorPoint
- 定位点、锚点
- 决定CALayer身上的哪个点会在positon属性所指的位置
- 以自己的左上角为原点
- 取值范围是0~1
- 默认值是(0.5,0.5)
- positon在哪个地方,anchorPoint就定位到哪个地方
- 基本使用
- redLayer.bounds = CGRectMake()
- .view.layer addSublayer:
- .anchorPoint
- 根层:不存在隐式动画
- 非根层:手动创建的CALayer都存在隐式动画
- Animatable Properties
- bounds
- background
- cornerRadius
- 只有非根层才有隐式动画,根层没有隐式动画
-
事务
:把修改的属性,包装成一个事务,捆绑到一起做一个动画- CATransaction setDisableActions:YES 是否取消隐式动画
- setAnimationDuration:设置隐式动画的时间
- begin /commit包裹一个事务,默认就有
- 如何取消隐式动画?
- 设置事务 setDisableAction:YES
- 隐式动画内部都是包装成事务
- imageView 200*200
-
添加秒针
- layer不需要与用户进行交互
- 创建layer,设置尺寸大小,背景色,添加layer
所有的旋转和缩放都是绕着锚点进行的
- anchorPoint锚点(0.5,1)
- 旋转方向——找最短路径,两边相等的时候,默认逆时针
- 顺时针
- 逆时针
- position 表盘宽高的一半,不能用center
- 让秒针开始旋转
- 添加定时器,每隔一秒做一件事情
- NSTimer
- updateTime
- 让秒针开始旋转
- transform = CATransform3D
-
当前是多少秒
- [NSCalendar currentCalendar]
- components:枚举NSCalendarUnitSecond |NSCalendarUnitMinute |NSCalendarUnitHour fromDate:[NSDate date]从什么时候开始,取日历中的哪些组件(年月日时分秒)
- 返回值NSDateComponents * cmp
- cmp.second 就是当前的秒
- cmp.hour
- cmp.minute
- 角度 = 当前多少秒*每一秒旋转的角度
- 角度转弧度:角度*M_PI /180.0(带有参数的宏)
- define angleToRadio(angle) ((angel) *M_PI /180.0)
- 让秒针开始旋转
- 添加定时器,每隔一秒做一件事情
-
添加时针
- 时针旋转
- 角度:curHour *30°
- 分针旋转的时候,时针也要跟着旋转
- 角度 + curMin*0.5°
- 时针旋转
-
添加分针
- updateTimer
- 分针开始旋转
- 角度:curMin *6°
- Core Animation简介
- 核心动画是直接作用在CALayer上面
- 一组非常强大的动画处理API,少量代码实现强大的功能
- 跨平台:Mac osx 和ios
- 动画执行过程后台操作,不会阻塞主线程
- Mac OS X - Core animation视频
- GPU加速
- 核心动画继承结构
- CAAnimation基类
- CAAnimationGroup
- 组动画
- CAPropertyAnimation
- 属性动画
- CABasicAnimation更改值,从一个值到另一个值
- CAKeyframeAnimation 从一个值改成多个值
- value
- path
- 属性动画
- CATransItion
- 转场动画
- CoreAnimation使用步骤
- 必须要有CALayer
- 初始化一个CAAnimation对象,设置一些动画的相关属性
- 平移
- 创建动画对象[CABasicAnimation animation]
- 设置动画属性
- .keyPath = @"position.y"; 属性一定要是layer的属性
- .toValue = https://www.it610.com/article/@400
- .fromValue = https://www.it610.com/article/@0从哪里开始走
- .repeatCount 执行次数
- 把position.y值改成多少
- 添加动画,添加给红色的view
- self.redView.layer addAnimation:forKey:key相当于给动画绑定了一个标识
- 动画完成时,会自动删除动画
- removeOnCompletion = NO不要移除
- 在什么位置?是起始位置还是终点位置
- fillMode动画完成时保存的状态 kCAFillModeForwards
- 系统的宏以k开头
核心动画的本质是去修改layer的属性,修改属性的时候给他添加动画
- 创建动画对象CABasicAnimation
- animationWithKeyPath:
- transform.scale
- toValue = https://www.it610.com/article/@0;
- repeatCount = MAXFLOAT /HUGE
- 设置动画执行时间duration
- autoreverses自动反转(怎么去怎么回来) YES
- 添加动画.layer addAnimation
- 旋转
- 可以加长按手势
- 创建帧动画
- CAKeyframeAnimation
- values 是一个数组类型,可以放旋转的度数(弧度)
- 设置动画的执行次数repeatCount = HUGE
- 反转自动
- autoreverses = YES
- values 里面 再加一个-5的弧度
- 添加动画
- 添加帧动画,根据路径走起来
- 创建帧动画CAKeyframeAnimation
- anim.KeyPath = @"position";
- UIBezierPath
- moveToPoint:
- addLineToPoint:
- addQuadCurveToPoint:
- anim.path = path.CGPath
- anim.repeatCount = HUGE
- anim.duration
- anim.rotationMode = @"autoReverse"
- calculationMode时间计算模式 = @“paced”
- addAnimation
- 图片切换
- 添加转场动画
- CATransition
- .type = @"cube"转场动画类型
- push
- suckEffect收缩到父控件的左上角
- 翻页效果pageCurl
- 上下左右翻转oglFlip
- subtype设置方向 @“fromRight"
- addAnimation
- 【核心动画】注意:转场代码 和转场动画,必须要在同一个方法,不分上下的顺序,只要在同一个方法里,才能做出动画效果
- CAAnimationGroup
- animations可以往数组里面放动画对象
- 会自动执行数组当中的动画对象
UIView动画和核心动画的区别
- 1.核心动画只作用在layer上面
- 2.核心动画,看到的一切都是假象,它并没有修改view的真实位置
- 3.需要与用户进行交互的时候不能使用核心动画
- 什么时候使用核心动画?什么时候使用UIView动画
- 当需要与用户交互时,必须要使用UIView动画
- 当不需要与用户交互时,两者都可以
- 想要做转场动画,需要使用核心动画,转场类型比较多
- 当要做帧动画的时候,或者根据路径做动画的时候,必须要使用核心动画
- 如何监听动画完成
- animation.delegate = self;
- 任何对象不需要遵守协议就可以成为代理
- animationDidStart:finished;
推荐阅读
- 期刊|期刊 | 国内核心期刊之(北大核心)
- 活跃社群的核心标准是什么()
- VueX--VUE核心插件
- 2018-04-16动画练习作业
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- 核心
- 好看的动画都有一只有趣的动物,CoCo也不例外
- 深度学习-入门
- 一起走的学习之路(176)
- vue|vue canvas 手绘进度条动画