iOS 动画整理

作者: osbornZ | 来源:发表于2016-03-02 01:27 被阅读1393次

    Core Animation

    Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Layer Kit这么一个不怎么和动画有关的名字演变而来,所以做动画这只是Core Animation特性的冰山一角。

    CALayer 有一个属性叫做contents,这个属性的类型被定义为id,意味着它可以是任何类型的对象。在这种情况下,你可以给contents属性赋任何值,你的app仍然能够编译通过。但是,在实践中,如果你给contents赋的不是CGImage,那么你得到的图层将是空白的。
    contents这个奇怪的表现是由Mac OS的历史原因造成的。它之所以被定义为id类型,是因为在Mac OS系统上,这个属性对CGImage和NSImage类型的值都起作用,而如果你试图在iOS平台上将UIImage的值赋给它,只能得到一个空白的图层。

    在iOS上,一个图层的position位于父图层的左上角,由于锚点(anchorpoint默认为(0.5,0.5))但是在Mac OS上,通常是位于左下角。Core Animation可以通过geometryFlipped属性来适配这两种情况,它决定了一个图层的坐标是否相对于父图层垂直翻转,是一个BOOL类型。在iOS上通过设置它为YES意味着它的子图层将会被垂直翻转,因此有时候会出现图像倒置的原因。
    和UIView严格的二维坐标系不同,CALayer存在于一个三维空间当中。
    CATransform3D 3D变化,以及改变图层的显示顺序。

    显示形态

    • 隐式动画
    • 显示动画
    • 过渡
      iOS 5 带来 CoreImage后,可以通过 CATransition 的 filter属性,CIFilter 创建过渡动画。
      (自定义过渡效果:过渡动画的基础原则就是对原始图层的外观截图,然后添加一段动画后平滑的过渡到图层改变之后的效果。 CALayer 的 -renderInContext: 把它绘制到当前上下文中捕获的内容图片,然后在另外的视图中显示出来,将截图放置在原始视图之上)

    动画类别

    • Layer动画
    • UIView控件
    • UIViewConroller转场动画 Secret制造商最近发布了一个新App叫做Ping,用户可以收到他们感兴趣内容的消息,主屏幕和菜单之间的动画 ping
    • icon间的过渡动画 icon 过渡
      Link "Animation"

    Core Animation 维护了两个平行 layer 层次结构: model layer tree(模型层树) 和 presentation layer tree(表示层树)。前者中的 layers 反映了我们能直接看到的 layers 的状态,而后者的 layers 则是动画正在表现的值的近似。虽然你可能不会去直接设置 presentation layer 的属性,但是使用它的当前值来创建新的动画或者在动画发生时与 layers 交互是非常有用的。

    通过使用 -[CALayer presentationLayer] 和 -[CALayer modelLayer],你可以在两个 layer 之间轻松切换。
    基本动画
    x(t) = x0 + t△x; 线性插值的方法来实现的
    CABasicAnimation 路径的实现存在 完整路径

    多步动画
    CAKeyframeAnimation
    关键帧(keyframe)使我们能够定义动画中任意的一个点,然后让 Core Animation 填充所谓的中间帧。

    CATranstion(事务) 整个图层内容过渡的效果。
    begin -> commit

    沿路径的动画
    复杂的路径实现,需要在关键帧values中存储大量的CGPoint。 而更加便利的path属性,
    例如 CGPathCreateWithEllipseInRect(),我们创建一个圆形的 CGPath 作为我们的关键帧动画的 path。

    模拟物理现实的动画

    easing 函数是 linear。它在整个动画上维持一个恒定的速度。在 Core Animation 中,这个功能由 CAMediaTimingFunction 类表示。
    在一定限度内,你也可以使用 +functionWithControlPoints:::: 创建自己的 easing 函数。通过传递 cubic Bézier 曲线的两个控制点的 x 和 y 坐标,你可以轻松的创建自定义 easing 函数。

    时间轴和插值函数的输入值,其锁定在【0,1】,不能达到物理效果, git :<RBBAnimation> .
    IOS 7 UIKit Dynamics 物理模拟框架, Pop , Core Animation
    动画类的时间函数:
    CADisplayLink
    NSTimer
    dispatch_queue-t _time
    Quartz Core FrameWork
    UIBezierPath + CADisplayLink
    UIViewAnimationWithBlocks

    POP

    基本的静态动画,Pop还支持spring和decay动画,有助于打造一个逼真的,基于物理的交互.key可以用来查询现有的动画。Pop接口作为一个NSObject上附加类别执行。任何NSObject或者子类可以被动画。

    Pop有四个具体的动画类型:spring, decay, basic和custom;

    通过处理CADisplayLink和相关的time-step管理,POPCustomAnimation使创建自定义动画和过渡变得更加容易。
    最理想的动画应该是专门负责交互的设计师使用Quartz Composer或者AE之类的设计工具。
    View层次的动画,到 Layer 层次的动画。动画无非就是layer层的再次渲染。Pop 就不一样了。如果说 Canvas 是对 Core Animation 的封装,Pop 则是对 Core Animation(以及 UIDynamics)的再实现。模拟现实世界的物理交互是很麻烦的,动画的本质是根据时间函数来做插值。 不仅限制在Core Animation 的属性中,Pop则可以自定义属性来实现。好消息是 现在iOS9中添加了公开的 CASpringAnimation ,大家可以使用 弹性动画。

    弹性动画:
    “如何用阻尼振动函数创建出60个关键帧”,从而实现CALayer产生类似[UIView animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion] 的弹性动画。
    pop 动画的流畅性,在于 Engine 的POPAnimator ,POP 是通过CADisplayLink 60 FPS 的特性进行设计。

    NSTimer 用于我们定义任务的执行周期、资料的更新周期,他的执行受到 CPU 的阻塞影响,而 CADisplayLink 则用于定义画面的重绘、动画的演变,他的执行基于 frames 的间隔。
    通过 CADisplayLink,Apple 允许你将 App 的重绘速度设定到和屏幕刷新频率一致,由此你可以获得非常流畅的交互动画。
    Decay Animation 就是 POP 提供的另外一个非常特别的动画,他实现了一个衰减的效果。这个动画有一个重要的参数 velocity(速率),一般并不用于物体的自发动画,而是与用户的交互共生。这个和 iOS7 引入的 UIDynamic 非常相似,如果你想实现一些物理效果,这个也是非常不错的选择。

    deceleration (负加速度) 是一个你会很少用到的值,默认是就是我们地球的 0.998,如果你开发给火星人用,那么这个值你使用 0.376 会更合适。

    原理:
    Facebook Pop其实是基于CADisplayLink(Mac平台上使用的CVDisplayLink)实现的独立于Core Animation之外的动画方案。
    CAMediaTimingFunction 离散的进行插值计算。

    App 动效

    好看的外观还要有流畅的体验:惯性,重力,均匀变速,碎片化运动;
    内在美(优化交互和提升体验的作用)
    (1)引导

    • 动态聚焦
    • 示意过渡
    • 空间转场 (为了避免两个页面之间的跳转过于生硬,利用动效填补上了页面跳转的中间过程,使得体验更加流畅和自然。)

    (2)简化
    隐藏二级菜单,按钮的动效化;
    (3)反馈
    抖动是增强反馈的方法之一,用动效反馈替代图形文字的静态提示,更加自然和引人注目;

    相关

    UIKit Dynamics 喵神
    ShapeLayer
    核心动画高级技巧
    合集
    从Core Animation到Facebook‘s Pop
    POP动画实例
    CALayer

    相关文章

      网友评论

      本文标题:iOS 动画整理

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