iOS faceBook pop动画使用

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结构图.png
  • 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

demo效果

文章和代码若有不对地方,欢迎批评指正。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容