Facebook Pop介绍与使用

前言

前段时间花了点时间,稍微看了下核心动画,感觉还是学到了不少,顺便给大家安利一个网站,这上面是对《iOS Core Animation: Advanced Techniques》的中文译本。有兴趣的同学可以花时间好好看看~接下来看我们今天的主角POP-Facebook出品的动画引擎。

介绍

Pop是一个动画引擎,用以扩展iOS、OSX的动画类型。相较于iOS、OSX中的基本动画效果,Pop扩展后支持弹簧动画效果与衰减动画效果,你可以用Pop动画引擎来构建出真实的物理交互效果。它的API与Core Animation的API非常类似,使用起来非常容易。Pop动画引擎已经经过了良好的测试,Facebook在 Paper 应用中进行了大量使用。

安装

官方地址 https://github.com/facebook/pop

说到安装,Facebook推荐的还是通过CocoaPods来安装,
添加下面的代码到你项目的Podfile文件就可以了

pod 'pop', '~> 1.0.9'

但是需要手动导入的同学就比较麻烦了,我们如果把github上下载下来的资源直接拖进项目里,估计马上就一片报红。这里我在网上找到了可以直接拖进项目的框架,大家把我Demo里的pop文件夹直接拉到自己项目里就可以正常使用了。

使用

动画类型

Pop支持4种动画类型:弹簧效果、衰减效果、基本动画和自定义动画。

  • POPSpringAnimation (弹簧效果)
  • POPDecayAnimation (衰减效果)
  • POPBasicAnimation (基本动画)
  • POPAnimatableProperty (自定义属性动画)

首先,添加一个简单的动画很简单,只要三步

1.定义一个animation对象,以上的四种类型之一,并指定对应的动画属性,这个属性是个字符串类型,按不同的对象可以赋的值也不一样,可选的类型比较多,这里就不贴出来了,大家可以在代码里自己看。
2.设置animation对象的fromValue和toValue,fromValue不设置的话会默认从当前开始。
3.将animation添加到指定的对象上。这边和Core Animation的最大不一样就是,Core Animation只能添加到CALayer上,Pop可以添加到任何继承于NSObject对象上。

弹簧效果

我一开始就是被pop的这个动画所吸引的,POPSpringAnimation提供了一个类似于弹簧的动画效果。下面的例子是对一个Layer的尺寸进行缩放:

springAnimation
springAnimation

源码:

// 1.初始化
POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];

// 2.设置初始值和变化后的值
anim.fromValue = @(10);
anim.toValue = @(500);
// 速度 可以设置的范围是0-20,默认为12.值越大速度越快,结束的越快
anim.springSpeed = 2.f;
// 振幅 可以设置的范围是0-20,默认为4。值越大振动的幅度越大
anim.springBounciness = 10.f;
// 拉力 拉力越大,动画的速度越快,结束的越快。 接下来的三个值一般不用设置,可以分别放开注释查看效果
//  anim.dynamicsTension = 250;
// 摩擦力 摩擦力越大,动画的速度越慢,振动的幅度越小。
//  anim.dynamicsFriction = 100.0;
// 质量 质量越大,动画的速度越慢,振动的幅度越大,结束的越慢
anim.dynamicsMass = 10;
anim.beginTime = CACurrentMediaTime() + 1.f;
// 3.添加到view上
[self.layerView.layer pop_addAnimation:anim forKey:@"ScaleXY"];

衰减效果

POPDecayAnimation可以实现衰减的动画效果。这个动画最重要的一个参数就是velocity(速率)。这个参数一般不通过具体的参数来设置,而是通过与用户的交互来生成。比如我们下面的例子中,就是通过用户对view的拖拽来生成的速度。

decayAnimation
decayAnimation

源码:

