《Motion Design for iOS》(三十九)

介绍Facebook的Pop

在2014年4月,Facebook的工程师Kimon Tsinteris发布了Pop,Facebook构建用来支撑他们app Paper的一个弹簧动画框架。这个框架的起源其实早于Facebook,Kimon构建了其中的大部分用来支撑他被Facebook于2011年收购的电子书公司Push Pop Press。你可能记得Push Pop Press,它获得了苹果的设计奖,作为iPad的电子书,为被称为“Our Choice”的AI Gore所构建。

点击观看AI Gore’s ‘Our Choice’ - an iPad app视频

“Our Choice”在2011年确实很有开创性。它是最早的有完整的基于手势来操作界面内容的iOS app之一。屏幕上的每个视觉元素都是弹簧动画的,有着很好的弹性和响应,这是从所未见的。

时间快进到2014年早期,来介绍一些Facebook的Paper。Paper同样包含基于手势的控制和弹簧动画,并且可以发现,它全部基于Al Gore三年前的电子书的工作。对我们开发者来说幸运的是,Facebook认为他们的动画框架Pop值得公开到社区中去,这样其他人也能构建酷的基于弹簧动画的app了。

Pop VS Core Animation

当我们在本书前面讨论Core Animation的时候,以及它是如何在一个基本的水平上工作的,我结识了model layer和presentation layer的不同。模型层表示已知的准确的CALayer预加到动画上的属性。如果你添加一个动画到layer上,然后在动画进行到一半时问模型层它的属性是什么,答案是不会反映任何动画当前的内容的。如果你想要知道动画中实时的、运动中的layer的值,你就得去看表现层。而一旦动画完成后,表现层就会消失,所以如果你不想你的layer回到开始的位置,你就需要设置模型层的属性来匹配动画的最终状态。

这就是Core Animation的工作。这是苹果为了构建一个iPhone上用的动画框架在很多年前做出的一个基本的实现选择。而因为JNWSpringAnimation简单地为我们开发了一个依然是Core Animation对象的CAKeyframeAnimation,我们还是需要设置动画模型层的最终值来在完成时保持住。

Pop是完全不同的!

Pop不使用Core Animation来执行任何它提供的动画功能。不同之处在于它设置了一个特殊的时间对象来每1/60秒执行一次。那个每秒执行60次的代码会直接基于下一个你在弹簧动作中定义的位置更新任何你想要的属性。没有什么特别的、额外的layer添加到你的元素中去,Pop直接在UIView或者CALayer上改变属性,或者,有趣地在任何你想要的对象类型上改变。这意味着在动画中的任何时候,你都可以直接接触改变的属性的当前值而不用跳到任何表现层。并且更好的是,你不需要单独设置最终值让动画在那逗留,因为动画始终在实际的真实值上工作。

这个Pop用来支撑整个框架的时间对象是CADisplayLink,它可以看做是NSTimer的一个更高级版本,NSTimer是Mac游戏开发者常年用来在他们的Mac和iOS游戏中一帧帧运行代码的。NSTimer可以在你想要的任何时候调用任何你想调用的代码,不断地重复或者只调用一次。如果你想每5秒钟调用一次代码就可以使用NSTimer来做。或者如果你想要每秒调用代码60次,也可以用NSTimer来做,但当这么快地调用代码的时候(比如每次运动一点点像素,一步步地动画一个界面元素),这个时间对象就会失去准确的同步刷新频率,你可能会丢失一些帧,从而导致一些奇怪的短暂跳跃。

这就是CADisplayLink施展之处。CADisplayLink就是设计来避免这个问题的,因为它不是设置时间间隔,它一遍遍地调用你的方法的速率完全取决于屏幕的刷新频率。它随着屏幕的刷新来启动你的代码,这样你就有了最好的机会来每秒更新你的界面60次(平滑感知动作的时间)。这就是Pop用来将动画一像素一像素、1/60秒一次推动的方法。



查看完整合集:https://github.com/Cloudox/Motion-Design-for-iOS

版权所有:http://blog.csdn.net/cloudox_

时间: 2024-10-11 22:49:17

《Motion Design for iOS》(三十九)的相关文章

《Motion Design for iOS》(九)

计划动画 如果把动画比作一个房子,你现在至少已经在熟悉造房子的工具了:锤子.扳手和螺丝刀.你熟悉的动画的工具也就是你在创建一个动画的时候操作的特定属性.但这还不是你考试思考动画和设计动作需要知道的全部. 现在是时候开始布局动画的蓝图了.这是指准确描述动画中每一步将会发生什么的说明.如我之前提到的,你不能在开会的时候仅仅挥舞你的手臂来解释当用户点击一个按钮的时候会发生什么,你需要一个语言来描述和拆分你在想想一个界面元素运动时头脑中发生的事情.在你创建之前,你的下一步应该是思考将其化为细粒度并且写下

