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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/Ghosgt/p/8646982.html

时间: 2024-10-09 17:41:41

Facebook Pop介绍与使用的相关文章

iOS开发>学无止境 - POP 介绍与使用实践(快速上手动画)

作者:里脊串(@里脊串) 网址:http://adad184.com/2015/03/11/intro-to-pop/   前言 动画在APP开发过程中 大家多多少少都会接触到 而且随着ios7的扁平化风格启用之后 越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然 还是以国外的APP居多) 有过相关开发经验的同学肯定知道在iOS中 动画相关的部分都是基于Core Animation 但是今天我们不讨论Core Animation 今天的主角是POP -来自于Face

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

前言 动画在APP开发过程中 大家多多少少都会接触到 而且随着ios7的扁平化风格启用之后 越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然 还是以国外的APP居多) 有过相关开发经验的同学肯定知道在iOS中 动画相关的部分都是基于Core Animation 但是今天我们不讨论Core Animation 今天的主角是POP -来自于Facebook的动画引擎(其实我不喜欢把POP定义为动画引擎 我愿意称它为函数发生器) 介绍 官方地址 https://githu

iOS开发Facebook POP动效库使用教程

如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能搞定酷炫的动效. 步骤1: 安装 使用CocoaPods安装POP,只需要在Podfile中加入这么一行: pod 'pop', '~> 1.0' 或者如果想要手动添加,那么参考POP Github中的描述: 除此之外,你还可以将工程添加到工作区里面,然后采用提供的配制文件.或者手动复制POP子目录

Facebook POP动效库使用教程

编者注:用Origami作iOS动效的同学如果愁怎么实现,可以把这个给开发看看作为参考哦 如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能搞定酷炫的动效. 步骤1: 安装 使用CocoaPods安装POP,只需要在Podfile中加入这么一行: pod 'pop', '~> 1.0' 或者如果想要手动添加,那么参考POP Github中的描述:

Facebook POP 进阶指南

本文转自Kevin Blog Facebook 在发布了 Paper 之后,似乎还不满足于只是将其作为一个概念性产品,更进一步开源了其背后的动画引擎 POP,此举大有三年前发布的 iOS UI 框架 Three20 的意味.而 POP 开源后也不负 Facebook 的厚望. POP背后的开发者是 Kimon Tsinteris, Push Pop Press 的联合创始人,曾经在Apple担任高级工程师,并参与了 iPhone 和 iPad 上软件的研发(iPhone的指南针以及地图).201

iOS facebook PoP 初体验

说到pop,我学到了很多.第一次使用了,cocopods工具,因为不熟悉操作,昨天弄了好久,终于给掌握了.从安装到运行.为了给更多的人能够学到pop,我今天写一个完全版的从cocopods运用到pop动画简单介绍. 1.cocopods的安装.打开终端输入这个命令:  gem sources --remove https://rubygems.org/  等有反应后再输入:  gem sources -a http://ruby.taobao.org/  最好输入  gem sources -l

Facebook POP动画简单使用

简单实用POP动画 发现POP比较好的一点是保留了动画结束后的状态,通过block回调.使用POPAnimatableProperty 可以快速添加基本动画,也可以自定义属性动画. 弹性动画 - (void)spring{ POPSpringAnimation* framePOP = [POPSpringAnimation animationWithPropertyNamed:kPOPViewBackgroundColor]; framePOP.springSpeed = 10.f; frame

导入FaceBook POP报错

使用cocoaPods下载下来POP动画库,想手动导入到原来的工程,但是到了一堆错,什么文件没找到之类的.最后索性修改了所有的报错头文件: 修改POP.h后 : #import "POPAnimatableProperty.h" #import "POPAnimation.h" #import "POPAnimationEvent.h" #import "POPAnimationExtras.h" #import "

<转>iOS 事件处理机制与图像渲染过程

原文:http://mp.weixin.qq.com/s?__biz=MjM5OTM0MzIwMQ==&mid=401383686&idx=1&sn=1613dfa8fa762a0efee4bc4af496fddf&scene=0#wechat_redirect iOS RunLoop都干了什么 RunLoop是一个接收处理异步消息事件的循环,一个循环中:等待事件发生,然后将这个事件送到能处理它的地方. 如图1-1所示,描述了一个触摸事件从操作系统层传送到应用内的main