POP是一个来自于Facebook,在iOS与OSX上通用的极具扩展性的动画引擎。它在基本的静态动画的基础上增加的弹簧动画与衰减动画,使之能创造出更真实更具物理性的交互动画。 Pop Animation在使用上和Core Animation很相似,都涉及Animation对象以及Animation的载体的概念 不同的是Core Animation的载体只能是CALayer,而Pop Animation可以是任意基于NSObject的对象
POP 使用 Objective-C++ 编写,Objective-C++ 是对 C++ 的扩展
POP背后的开发者是 Kimon Tsinteris, Push Pop Press 的联合创始人,曾经在Apple担任高级工程师,并参与了 iPhone 和 iPad 上软件的研发(iPhone的指南针以及地图)。2011年的时候 Facebook 收购了他的公司,此后他便加入了 Facebook 负责 Facebook iOS 版本的开发。
一.pop的介绍
- POP 动画极为流畅,主要在于Enimator 里,POP 通过 CADisplayLink 高达 60 FPS 的特性,打造了一个游戏级的动画引擎。
- CADisplayLink 是类似 NSTimer 的定时器,不同之处在于,NSTimer 用于我们定义任务的执行周期、资料的更新周期,他的执行受到 CPU 的阻塞影响,而 CADisplayLink 则用于定义画面的重绘、动画的演变,他的执行基于 frames 的间隔。
- 通过 CADisplayLink,Apple 允许你将 App 的重绘速度设定到和屏幕刷新频率一致,由此你可以获得非常流畅的交互动画,这项技术的应用在游戏中非常常见,著名的 Cocos-2D 也应用了这个重要的技术。
- WebCore 里包含了一些从 Apple 的开源的网页渲染引擎里拿出的源文件,与 Utility 里的组件一并,提供了 POP 的各项复杂计算的基本支持
二.pop动画
- POPBasicAnimation //基础动画
- POPSpringAnimation //弹簧动画
- POPDecayAnimation //衰减动画
- POPCustomAnimation //自定义动画
POP动画大部分属性和CoreAnimation(核心动画)的含义和用法一样,也有部分特殊属性
CALayer层各属性
extern NSString * const kPOPLayerBackgroundColor;//背景色
extern NSString * const kPOPLayerBounds;//bounds
extern NSString * const kPOPLayerCornerRadius;//圆角半径
extern NSString * const kPOPLayerBorderWidth;
extern NSString * const kPOPLayerBorderColor;
extern NSString * const kPOPLayerOpacity;
extern NSString * const kPOPLayerPosition;
extern NSString * const kPOPLayerPositionX;
extern NSString * const kPOPLayerPositionY;
extern NSString * const kPOPLayerRotation;
extern NSString * const kPOPLayerRotationX;
extern NSString * const kPOPLayerRotationY;
extern NSString * const kPOPLayerScaleX;
extern NSString * const kPOPLayerScaleXY;
extern NSString * const kPOPLayerScaleY;
extern NSString * const kPOPLayerSize;
extern NSString * const kPOPLayerSubscaleXY;
extern NSString * const kPOPLayerSubtranslationX;
extern NSString * const kPOPLayerSubtranslationXY;
extern NSString * const kPOPLayerSubtranslationY;
extern NSString * const kPOPLayerSubtranslationZ;
extern NSString * const kPOPLayerTranslationX;
extern NSString * const kPOPLayerTranslationXY;
extern NSString * const kPOPLayerTranslationY;
extern NSString * const kPOPLayerTranslationZ;
extern NSString * const kPOPLayerZPosition;
extern NSString * const kPOPLayerShadowColor;
extern NSString * const kPOPLayerShadowOffset;
extern NSString * const kPOPLayerShadowOpacity;
extern NSString * const kPOPLayerShadowRadius;
UIVIew层各属性
extern NSString * const kPOPViewAlpha;
extern NSString * const kPOPViewBackgroundColor;
extern NSString * const kPOPViewBounds;
extern NSString * const kPOPViewCenter;
extern NSString * const kPOPViewFrame;
extern NSString * const kPOPViewScaleX;
extern NSString * const kPOPViewScaleXY;
extern NSString * const kPOPViewScaleY;
extern NSString * const kPOPViewSize;
extern NSString * const kPOPViewTintColor;
其他层视图层属性
extern NSString * const kPOPNavigationBarBarTintColor;
extern NSString * const kPOPToolbarBarTintColor;
extern NSString * const kPOPTabBarBarTintColor;
extern NSString * const kPOPLabelTextColor;
- 更多控件属性可以参考框架里面类 POPAnimatableProperty.h
1.POPBasicAnimation基础动画
POPBasicAnimation *basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX];
basic.toValue = @(300);
basic.duration = 0.33;
[self.markView pop_addAnimation:basic forKey: kPOPLayerPositionX];
添加一个动画最少仅需三步
1)定义一个animation对象,并指定对应的动画属性(kPOPLayerPositionX)
2)设置初始值结束值(初始值可以不指定,会默认从当前值开始)
3)添加到想产生动画的对象上
注意:由于 POP 是基于定时器定时刷新添加动画的原理,那么如果将动画库运行在主线程上,会由于线程阻塞的问题导致动画效果出现卡顿、不流畅的情况。
更为关键的是,你不能将动画效果放在子线程,因为你不能将对 view 和 layer 的操作放到主线程之外.POP 受主线程阻塞的影响很大,在使用过程中,应避免在有可能发生主线程阻塞的情况下使用 POP ,避免制作卡顿的动画效果,产生不好的用户体验
2.POPSpringAnimation弹性动画
属性介绍
velocity: 设置动画开始速度
springBounciness: 反弹振幅, 可以设置的范围是0-20,默认为4。值越大振动的幅度越大
springSpeed: 速度, 可以设置的范围是0-20,默认为12.值越大速度越快,结束的越快
dynamicsMass: 质量, 质量越大,动画的速度越慢,振动的幅度越大,结束的越慢
dynamicsTension: 拉力 拉力越大,动画的速度越快,结束的越快
dynamicsFriction: 摩擦力, 摩擦力越大,动画的速度越慢,振动的幅度越小。
注意: 以上的六个属性中一般只会设置springBounciness和springSpeed, 如有特殊需求才会设置其他属性
POPSpringAnimation *psa = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleX];
psa.fromValue = @(0.3);
psa.toValue = @(2);
psa.springSpeed = 5;
psa.springBounciness = 15;
[self.markView pop_addAnimation:psa forKey: kPOPViewScaleX];
3.POPDecayAnimation衰减动画
可以实现类似UIScrollView的滑动衰减效果
属性介绍
- deceleration (负加速度, 衰减系数(越小则衰减得越快)) 是一个你会很少用到的值,默认是就是我们地球的 0.998,如果你开发APP给火星人用,那么这个值你使用 0.376 会更合适
- velocity 也是必须和你操作的属性有相同的结构,如果你操作的是 bounds, 传CGRect类型;如果 velocity 是负值,那么就会反向递减
POPDecayAnimation *pda = [POPDecayAnimation animationWithPropertyNamed:kPOPViewSize];
pda.velocity = [NSValue valueWithCGSize:CGSizeMake(300, self.markView.frame.size.height)];
[self.markView pop_addAnimation:pda forKey:kPOPViewSize];
4. POPCustomAnimation自定义动画
请三种动画是默认动画,集成POPPropertyAnimation类,基类中有一个属性property 是用来驱动动画的。
property包含三个部分
- readBlock告诉POP当前的属性值
- writeBlock中修改变化后的属性值
- threashold决定了动画变化间隔的阈值 值越大writeBlock的调用次数越少
前三种动画POP会自动创建,告诉系统如何根据当前时间片做出变化
POPBasicAnimation *anim = [POPBasicAnimation animation];
anim.duration = 10.0;
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
POPAnimatableProperty * prop = [POPAnimatableProperty propertyWithName:@"count" initializer:^(POPMutableAnimatableProperty *prop) {
prop.readBlock = ^(id obj, CGFloat values[]) {
values[0] = [[obj description] floatValue];
};
prop.writeBlock = ^(id obj, const CGFloat values[]) {
[obj setText:[NSString stringWithFormat:@"%.2f",values[0]]];
};
prop.threshold = 0.01;}];
anim.property = prop;
anim.fromValue = @(0.0);
anim.toValue = @(100.0);
[self.label pop_addAnimation:anim forKey:nil];
kCAMediaTimingFunctionLinear //线性步调对于那些立即加速并且保持匀速到达终点的场景会有意义
kCAMediaTimingFunctionEaseIn //慢慢加速然后突然停止
kCAMediaTimingFunctionEaseOut //全速开始,然后慢慢减速停止
kCAMediaTimingFunctionEaseInEaseOut//慢慢加速然后再慢慢减速
kCAMediaTimingFunctionDefault//同上,加速和减速的过程都稍微有些慢
三.pop动画相关Core Animation的优点
- Pop Animation应用于CALayer时,在动画运行的任何时刻,layer和其presentationLayer的相关属性值始终保持一致,而Core Animation做不到。
- Pop Animation可以应用任何NSObject的对象,而Core Aniamtion必须是CALayer。
四.几个比较炫酷的效果
见demo->FacebookPopDemo
文章和代码若有不对地方,欢迎批评指正。