[设计师的程序思维]Origami落地-Xcode导入Faceb
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.安装会花些时间,耐心等待吧
图片引用自martinRGBsudo gem install cocoapods
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
接着会出现如下内容
安装cocoapods过程。Analyzing dependencies
Downloading dependenciesInstalling pop (1.0.9)
……
三. 将POP加入到工程头部
先前说,根据项目创建语言的不同,导入会有不同的方法。
1.OC导入方式:
oc建立项目文件自带"ViewControlor.m"和".h"头部文件
在"ViewControlor.m"中,加入
请忽略项目名非『owen』的问题#import <POP/POP.h>
添加之后,即可使用pop库。
2.swift 导入方式
swift文件结构并没有头部文件(因为是oc语言)
我们要手动添加oc的'.m'文件,文件中输入
#import <pop/POP.h>
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