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

源码：

// 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

源码：

// 拖拽动做结束 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

源码：

// 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

源码：

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

做者：黑鱼仔 连接：https://www.jianshu.com/p/427a3aebe4a2 來源：简书 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。