美文网首页
iOS动画-核心动画

iOS动画-核心动画

作者: 搬砖人666 | 来源:发表于2019-11-27 17:48 被阅读0次

    最近买了几本书,接下来会陆续写写笔记,把书中干货分享出来

    笔记主要总结了书中讲了什么内容,希望读者读完后遇到相应的问题能有一个大致的解决问题的方向。

    iOS动画-核心动画与案例实战 这本书讲的内容不是很深,但是关于iOS动画的知识很全面,阅读门槛不高,实用性的案例非常多,有一定的借鉴意义。

    面试时遇到问动画的东西,把这背出来也能忽悠一下吧

    第一卷:显示层动画

    UIView常用动画合集

    1.颜色渐变动画

    2.缩放动画

    3.旋转动画

    4.位移动画

    5.位置动画

    6.几何形状动画

    7.淡入淡出动画

    8.组合动画

    Layer常用动画合集

    1.圆角动画

    2.边框动画

    3.颜色渐变动画

    4.淡出淡出动画

    5.阴影渐变动画

    6.位置动画

    7.缩放动画

    8.旋转动画

    9.位移动画

    10.组合动画

    常用转场动画合集

    1.movein

    2.reveal

    3.push

    4.fade

    5.pageCurl

    6.pageUnCurl

    7.cube

    8.oglFlip

    9.stuckEffect

    10.rippleEffect

    iOS动画分层结构

    1.内容层动画

    2.显示层动画

    3.3D动画

    4.转场动画

    核心动画类结构
    image
    QuartzCore框架下常用图层
    1.CARelplcatoreLayer
    
    2.CAScrollLayer
    
    3.CATextLayer
    
    4.CAShapeLayer
    
    5.CAEmitterLayer
    
    6.CAGradientLayer
    

    动画实现:

    1.位置动画:设置动画前后frame、bounds或center属性

    2.几何形状动画:更改frame或bounds属性

    3.形状+位置动画:综合位置和几何形状动画,两种动画同时执行即可

    4.淡入淡出动画:更改Alpha属性

    5.颜色渐变动画:更改背景颜色,设置动画时间后即为渐变

    6.缩放动画:UIView有一个非常重要的 动画属性transform,该属性继承于CGAffineTransform, “CG”即CoreGraphics框架,transform最常用的三种动画分别是缩放、旋转和位移。

    核心代码:CGAffineTransform(scaleX: 0.8, y:1.3)
      两个参数分别控制UI组件的宽高缩放比

    重载方法: CGAffineTransform(rotationAngle:angle)参数为旋转角度, iOS的SDK中提供了很多宏定义可用,例:M_PI_4

    UlView动画属性设置:

    1.setAnimationDelay方法用于设置动画延迟执行时间间隔

    2.setAnimationCurve方法用于设置动画加速、减速效果。

    3.setAnimationsEnabled方法用于设置动画是否可以有,它有true和 false两个参数。当设置为false时,动画效果禁止。当设置为true时, 动画效果可以有。

    4.setAnimationDuration方法用于设置动画执行时间周期,该方法 中传递的整型参数单位为秒。例如设置setAnimationDuration(1)表明 动画执行周期为1s。

    5.setAnimationRepeatAutoreverses方法用于设置动画是否有重复。

    6.SetAnimationRepeatCount方法用于设置动画重复执行的次数

    动画可以设置代理:UIView.setAnimationDelegate(self),然后实现默认animationDidStop代理方法,也可以通过setAnimationDidStopSelector自定义回调方法。

    关键帧动画实现原理:如飞机降落动画,添加第一帧和最后一帧即可实现飞机降落,若要实现更精准的控制就需要再多添加几帧。

    核心代码:

    UIView.animateKeyframes(withDuration:2,delay:0,options:UIViewKeyframeAnimationOptions.caIcuIationModeCubic,animations:{})
    

    参数animations: 关键帧动画添加处

    通过关键帧动画也可以实现旋转:如设置4个关键帧,每一帧动画在上一帧的基础上旋转90度实现。

    用一句话可以概括UIView动画和关键帧动画的特点:UIView动画改变得是动画的属性,而关键帧动画需要设置动画在几个关键时刻的UIView。

    显示层逐帧动画:

    实现原理:将图片逐帧渲染,实现动画效果。

    实现方法:

    1.基于NSTime的逐帧刷新,用于动画帧率不高,且帧率间的时间间隔不十分严格的情况。

    2.CADisplayLink的帧刷新效果,刷新频率高达60帧,且非常精确。iOS设备的屏幕刷新率是60HZ,CADisplayLink可以和屏幕保持相同的刷新率将内容渲染。使用时需要注册到runloop中并设置刷新回调。

    3.基于draw方法的逐帧动画效果:draw()方法是UIView中重绘的重要方法,在draw()方法中的修改将直接反应在UIView视图上,而且这种动画不需要事先准备大量的素材,笔者的理解就是在不停调用draw()方法,在draw()方法中手绘每一帧图片。


    GIF动画效果

    需要明确一点:GIF是一种常用于动画效果的图片格式。

    GIF图片的实质就是由多帧静态图按照动作发生的时间顺序

    把一组序列的图片存储到GIF文件中,然后使用相应的播放器播放出来就能形成动画。

    GIF在iOS中的使用场景:

    1.GIF分解为单帧图片

    2.一系列单帧合成GIF

    3.iOS系统上展示GIF动画

    GIF合成与分解:ImageIO.framework

    GIF -> NSData -> ImageIO -> UIImage ->jpg|png

    GIF图片的展示思路:

    1.分解GIF图片为多个单帧图片,播放帧动画。

    2.创建一个webview,然后通过加载data的方式展示出来。


    第二卷:内容层动画

    UIView与CALayer的区别:

    1.UIView继承UIResponder,因此UIView可以处理响应事件,而CALayer继承NSObject,所以它只能负责内容的创建、绘制。

    2.UIView负责对内容的管理,而CALayer则是对内容的绘制。

    3.UIView中的位置属性只有frame、bounds、center,而CALayer除了这些属性外还有anchorPoint、position。

    4.通过修改CALayer可以实现UIView无法实现的很多高级功能。

    本书不区分显示和隐式动画,而把与UIView相关的动画统称为显示层动画,把与CALayer相关的统称为内容层动画。

    Core Animation核心动画

    Core Animation来自iOS的QuartzCore.framework框架,它还具有以下特点:

    1.直接作用于CALayer层,而非UIView。

    2.Core Animation的执行过程在后台执行,不阻塞主线程。

    3.可以利用CALayere绝大多数属性制作高级动画效果。

    @protocol CAMediaTiming有很多动画公共的属性,比如常见的duration(动画执行周期),speed(速度),repeatCount(重复次数)等一些公共属性都放在CAMediaTiming中。

    CAAnimation主要用于实现动画的委托代理方法,比如动画开始事件和动画结束事件都是通过CAAnimation类来实现得到。

    CAPropertyAnimation为属性动画,分为基础动画和关键帧动画。在本节介绍的CALayer内容层动画都是通过CABasicAnimation来实现的,CAKerframeAnimation为关键帧动画,与UIView中的关键帧动画实现原理类似。

    CAAnimationGroup组合动画,顾名思义,利用这个类可以把其他常用动画组合在一起。

    CATransition转场动画,主要用于视图控制器或者多个View之间的视图切换场景。

    CALayer层动画合集

    1.位置动画,例:初始化CABasicAnimation为animiation,一堆设置animiation.xxx = yyy后执行ViewObject.layer.add(animation, forKey:nil),如animation.toValue = NSValue(...)或者animation.byValue = NSValue(...)。

    2.缩放动画,逻辑与位置动画类似,设置animation.keyPath = “transform.scale.x”属性 animition.framValue = 0 .toValue = 1来实现缩放动画。

    3.旋转动画,与缩放逻辑一致,设置animation.keyPath = “transform.rotation”属性来实现旋转动画。

    4.位移动画: animation.keyPath = “transform.translation.y”

    5.圆角动画: animation.keyPath = “cornerRadius”

    6.边框动画: animation.keyPath = “borderWidth”

    7.颜色渐变动画: animation.keyPath = “backgroundColor”

    8.淡入淡出动画: animation.keyPath = “opacity”

    9.阴影渐变动画: animation.keyPath = “shadowOpacity”

    CAKeyFrameAnimation设置一组关键帧可实现:

    1.淡入淡出效果:

    2.任意路径动画


    案例:登录按钮水纹动画

    1.获取点击位置

    2.NSTimer+Draw或者CADisplayerLink+Draw重绘动画帧

    3.可用面向切面编程思想为任意按钮添加水纹效果

    案例:CAEmitterCell粒子动画效果

    在iOS系统中,粒子系统由两部分组成:CAEmitterLayer和CAEmitterCell。

    ( 1 ) CAEmitterLayer 为粒子发射图层。该图层主要用于控制粒子展现范围、粒子发射位 置、粒子发射形状、渲染模式等属性。通过 CAEmitterCell 构建的发射单元都受到 CAEmitterLayer 图层节制,可以说粒子展现必须在 CAEmitteLayer 图层上来实现。

    ( 2 ) CAEmitterCell 粒子发射单元,用于对粒子系统中的单个粒子做更加精细的控制。 L 以口控制粒子的移动速度、方向、范围。在 CAEmitterCell 类中提供了几十种粒子 属性参数设置,所以结合这些属性可以制作各种炫酷的粒子特效动画。如何在 iOS 中使用这两个类呢?首先这里使用的 CAEmitteLayer 属于 CALayer 图层,所以实 例化 CAEmitterLayer 图层之后将其添加到相应 View 的 layer 图层上即可。而 CAEmitterLayer 实例对象有一个 emittercells 属性,该属性描绘了所有的粒子实例 和相应特性,因川各 CAEmitterCell 实例对象传递给 C 版 mitterLayer 、 emitterCells 属性就可以实现粒子动画效果。

    可实现粒子火焰效果和霓虹效果。


    CoreAnimation:CAGradientLayer 梯度动画

    CAGradientLayer是QuartzCore框架下非常重要的类,可实现下列效果:

    1.光波扫描动画效果

    2.指纹扫描

    3.音响音量跳动效果

    CAShapeLayer:

    CAShapeLayer是QuartzCore框架下非常重要的一个类,利用它 可以实现各种图形绘制类动画效果。CAShapeLayer来自iOSffi架下的 核心动画部分, Shape为形状的意思,描述了当前动画的特点,可以 实现各类形状的绘制, Layer表明当前动画并非直接作用于UlView显 示层上,而是作用在Layer内容层上。

    可结合贝塞尔曲线和CAReplicatorLayer实现:

    1.折现图

    2.柱状图

    CAReplicatorLayer:图层复制效果

    1.旋转复制,如地球绕太阳旋转,复制多个地球图像

    2.滚动复制,如音量跳动,只有一个柱子是生成的,其他都是复制前一个的柱子。


    第三卷:3D动画

    iOS中利用CATransform3D实现3D变换效果,CATransform3D其实实质是定义了一个三维变换(4x4 CGFloat矩阵),利用该矩阵实现图层的旋转、缩放、偏移、歪斜和视图透视等功能。


    第四卷:转场动画

    CoreAnimation:CATransition转场动画

    CATransition与CoreAnimation中的CABasicAnimation等相关类的使用方法类似,分为三个步骤:

    1.实例化CATransition,并设置相应的转场动画key

    2.设置合适的转场动画属性,比如动画周期、过度方向、动画保持状态等。

    3.将动画效果添加到相应视图的Layer图层中。

    公有API:

    1.fade淡入淡出

    2.push推送效果

    3.reveal揭开效果

    4.movein移动效果

    私有API:

    1.pageCurl向上翻页,只能用字符串表示

    2.pageUnCurl向下翻页,只能用字符串表示

    3.cube立方体翻转

    4.oglFlip翻转效果

    5.stuckEffect收缩效果

    6.rippleEffect水滴波纹效果

    7.cameralrisHollowOpen相机打开效果

    8.CameralrisHollowClose相机关闭效果

    CATransition可做图片查看器


    视图过渡动画:

    要想自定义视图控制器的过渡动画,需要先了解一下两个协议:

    1.UINavigationControllerDelegate

    2.UIViewControllerAnimatedTransitioning
    UINavigationControllerDelegate是视图控制器使用的委托代理协议,该协议可以代理视图的以下功能:

    1.拦截导航栏视图控制器

    2.拦截视图控制器目标ViewController和源ViewController

    在过渡动画中奖使用UINavigationControllerDelegate的第二个功能,即拦截视图控制器目标ViewController和源ViewController。该功能的回调方法如下所示。

    image

    实际上以上所有的动画都将借助于UIViewControllerAnimationTransition协议,将所有动画效果最终封装成一个实例对象返回给视图控制器UIViewControllerAnimationTransition协议,定义了视图过渡动画的执行周期和执行内容。

    他有两个非常重要的回调:

    image

    transitionDuration方法返回转场动画执行周期。AnimationTransition方法用于构建转场动画的内容。在该方法中可以通过transitionContext属性获取当前的额fromViewController和toViewController。拿到这两个视图控制器后就可以设置当前视图控制器的各种动画效果。

    相关文章

      网友评论

          本文标题:iOS动画-核心动画

          本文链接:https://www.haomeiwen.com/subject/iwqmwctx.html