免费下载!由 O’Reilly 出版的《NGINX 完全指南》中文版已正式上线 了解详情
写点什么

使用 Facebook Pop 框架填补手势与动画间的差距

  • 2014-05-22
  • 本文字数:1628 字

    阅读完需:约 5 分钟

Facebook 最近开源了 Pop 项目,它是其 iOS 平台 Paper 应用的动画引擎。Pop 旨在让开发者轻松地超越 Fire-and-forget 动画,从而实现交互式动画。除了静态动画,Pop 支持弹簧(Spring)和衰退(Decay)动态动画,以及允许创建自定义动画。

Kimon Tsinteris (Push Pop Press 联合创始人,该公司 2001 年被 Facebook 收购)透露,在 Facebook Paper 应用的创建者中,Pop 背后的主要目标之一是能够以物理现实的方式,直接操作屏幕上的元素。Chris Eidhof 和 Florian Kugler,在 Objc.io 的一篇文章中详细剖析了交互式动画,回忆了 2007 年演示第一代 iPhone 时,观众们对列表滚动效果的强烈感受。他们还认为,今天很少有应用能够拥抱直接操作模式,允许动画在动作中或中断后进行交互。在iOS 中,fire-and-forget 动画的例子包括Home 屏幕打开和关闭分组,以及导航控制动画。而另一方面,Apple Passbook 提供了现实、交互的动画示例。

Facebook 的 Brian Amerige 非常清晰地概括了填补用户手势与逼真动画之间差距的复杂性。关键点是在手势结尾时,后续动画以手势的速度衰退,从而保持用户的意图。这样,动画就可以按现实的流畅方式跟随和完成手势动作。

核心动画(Core Animation)是 iOS 基于层的动画引擎,它本身无法指定动画开始的速度。所以,当你使用核心动画默认 API 创建交互动画时,动画将会呈现不连续的速度曲线

Apple 在 iOS 7 中引入了动画框架 UIKit Dynamics(见 2013 年 WWDC 206 221 ),它基于伪物理引擎(Pseudo-physics engine),能够实现任何满足 UIDynamicItem 协议的动画。Eidhof 和 Kugler 认为,尽管这个框架非常强大并且能够实现复杂的行为,但它的 API 对一般用户界面所需的动画来说似乎有点过头。

而另一方面,Pop 则努力让事情尽可能地简单。Pop 一个突出的特点是它的 API 与 iOS 开发者早已熟悉的核心动画 API 非常相似。所以,Pop 的 API 让你以核心动画的方法创建新的动画:

复制代码
POPSpringAnimation *spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];
spring.velocity = [NSValue valueWithCGPoint:velocity];
[viewToAnimate.layer pop_addAnimation:spring forKey:@"rotationAnimation"];

这个小例子能够为 UI 元素旋转增加弹性效果,可以在旋转手势结束时使用,通过 UIPanGestureRecognizer 控制。

复制代码
- (void)panHandler:(UIPanGestureRecognizer *) panGesture {
if (panGesture.state == UIGestureRecognizerStateEnded) {
CGPoint velocity = [recognizer velocityInView:self.view];
POPSpringAnimation *spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];
spring.velocity = [NSValue valueWithCGPoint:velocity];
[viewToAnimate.layer pop_addAnimation:spring forKey:@"rotationAnimation"];
} else {
//-- transform the layer as per your gesture logics
}
}

除了初始速度,Pop 还允许定义弹簧动画的一些参数,例如模拟弹簧张力、摩擦力和弹性。

虽然 Pop 的 API 是受核心动画的启发,但它并不仅限定于那些 CALayer 属性定义的动画。实际上,Pop 扩展了核心动画的可动画(Animatable)属性,并且用于 CALayer 的动画 API 同样可以用于 UIView、UINavigationBar 和 UITabBar 的属性。这样做最有趣的是,由于 Pop 的开放特性,为更多的类增加更多的可动画属性成为可能。在 POPAnimatableProperty.h 头文件中可以找到 Pop 支持的所有可动画属性的完整列表。

Pop 创造魔力的基本机制是依靠 CADisplayLink 提供动画节拍,自己处理所有的动画逻辑。

这种方法的一个缺点对 UIKit Dynamics 来说很常见,正如 Andy Matuschak 所指出的,是 CADisplayLink 与其应用具有相同的运行优先级,而渲染服务处理 UIView 和 CAAnimation 则有更高的优先级,因此不太可能受系统中正在运行的其它任务影响。

原文链接: Bridging the Gap Between Gesture and Animation with Facebook’s Pop Framework

2014-05-22 19:183237

评论

发布
暂无评论
发现更多内容

LeetCode题解:1. 两数之和,Map+队列+双指针,JavaScript,详细注释

Lee Chen

大前端 LeetCode

解决分布式session问题

架构师修行之路

分布式 架构设计 session

SpringBoot RabbitMQ消息队列的重试、超时、延时、死信队列

Barry的异想世界

RabbitMQ springboot 消息队列 死信队列 延时队列

程序员快乐器之JAVA代码生成工具

Philips

敏捷开发 程序设计 软件架构 开发工具

TNFE-Weekly[第七十二周已更新]

莹姐🙈

小程序 大前端 周刊

【写作群星榜】9.1~9.13写作平台优秀作者 & 文章排名

InfoQ写作社区官方

写作平台 排行榜 文章

随想之乐观估计

云杉

非科班进大厂必备算法

我是程序员小贱

面试 算法

大项目写代码写到晕头转向?敏捷多项目框架解君愁

Learun

敏捷开发 软件开发

测试

云龙

中国云计算的云栖“坐标”

脑极体

2020英特尔大师挑战赛携手华硕ROG激战成都

新闻科技资讯

理财专题一

TCA

测试

为什么区块链能成为全球贸易的助推器

CECBC

区块链 金融 国际贸易

什么是云服务器,ECS它能干什么?

德胜网络-阳

区块链永续合约交易所搭建,永续合约系统开发

你需要开始做点什么,否则你会一直忙一直忙

老胡爱分享

学习 思维方式 行动派 随笔杂谈 拖延症

STL总结与常见面试题

C语言与CPP编程

c c++ 编程 编程语言 stl

直播风口,是什么在支撑教育、电商、泛娱乐等场景?

腾讯云音视频

腾讯云 音视频 云直播 点播

你还在手撕微服务?快试试 go-zero 的微服务自动生成

万俊峰Kevin

微服务 microservice go-zero Go 语言

C/C++基础之sizeof使用

C语言与CPP编程

c c++ 编程 编程语言

Flink SQL CDC 上线!我们总结了 13 条生产实践经验

Apache Flink

flink

SwiftGG 文档翻译笔记1-基础部分函数闭包

架构师课程大作业 知识图谱

杉松壁

前端必会的七种排序算法

执鸢者

算法 大前端

大作业

Geek_2e7dd7

Python中的with是测试常用到的资源打开利器

陈磊@Criss

组合模式

纯纯

Http请求中如何保持状态?

架构师修行之路

基于 Flink 的典型 ETL 场景实现方案

Apache Flink

flink

使用Facebook Pop框架填补手势与动画间的差距_Facebook_Sergio De Simone_InfoQ精选文章