Facebook POP动效库使用教程

编者注：用Origami做iOS动效的同窗若是愁怎么实现，能够把这个给开发看看做为参考哦

若是说Origami这款动效原型工具是Facebook Paper的幕后功臣，那么POP即是Origami的地基。感谢Facebook开源了POP动效库，让人人都能制做出华丽的动效。咱们只需5步，便能搞定酷炫的动效。

步骤1: 安装

 

使用CocoaPods安装POP，只须要在Podfile中加入这么一行：

pod 'pop', '~> 1.0'

或者若是想要手动添加，那么参考POP Github中的描述：

除此以外，你还能够将工程添加到工做区里面，而后采用提供的配制文件。或者手动复制POP子目录下的文件，复制到工程里面。若是选择手动安装，确保C++标准库链入其中，只须要在项目连接标记中包含 -lc++便可。

Facebook POP动效库:https://github.com/facebook/pop

若是不懂得如何使用CocoaPods,请看这个教程：

《CocoaPods简易使用指南》

步骤2: 将POP加入到工程中

 

在工程开头添加以下：

#import <POP/POP.h>

 

步骤 3:建立动效

 

使用POP能够建立4类动效：: spring, decay, basic and custom.

Spring （弹性）动效能够赋予物体愉悦的弹性效果

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

Decay （衰减) 动效能够用来逐渐减慢物体的速度至中止

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];

Basic（基本）动效能够在给定时间的运动中插入数值调整运动节奏

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];

Custom（自定义）动效能够让设计值建立自定义动效，只需简单处理CADisplayLink，并联系时间-运动关系

在这片简短教程中将不涵盖自定义动效，你们能够看看POP的Github来获取更多进阶知识https://github.com/facebook/pop

步骤4: 给动效添加属性

 

Pop 让咱们能够这样设置动效的属性:

velocity : anim.velocity = @(1000.);

fromValue: anim.fromValue = @(0.0);

toValue: anim.toValue = @(1.0);

bounciness: anim.springBounciness = 10;

步骤5 :动起来

 

若想让物体动起来，只须要添加步骤3所建立的东西到视图。

[self.yourView.layer pop_addAnimation:anim forKey:@"typeANameForYourAnimationHere"];

这就是POP简单建立动效的教程。你们能够看看例子来理解如何建立动效。争取努力变得技艺纯熟吧。

 

步骤6：测试效果

Pop有相关文件扩展做为测试。安装测试文件的方法是用终端进入POP根目录，而后输入

pod install

必须确保CocoaPods已经安装

 

# 动效案例

 

这个动效将按钮缩小到一半

POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; 

scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.5, 0.5)]; 

scaleAnimation.springBounciness = 10.f; 

[self.button.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnim"];

 

这个动效将按钮旋转

POPSpringAnimation *rotationAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];

rotationAnimation.beginTime = CACurrentMediaTime() + 0.2;

rotationAnimation.toValue = @(1.2); 

rotationAnimation.springBounciness = 10.f; 

rotationAnimation.springSpeed = 3; 

[button.layer pop_addAnimation:rotationAnimation forKey:@”rotationAnim”];

 

这个改变透明度：

POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity];

opacityAnimation.toValue = @(0.5);

[animView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"];

#更多

 

Pop Github : https://github.com/facebook/pop

Popping -Pop案例 : https://github.com/schneiderandre/popping

POP使用教程: https://github.com/maxmyers/FacebookPop

 

中文教程

 

POP使用指南（来自Cocohina）

使用FaceceBook的Pop框架替换UIScrollView的减速动画（来自Cocohina）

Facebook POP 进阶指南（来自Cocohina）