centos shell编程5LANMP一键安装脚本 第三十九节课

centos shell编程5LANMP一键安装脚本  第三十九节课 上半节课 下半节课 f

程序员的奋斗史(三十九)——大学断代史(三)——我和知乎邂逅

遥望2011年的某个惶惶岁月,那是我与知乎相识的日子. 排除知乎网站的内测用户,我应该算得上第一批用户.那时知乎网还未开放注册,只能通过好友邀请注册,我费了九牛二虎之力,申请了好几次,才拥有了知乎账号.作为一个真实的问答社区,从近几年的运营来看,知乎是成功的.虽然外界曾质疑知乎网站的盈利模式,但不可否认知乎是伟大的. 众所周知,知乎的原型是国外的Quora.以前一直以为Quora是多么的神圣,直到今年注册并使用后,才发觉知乎在用户体验上一点不逊色于Quora.好的网站当如知乎,简洁美观.操作简便

NeHe OpenGL教程 第三十九课:物理模拟

转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第三十九课:物理模拟 物理模拟简介: 还记得高中的物理吧,直线运动,自由落体运动,弹簧.在这一课里,我们将创造这一切. 物理模拟介绍 如果你很熟悉物理规律,并且想实现它,这篇文章很适合你. 在这篇教程里,你会创建一个非常简单的物理引

三十九、git add详解

一.前言git add命令主要用于把我们要提交的文件的信息添加到索引库中.当我们使用git commit时,git将依据索引库中的内容来进行文件的提交.二.基本git add <path>表示 add to index only files created or modified and not those deleted 我通常是通过git add <path>的形式把我们<path>添加到索引库中,<path>可以是文件也可以是目录.git不仅能判断出&

Python进阶(三十九)-数据可视化の使用matplotlib进行绘图分析数据

Python进阶(三十九)-数据可视化の使用matplotlib进行绘图分析数据 ??matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中. ??它的文档相当完备,并且 Gallery页面 中有上百幅缩略图,打开之后都有源程序.因此如果你需要绘制某种类型的图,只需要在这个页面中浏览/复制/粘贴一下,基本上都能搞定. ??在Linux下比较著名的数据图工具还有gnuplot

CCNA实验三十九 再临无线现场 &nbsp;

CCNA实验三十九 再临无线现场 环境:Windows XP  . PacketTracert 5.3 目的: 再次加深对无线模块化使用的理解,还有掌握无线局域网中的WEP.WPA.WPA-PSK加密,了解如何使用加密保护无线网络. 步骤: 创建拓扑如下: 1.分别为三台无线设备添加无线网卡: 2.分别为三台路由器添加无线模块: 3.配置AAA服务器: 4.配置R1路由器: Router>en Router#conf t Router(config)#host R1 R1(config)#ip

ActionScript3游戏中的图像编程(连载三十九)

2.3.1 用方块观察斜面样式与斜角滤镜作用方法的差异 在Photoshop和Flash里都各自建一个500*500的空白文件,然后各自在画布中心画上一个纯蓝的(#0000FF),100*100大小的方块,(如果不懂得如何完成以上操作,可自行翻阅相关的入门教材)然后Flash里再多做一步,按F8转换为元件,类型选择"影片剪辑". 为了最大程度上减少对本课题研究的干扰,我们创建的投影力求做到最简单,最干净.为此,我把Flash里的投影滤镜中的模糊设置成0,并且把颜色调亮(#00cc00)

微信小程序把玩(三十九)navigation API

原文:微信小程序把玩(三十九)navigation API 演示效果也看到了小程序也就提供这几个处理导航控制.值得注意的是只能同时导航五个页面 主要属性: 导航条一些方法 wx.setNavigationBarTitle(object) 设置导航条的Title 导航标题可以通过三种方式设置,第一种是通过全局配置名字统一,第二种就是在page中新建个json文件配置它会覆盖全局配置的title,第三种就是通过API设置. wx.showNavigationBarLoading()设置在导航条上显示

QT开发(三十九)——GraphicsView框架

QT开发(三十九)--GraphicsView框架 本文主要翻译自QT 5.6.2GraphicsView官方文档 一.GraphicsView框架简介 QT4.2开始引入了Graphics View框架用来取代QT3中的Canvas模块,并作出了改进,Graphics View框架实现了模型-视图结构的图形管理,能对大量图元进行管理,支持碰撞检测,坐标变换和图元组等多种方便的功能. GraphicsView框架结构主要包含三个主要的类QGraphicsScene(场景).QGraphicsVi