// 拖拽动作结束
if (recognizer.state == UIGestureRecognizerStateEnded) {
    CGPoint velocity = [recognizer velocityInView:self.view];
    // 1.初始化
    POPDecayAnimation *animtion = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];
    // 2.设置初始值
    // 这个例子中不需要设置初始值。注意:POPDecayAnimation只有fromValue,没有toValue
    // POPDecayAnimation设置duration也是没有意义的,因为POPDecayAnimation的动画持续时间,是由velocity(速度)和deceleration(衰减系数)决定的。
    // 衰减系数(越小贼衰减的越快)很少用到,可以不设置
    animtion.deceleration = 0.998;
    // 设置动画速度
    animtion.velocity = [NSValue valueWithCGPoint:velocity];
    // 3.添加到view上
    [recognizer.view.layer pop_addAnimation:animtion forKey:@"positionAnimation"];
}

基本动画

基本动画可以指定具体的动画时间和时间函数,用法跟CoreAnimation中的CABasicAnimation很相似。下面的例子中,我们用来改变一个view的背景色。

basicAnimation
basicAnimation

源码:

// 1.初始化
POPBasicAnimation *basic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewBackgroundColor];
// 2.设置初始值
basic.fromValue = [UIColor blackColor];
basic.toValue = [UIColor redColor];
// 动画的时长
basic.duration = 4.0;
// 动画类型 系统预设的类型有以下5种:
//    kCAMediaTimingFunctionLinear            线性,即匀速
//    kCAMediaTimingFunctionEaseIn            先慢后快
//    kCAMediaTimingFunctionEaseOut           先快后慢
//    kCAMediaTimingFunctionEaseInEaseOut     先慢后快再慢
//    kCAMediaTimingFunctionDefault           实际效果是动画中间比较快
basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
basic.beginTime = CACurrentMediaTime() + 1.f;
// 3.添加到view上
[self.layerView pop_addAnimation:basic forKey:@"colorAnimation"];

自定义属性动画

我们上面讲的三个动画的基类其实是POPPropertyAnimation,在POPPropertyAnimation中有一个属性叫property。而我们的自定义属性,就是跟这个有关。下面的例子演示了一个类似于秒表计时的效果:

countAnimation
countAnimation

源码:

POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"prop" initializer:^(POPMutableAnimatableProperty *prop) {
    
    // 告诉pop当前的属性值
    prop.readBlock = ^(id obj, CGFloat *values) {
      
    };
    // 修改变化后的属性值
    prop.writeBlock = ^(id obj, const CGFloat *values) {
        UILabel *label = (UILabel *)obj;
        label.text = [NSString stringWithFormat:@"%02d:%02d:%02d",(int)values[0]/60,(int)values[0]%60,(int)(values[0]*100)%100];
    };
    // 动画变化的快慢,值越大block调用的次数越少        
   prop.threshold = 0.1;

}];

// 1.初始化
POPBasicAnimation * anim = [POPBasicAnimation linearAnimation];

// 自定义属性
anim.property = prop;
// 2.设置初始值
anim.fromValue = @(0);
anim.toValue = @(3 * 60);
// 动画的时长
anim.duration = 3 * 60;
anim.beginTime = CACurrentMediaTime() + 1.f;
[self.countLabel pop_addAnimation:anim forKey:@"countAnimation"];

总结

POP动画确实在一定程度上给我们带来了很大的便利,利用以上的几个动画,应该能满足我们日常的一些基本要求了。要是有更加复杂的动画,就需要同学们自己去探索了~我这里就当抛砖引玉了。最近附上demo地址:

https://github.com/z782223468/Pop-Demo.git

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

推荐阅读更多精彩内容

  • 当听闻Facebook要开源自己的Animation框架的时候,我还以为是基于Core Animation进行的封...
    韩七夏阅读 1,067评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,275评论 25 707
  • 目录 ** UIView 动画 ** ** Core Animation ** ** FaceBook POP动画...
    方向_4d0d阅读 1,573评论 0 3
  • 观点是我们的主观感觉和想法所形成的,每个人都有独立的思想,不同的喜好,看到的事物也是不一样的。同样的天空,有人注意...
    明荒阅读 202评论 2 4
  • 风卷狂云至,草木尽残催。 漏伞何须补,孤僧独自归。 归来日迟迟,眠思意垂垂。 梦醒黄粱熟,落日有余晖。
    陸醜阅读 199评论 0 3