核心动画

核心动画

CALayer

• 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做圆形图片裁剪

transform3D

• layer的属性
• layer可以单独的去做平移、旋转、缩放的操作
• CATransform3D ,结构体，比UIView功能强大，矩阵操作
• 旋转
  • .layer.transform = CATransform3DMakeRotation(旋转角度，x，y,z)
    • x，y,z绕着哪个轴旋转
    • 绕着哪个轴，哪个值等于1
  • CATransform3DRotation(),不带make相对于上一次，多次旋转
• 平移
  • CATransform3DMakeTranslation(x,y,z) - z：有两个view的时候才能体现出来
• 缩放
  • CATransform3DMakeScale(x,y,z)
    • z一般写1

• KVC
  • [.layer setValue:结构体转成对象forKeyPath:@"transform"]
  • 把结构体转成对象
  • 【NSValue valueWithCATransform3D】
  • KVC，一般做一些快速形变时候使用，单独对其某一个值进行修改
  • layer setValue:@(0.5)forKeyPath:@"transform.scale.x"
  • 官方文档：CATransform3D KeyPath

自定义CALayer

• 为什么颜色和图片要转成CGColor/CGImage
• 什么时候用CALayer?什么时候用UIView?怎么选择？
• CALayer是定义在QuartzCore框架中的
• CGImageRef/CGColorRef是定义在CoreCraphics框架中的
• UIColor/UIImage是定义在UIKit框架中的
• 通过CALayer能做出和UIImageView一样的界面效果
  • UIView多了一个事件处理，继承UIResponder
  • CALayer不具备处理事件能力
  • 显示出来的东西需要和用户进行交互，用UIView
  • CALayer性能高一些，如果不需要与用户交互，不需要事件处理的时候，可以选择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

• 平移

  • 创建动画对象[CABasicAnimation animation]
  • 设置动画属性
    • .keyPath = @"position.y";属性一定要是layer的属性
    • .toValue = @400
    • .fromValue = @0从哪里开始走
    • .repeatCount 执行次数
    • 把position.y值改成多少
  • 添加动画，添加给红色的view
    • self.redView.layer addAnimation:forKey:key相当于给动画绑定了一个标识
  • 动画完成时，会自动删除动画
    • removeOnCompletion = NO不要移除
    • 在什么位置？是起始位置还是终点位置
      • fillMode动画完成时保存的状态 kCAFillModeForwards
      • 系统的宏以k开头

• 核心动画的本质是去修改layer的属性，修改属性的时候给他添加动画

心跳效果

• 创建动画对象CABasicAnimation
  • animationWithKeyPath:
  • transform.scale
• toValue = @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；