[设计师的程序思维]Origami落地-Xcode导入Facebook pop动画库教程

Origami是Facebook团队开发的QC动画插件库。高效实现了很多方便常用的动画。移步官网

有些初次使用Origami的动效设计师会被其可以输出代码的功能所吸引，于是拿着代码跟研发同学说：『看~代码在此，copy进去就好啦~』。其实殊不知，为了和origami配合，研发团队的Xcode中也要导入Facebook开源的pop动画库来配合使用，才能达到落地效果。（Facebook团队使用pop库研发的app：Paper）

感谢Facebook开源了POP动效库，让制作酷炫动效轻而易举。

以下为Xcode导入pop动画的具体步骤。

一、安装CocoaPods的前奏搭建Ruby环境。

1.安装Xcode，新建一个项目。项目名称自拟。本文中为『owen』

根据编写习惯，会有盆友创建OC或者swift项目。这里都可以，以后的导入头部信息会有些不同，后面会详细说明。

2.先安装rvm(ruby 版本管理器)。在终端中输入：

curl -sSL https://get.rvm.io | bash-s stable

等待一段时间后就可以成功安装好 RVM。然后，载入 RVM 环境

source ~/.rvm/scripts/rvm

安装完成后可以检查一下是否安装成功：

rvm -v

3.用 RVM 安装 Ruby 环境

列出已知的ruby版本，执行：

rvm list known

可以选择现有的rvm版本来进行安装(以2.3为例)

rvm install 2.3.0

之中会要求安装homebrew:按照要求顺序安装即可。

根据网速，安装过程中可能会花较长时间。

继续等待漫长的下载，编译过程，完成以后，Ruby, Ruby Gems 就安装好了

备注：查询已经安装的ruby

rvm list

卸载一个已安装版本

rvm remove 1.9.2

4.设置 Ruby 版本

RVM 装好以后，需要执行下面的命令将指定版本的 Ruby 设置为系统默认版本

rvm 2.3.0 --default

同样，也可以用其他版本号，前提是你有用 rvm install 安装过那个版本

这个时候你可以测试是否正确，

ruby -v

gem -v

查看版本

看看是否是最新版本，如果不是输入

gem update --system。

在此过程中可能会出现权限问题。就在命令前加sudo，即可升至最新版本。

sudo gem update --system。

Ruby的默认源使用的是cocoapods.org，国内访问这个网址有时候会有问题，网上的一种解决方案是将远替换成淘宝的，替换方式如下：

gem source -r https://rubygems.org/

gem source -a https://ruby.taobao.org

完成后，输入gem sources -l会显示：

*** CURRENT SOURCES ***

https：//ruby.taobao.org/

二.安装cocoapods

1.安装会花些时间，耐心等待吧

sudo gem install cocoapods

图片引用自martinRGB

2.创建Podfile

推荐使用终端创建。在终端中输入cd+空格。把项目文件夹拖到终端中，会自动写入路径。然后回车会转到你的项目文件夹中。然后执行如下指令，会自动创建Podfile文件。(pop库是跟项目的，用之前xcode建立的项目)

pod init

执行后自动创建文件。

用文本编辑器打开文件，加入如下代码：

pod 'pop','~>1.0'

platform :ios, '7.0'

pod 'AFNetworking', '~> 2.0'

加入圈红代码

7.0 安装库

依然cd 到项目文件夹（Podfile所在文件夹，方法同上）。在终端中输入

pod install

第一次运行会比较慢，提示如下：

Settingup CocoaPods master repo

接着会出现如下内容

Analyzing dependencies

Downloading dependenciesInstalling pop (1.0.9)

……

安装cocoapods过程。

三. 将POP加入到工程头部

先前说，根据项目创建语言的不同，导入会有不同的方法。

1.OC导入方式：

oc建立项目文件自带"ViewControlor.m"和".h"头部文件

在"ViewControlor.m"中，加入

#import

请忽略项目名非『owen』的问题

添加之后，即可使用pop库。

2.swift 导入方式

swift文件结构并没有头部文件（因为是oc语言）

我们要手动添加oc的'.m'文件，文件中输入

#import

enjoy~

资料参考：

http://www.jianshu.com/p/8d75fc0de4a9

http://blog.csdn.net/mydo/article/details/51679425

http://www.cnblogs.com/daguo/p/4097263.html

http://www.cnblogs.com/daguo/p/4097263.html

http://www.ui.cn/detail/21165.html