[翻译] POP Facebook的动画开源库

简介:

Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it supports spring and decay dynamic animations, making it useful for building realistic, physics-based interactions. The API allows quick integration with existing Objective-C codebases and enables the animation of any property on any object. It's a mature and well-tested framework that drives all the animations and transitions in Paper.

Pop是一个对iOS以及OS X扩展的动画引擎。除了基础静态的动画,它支持弹簧类以及衰退的物理引擎效果的动画。对于你来创建出类似于物理引擎的交互十分方便。这个API能让你快速的集成到你已经存在的项目当中,允许你对任何对象的任何属性操作。他是个系统的,进行过反复测试的框架,在Paper应用中所有的动画均由Pop创建。

 

Installation

Pop is available on CocoaPods. Just add the following to your project Podfile:

你可以使用CocoaPods安装:

pod 'pop', '~> 1.0'

Alternatively, you can add the project to your workspace and adopt the provided configuration files or manually copy the files under the pop subdirectory into your project. If installing manually, ensure the C++ standard library is also linked by including -lc++ to your project linker flags.

另一种方式是:你可以将整个工程添加到你的workspace中然后引用需要的配置文件,或者是手动的复制pop文件夹到你的工程项目当中,确保你的项目中用 -lc++ 链接到C++标准库。

 

Usage

Pop adopts the Core Animation explicit animation programming model. Use by including the following import:

Pop 采用了 Core Animation 明确的动画程勋模型,通过引入头文件来使用:

#import <POP/POP.h>

Start, Stop & Update

To start an animation, add it to the object you wish to animate:

为了给对象添加动画效果,使用如下:

POPSpringAnimation *anim = [POPSpringAnimation animation];
...
[layer pop_addAnimation:anim forKey:@"myKey"];

To stop an animation, remove it from the object referencing the key specified on start:

为了停止动画,你可以从指定的key值,从对象移除掉:

[layer pop_removeAnimationForKey:@"myKey"];

The key can also be used to query for the existence of an animation. Updating the toValue of a running animation can provide the most seamless way to change course:

这个key值也可以用来查询已经存在的动画。更新 toValue 值可以无缝的更新动画的流程:

anim = [layer pop_animationForKey:@"myKey"];
if (anim) {
  /* update to value to new destination */
  anim.toValue = @(42.0);
} else {
  /* create and start a new animation */
  ....
}

While a layer was used in the above examples, the Pop interface is implemented as a category addition on NSObject. Any NSObject or subclass can be animated.

上例中使用了一个layer,然而,Pop是通过对NSObject的category实现方式。任何的NSObject或者其只对象都能够使用动画。

 

Types

There are four concrete animation types: spring, decay, basic and custom.

有着4种具体的动画类型:弹簧类型,衰退的物理引擎类型,基础类型以及定制类型。

Spring animations can be used to give objects a delightful bounce. In this example, we use a spring animation to animate a layer's bounds from its current value to (0, 0, 400, 400):

弹簧动画效果可以给对象一个很平滑的动画效果。使用如下例子所示:

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 400, 400)];
[layer pop_addAnimation:anim forKey:@"size"];

Decay animations can be used to gradually slow an object to a halt. In this example, we decay a layer's positionX from it's current value and velocity 1000pts per second:

类似于物理引擎的动画可以慢慢将一个对象从运动状态变为停止状态。使用如下例子所示:

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anim.velocity = @(1000.);
[layer pop_addAnimation:anim forKey:@"slide"];

Basic animations can be used to interpolate values over a specified time period. To use an ease-in ease-out animation to animate a view's alpha from 0.0 to 1.0 over the default duration:

基本动画类型可以用来篡改一个指定的时间区域。使用如下例子:

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anim.fromValue = @(0.0);
anim.toValue = @(1.0);
[view pop_addAnimation:anim forKey:@"fade"];

POPCustomAnimation makes creating custom animations and transitions easier by handling CADisplayLink and associated time-step management. See header for more details.

POPCustomAnimation 通过控制CADisplayLink以及与时间轴的管理,使得创建自定义动画以及转场更加的简单,你可以在头文件中浏览。

Properties

The property animated is specified by the POPAnimatableProperty class. In this example we create a spring animation and explicitly set the animatable property corresponding to -[CALayer bounds]:

用来触发动画的类是POPAnimatableProperty。这个例子中,我们创建了一个弹簧动画,以及明确的设定了这个动画来响应-[CALayer bounds]:

POPSpringAnimation *anim = [POPSpringAnimation animation];
anim.property = [POPAnimatableProperty propertyWithName:kPOPLayerBounds];

The framework provides many common layer and view animatable properties out of box. You can animate a custom property by creating a new instance of the class. In this example, we declare a custom volume property:

这个框架提供了很多种通用的layer以及可以被动画的view的属性。你可以通过创建一个实例来自定义一个可以动画的属性。以下例子提供了如何让音量属性动画改变:

prop = [POPAnimatableProperty propertyWithName:@"com.foo.radio.volume" initializer:^(POPMutableAnimatableProperty *prop) {
  // read value
  prop.readBlock = ^(id obj, CGFloat values[]) {
    values[0] = [obj volume];
  };
  // write value
  prop.writeBlock = ^(id obj, const CGFloat values[]) {
    [obj setVolume:values[0]];
  };
  // dynamics threshold
  prop.threshold = 0.01;
}];

anim.property = prop;

For a complete listing of provided animatable properties, as well more information on declaring custom properties see POPAnimatableProperty.h.

请参考POPAnimatableProperty.h来获取一份完整的可以提供动画完整的属性列表。

 

Debugging

Here are a few tips when debugging. Pop obeys the Simulator's Toggle Slow Animations setting. Try enabling it to slow down animations and more easily observe interactions.

Consider naming your animations. This will allow you to more easily identify them when referencing them, either via logging or in the debugger:

anim.name = @"springOpen";

Each animation comes with an associated tracer. The tracer allows you to record all animation-related events, in a fast and efficient manner, allowing you to query and analyze them after animation completion. The below example starts the tracer and configures it to log all events on animation completion:

POPAnimationTracer *tracer = anim.tracer;
tracer.shouldLogAndResetOnCompletion = YES;
[tracer start];

See POPAnimationTracer.h for more details.

 

Testing

Pop has extensive unit test coverage. To install test dependencies, navigate to the root pop directory and type:

pod install

Assuming CocoaPods is installed, this will include the necessary OCMock dependency to the unit test targets.

 

Resources

A collection of links to external resources that may prove valuable:

 

Contributing

See the CONTRIBUTING file for how to help out.

 

License

Pop is released under a BSD License. See LICENSE file for details.

目录
相关文章
|
移动开发 Java 程序员
Facebook 将神奇动画引擎 Pop 开源了!
Facebook 2月发布的新闻类应用Paper,因为其灵动的用户界面和交互,成为近来最令人眼前一亮的移动产品之一。 而这个产品的背后是2011年Facebook收购的Push Pop Press,创始人是分别在Apple任设计师和工程师的Mike Matas与Kimon Tsinteris。他们的合作者还有传奇人物Bret Victor。他们为美国前副总统Al Gore开发的电子书Our Choice当时就曾技惊四座。
304 0
Facebook 将神奇动画引擎 Pop 开源了!
|
Spring Java
Facebook Pop 动画框架详细解析
Facebook Pop动画框架详细解析(一) —— 基本概览Facebook Pop动画框架详细解析(二) —— 基本架构Facebook Pop动画框架详细解析(三) —— spring动画简单实例Facebook Pop动画框架详细解析(四) —...
1443 0
|
iOS开发 前端开发 API
Pop - Facebook 开源 iOS & OS X 动画库
  Pop 是一个可扩展的 iOS & OS X 动画引擎。除了基本的静态动画,它支持弹簧和动态衰减的动画,因此可以用于构建现实的,基于物理的交互效果。   它的 API 可以与现有的 Objective-C 代码库快速整合,可以为任何对象上的任何属性添加动画。
1080 0
|
8月前
|
机器学习/深度学习 算法 决策智能
【重磅开源】Facebook开源 Nevergrad:一种用于无梯度优化的开源工具
【重磅开源】Facebook开源 Nevergrad:一种用于无梯度优化的开源工具
|
12月前
|
缓存 数据可视化 测试技术
开源多年后,Facebook这个调试工具,再登Github热门榜
让许多工程师合作开发大型应用大多会面临一个挑战,通常没有一个人知道每个模块是如何工作的,这种技能会让开发新功能、调查Bug或优化性能变得困难,为了解决这个问题,Facebook创建并开源了Flipper,一个可扩展的跨平台的调试工具,用来调试 iOS 和 Android 应用。近日又双叒登上了Github热榜。
|
前端开发 JavaScript 测试技术
Facebook 开源可扩展文本编辑器 Lexical
Meta(原 Facebook)近日开源可扩展文本编辑器 Lexical,源代码托管在 GitHub 上采用 MIT 许可证。
396 0
Facebook 开源可扩展文本编辑器 Lexical
|
XML jenkins Java
Facebook开源静态代码分析工具Infer介绍
Infer是Facebook公司的一个开源的静态分析工具。Infer 可以分析 Objective-C, Java 或者 C 代码,用于发现潜在的问题。其作用类似于sonar和fortify。Infer更倾向于发现代码中的空指针异常、资源泄露以及内存泄漏的问题。
Facebook开源静态代码分析工具Infer介绍
|
机器学习/深度学习 人工智能 文字识别
图神经网络版本的PyTorch来了,Facebook开源GTN框架,还可对图自动微分
近日,Facebook的AI研究院发表了一篇论文「DIFFERENTIABLE WEIGHTED FINITE-STATE TRANSDUCERS」,开源了用于图网络建模的GTN框架,操作类似于PyTorch这种传统的框架,也可以进行自动微分等操作,大大提高了对图模型建模的效率。
272 0
图神经网络版本的PyTorch来了,Facebook开源GTN框架,还可对图自动微分