POP 介绍与使用实践(快速上手动画)

534 查看

前言

动画在APP开发过程中大家多多少少都会接触到而且随着ios7的扁平化风格启用之后越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然还是以国外的APP居多)

有过相关开发经验的同学肯定知道在iOS中动画相关的部分都是基于Core Animation 但是今天我们不讨论Core Animation 今天的主角是POP -来自于Facebook的动画引擎(其实我不喜欢把POP定义为动画引擎我愿意称它为函数发生器)

介绍

官方地址 https://github.com/facebook/pop
官方介绍(翻译版)

POP是一个在iOS与OS X上通用的极具扩展性的动画引擎它在基本的静态动画的基础上增加的弹簧动画与衰减动画使之能创造出更真实更具物理性的交互动画 POP的API可以快速的与现有的ObjC代码集成并可以作用于任意对象的任意属性
POP是个相当成熟且久经考验的框架 Facebook出品的令人惊叹的Paper应用中的所有动画和效果即出自POP

安装方式还是推荐使用CocoaPod

1	pod 'pop', '~> 1.0'

POP的神奇之处在于它是独立与Core Animation的存在所以忘记Core Animation吧忘记Layer Tree吧迎接一个简单的明天 (LOL 开玩笑的~:) 很多地方还是会需要Core Animation的不过说不定哪天苹果大发善心将动画相关的部分向POP借鉴一点也不是不可能的(比如SpriteKit就借鉴了Cocos2D :)

使用

POP默认支持三种动画但同时也支持自定义动画

POPBasicAnimation
POPSpringAnimation
POPDecayAnimation
POPCustomAnimation //自定义动画

这里我们只讨论前三种(因为自定义动画我也没用过 :) 先来看看官方的示例代码吧

官方代码示例

//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.fromValue = @(0.0);

anim.toValue = @(1.0);

[view pop_addAnimation:anim forKey:@"fade"];

//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"];

POPBasicAnimation

POPBasicAnimation使用最广泛提供固定时间间隔的动画(如淡入淡出效果)

代码示例1

POPBasicAnimation *anBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX];

anBasic.toValue = @(self.square.center.y+300);

anBasic.beginTime = CACurrentMediaTime() + 1.0f;

[self.square pop_addAnimation:anBasic forKey:@"position"];

可以看到添加一个动画最少仅需三步

定义一个animation对象并指定对应的动画属性
设置初始值和默认值(初始值可以不指定会默认从当前值开始)
添加到想产生动画的对象上

POPBasicAnimation可配置的属性与默认值为

1	duration:0.4 //动画间隔

POPBasicAnimation提供四种timingfunction(很熟悉对不对? 就是Core Animation中那些)

kCAMediaTimingFunctionLinear
kCAMediaTimingFunctionEaseIn
kCAMediaTimingFunctionEaseOut
kCAMediaTimingFunctionEaseInEaseOut

其时间函数分别如下

POPSpringAnimation

POPSpringAnimation也许是大多数人使用POP的理由其提供一个类似弹簧一般的动画效果(使用后 APP立马就活泼起来了有木有?!)

代码示例23

POPSpringAnimation *anSpring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];

anSpring.toValue = @(self.square.center.y+300);

anSpring.beginTime = CACurrentMediaTime() + 1.0f;

anSpring.springBounciness = 10.0f;

[self.square pop_addAnimation:anSpring forKey:@"position"];

其动画效果如下

POPSpringAnimation可配置的属性与默认值为

springBounciness:4.0 //[0-20] 弹力越大则震动幅度越大

ً后越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然还是以国外的APP居多)

介绍