如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基。感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效。我们只需5步,便能搞定酷炫的动效。

步骤1: 安装

使用CocoaPods安装POP,只需要在Podfile中加入这么一行:

pod 'pop', '~> 1.0'

或者如果想要手动添加,那么参考POP Github中的描述:

除此之外,你还可以将工程添加到工作区里面,然后采用提供的配制文件。或者手动复制POP子目录下的文件,复制到工程里面。如果选择手动安装,确保C++标准库链入其中,只需要在项目链接标记中包含 -lc++即可。

Facebook POP动效库:https://github.com/facebook/pop

如果不懂得如何使用CocoaPods,请看这个教程:

CocoaPods简易使用指南

步骤2: 将POP加入到工程中

在工程开头添加如下:

#import <POP/POP.h>

步骤 3:创建动效

使用POP可以创建4类动效:: spring, decay, basic and custom.

Spring (弹性)动效可以赋予物体愉悦的弹性效果

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

Decay (衰减) 动效可以用来逐渐减慢物体的速度至停止

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];

Basic(基本)动效可以在给定时间的运动中插入数值调整运动节奏

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];

Custom(自定义)动效可以让设计值创建自定义动效,只需简单处理CADisplayLink,并联系时间-运动关系

在这片简短教程中将不涵盖自定义动效,大家可以看看POP的Github来获取更多进阶知识https://github.com/facebook/pop

步骤4: 给动效添加属性

Pop 让我们可以这样设置动效的属性:

velocity : anim.velocity @(1000.);

fromValue: anim.fromValue @(0.0);

toValue: anim.toValue @(1.0);

bounciness: anim.springBounciness 10;

步骤5 :动起来

若想让物体动起来,只需要添加步骤3所创建的东西到视图。

[self.yourView.layer pop_addAnimation:anim forKey:@"typeANameForYourAnimationHere"];

这就是POP简单创建动效的教程。大家可以看看例子来理解如何创建动效。争取努力变得技艺纯熟吧。

步骤6:测试效果

Pop有相关文件扩展作为测试。安装测试文件的方法是用终端进入POP根目录,然后输入

pod install

必须确保CocoaPods已经安装

# 动效案例

这个动效将按钮缩小到一半

POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; 
scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.5, 0.5)]; 
scaleAnimation.springBounciness = 10.f; 
[self.button.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnim"];

这个动效将按钮旋转

POPSpringAnimation *rotationAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];
rotationAnimation.beginTime = CACurrentMediaTime() + 0.2;
rotationAnimation.toValue = @(1.2); 
rotationAnimation.springBounciness = 10.f; 
rotationAnimation.springSpeed = 3; 
[button.layer pop_addAnimation:rotationAnimation forKey:@”rotationAnim”];

这个改变透明度:

POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity];
opacityAnimation.toValue = @(0.5);
[animView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"];

#更多

Pop Github : https://github.com/facebook/pop

Popping -Pop案例 : https://github.com/schneiderandre/popping

POP使用教程: https://github.com/maxmyers/FacebookPop

中文教程

POP使用指南(来自Cocohina)

使用FaceceBook的Pop框架替换UIScrollView的减速动画(来自Cocohina)

Facebook POP 进阶指南(来自Cocohina)

iOS开发Facebook POP动效库使用教程的更多相关文章

  1. Facebook POP动效库使用教程

    编者注:用Origami作iOS动效的同学如果愁怎么实现,可以把这个给开发看看作为参考哦 如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地 ...

  2. iOS:iOS开发非常全的三方库、插件等等

    iOS开发非常全的三方库.插件等等 github排名:https://github.com/trending, github搜索:https://github.com/search. 此文章转自git ...

  3. iOS开发 非常全的三方库、插件、大牛博客等等

    UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableVie ...

  4. 前端必须收藏的CSS3动效库!!!

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

  5. 【总结】前端必须收藏的CSS3动效库!!!

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

  6. FaceBook pop 动画开源框架使用教程说明

    https://github.com/facebook/pop Pop is an extensible animation engine for iOS and OS X. In addition ...

  7. iOS开发中用到的第三方库概览

    前言:记录一下使用过和接触过的第三方库,重要程度与顺序无关 网络请求: AFNetworking:AFNetworking is a delightful networking library for ...

  8. IOS开发中有用的第三方库

    #Objective-C中最受瞩目库 [链接](https://github.com/languages​​/Objective-C/most_watched) * [three20](https:/ ...

  9. faceBook Pop动画库手动添加版本

    本人将pop的框架直接拖进工程里面然后按照教程导入头文件#import "POP.h"发现报找不到文件的错误,于是我手动将pop库里面所有类似于#import <POP/XX ...

随机推荐

  1. poj 1474 Video Surveillance - 求多边形有没有核

    /* poj 1474 Video Surveillance - 求多边形有没有核 */ #include <stdio.h> #include<math.h> const d ...

  2. C#将Json字符串反序列化成List对象类集合

    摘自:http://blog.csdn.net/cdefg198/article/details/7520398 using System.IO; using System.Web.Script.Se ...

  3. 在Eclipse中进行HotSpot的源码调试--转

    原文地址:http://www.linuxidc.com/Linux/2015-05/117250.htm 在阅读OpenJDK源码的过程中,经常需要运行.调试程序来帮助理解.我们现在已经可以编译出一 ...

  4. [C#] 谈谈异步编程async await

    为什么需要异步,异步对可能起阻止作用的活动(例如,应用程序访问 Web 时)至关重要. 对 Web 资源的访问有时很慢或会延迟. 如果此类活动在同步过程中受阻,则整个应用程序必须等待. 在异步过程中, ...

  5. struts2重点——ValueStack和OGNL

    一.值栈(ValueStack) 1.实现类:OGNLValueStack 2.对象栈:CompoundRoot(针对的是类级别的) (1)继承自 ArrayList —— 先进后出 (2)提供了栈的 ...

  6. Qt Style Sheet实践(四):行文本编辑框QLineEdit及自动补全

    导读 行文本输入框在用于界面的文本输入,在WEB登录表单中应用广泛.一般行文本编辑框可定制性较高,既可以当作密码输入框,又可以作为文本过滤器.QLineEdit本身使用方法也很简单,无需过多的设置就能 ...

  7. IOS 之 PJSIP 笔记(二) iPJSUA 的简单使用

    上一篇在编译完之后,就很不负责的结束了,本篇就对 PJSIP 库中提供的一个示例 iPJSUA 的使用,做一个简单的介绍.也能解除很多人对官方文档的一个困扰,起码我是被困扰过了. 首先,要确保你的 P ...

  8. 011_URL和Ajax辅助器方法

    创建基本的链接和URL 在我们介绍链接或URL之前先做一些准备,我们这部分要介绍的知识将要使用的项目就是之前建立的HelperMethods项目,现在需要先为其添加一个People控制器,并在其中定义 ...

  9. 不可或缺 Windows Native (9) - C 语言: 动态分配内存,链表,位域

    [源码下载] 不可或缺 Windows Native (9) - C 语言: 动态分配内存,链表,位域 作者:webabcd 介绍不可或缺 Windows Native 之 C 语言 动态分配内存 链 ...

  10. Jquery的画图插件-jqPlot+

    JqPlot(个人和商业都免费) http://yunpan.cn/Q7Yh5dUNPjtak  提取码 3653 下面开始制作一个柱状图: ----------------------------我 ...