iOS开发Facebook POP动效库使用教程
如果说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,请看这个教程:
步骤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动效库使用教程的更多相关文章
- Facebook POP动效库使用教程
编者注:用Origami作iOS动效的同学如果愁怎么实现,可以把这个给开发看看作为参考哦 如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地 ...
- iOS:iOS开发非常全的三方库、插件等等
iOS开发非常全的三方库.插件等等 github排名:https://github.com/trending, github搜索:https://github.com/search. 此文章转自git ...
- iOS开发 非常全的三方库、插件、大牛博客等等
UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableVie ...
- 前端必须收藏的CSS3动效库!!!
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- 【总结】前端必须收藏的CSS3动效库!!!
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- FaceBook pop 动画开源框架使用教程说明
https://github.com/facebook/pop Pop is an extensible animation engine for iOS and OS X. In addition ...
- iOS开发中用到的第三方库概览
前言:记录一下使用过和接触过的第三方库,重要程度与顺序无关 网络请求: AFNetworking:AFNetworking is a delightful networking library for ...
- IOS开发中有用的第三方库
#Objective-C中最受瞩目库 [链接](https://github.com/languages/Objective-C/most_watched) * [three20](https:/ ...
- faceBook Pop动画库手动添加版本
本人将pop的框架直接拖进工程里面然后按照教程导入头文件#import "POP.h"发现报找不到文件的错误,于是我手动将pop库里面所有类似于#import <POP/XX ...
随机推荐
- [OpenCV] Install openCV in Qt Creator
Learn openCV.pdf qmake: link with opencv (Key Point) QT += core gui greaterThan(QT_MAJOR_VERSION, 4) ...
- jackson反序列化时忽略不需要的字段
有时候,如果数据库表中增加一个字段,但返回的JSON字符串中含有我们并不需要的字段,那么当对应的实体类中不含有该字段时,会抛出一个异常,告诉你有些字段没有在实体类中找到.解决办法很简单,在声明Obje ...
- Linux的段错误调试方法
linux段错误的调试方法 相关博文: http://blog.csdn.net/htianlong/article/details/7439030 http://www.cnblogs.com/pa ...
- IT人的自我导向型学习:学习的3个维度
看到大家对我的文章赞了不少,看来大家还比较喜欢看.园子里的一些朋友和我说:”终于又看到你要在园子里发原创文章了.几年前就受益匪浅,经过几年的成长分享来的东西肯定也是精品.“ 感谢大家对我的信任,如果你 ...
- linux 系统管理 使用技巧
一.这篇文章讲了什么? 这篇文章很有参考性哈.本来是想等一段时间有更多条技巧后在发布的,不过,突然发现,我是去年的今天在博客园落户了,祝我的博客一周岁快乐,希望以后多分享一些文章啦.所以就把草稿箱的其 ...
- IOS开发UI基础UITextFidle相关属性
UITextFidle相关属性 • enablesReturnKeyAutomatically默认为No,如果设置为Yes,文本框中没有输入任何字符的话,右下角的返回按钮是disabled的. ...
- IE11之F12 Developer Tools--控制台工具(Console)
前面我们介绍了IE11的Developer Tools中的第一个工具--DOM Explorer,这篇文章介绍第二个工具--控制台(Console),使用控制台工具查看错误和其他信息.发送调试输出.检 ...
- Scrum 项目1.0 2.0 3.0 4.0 5.0 6.0 7.0
1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 阅读教材第8章,8 ...
- PHP 简单处理--文件下载--文件上传
文件下载部分 从 down 目录下下载,先获取目录下所有文件,再为每个文件添加download 信息,主要是文件名,后缀的关系. 分两部分,down_1.php 部分初始化,点击download 则跳 ...
- P6 EPPM R16.1安装与配置指南(二)
P6 EPPM R16.1安装与配置指南(一) http://www.cnblogs.com/endv/p/5634620.html P6 EPPM R16.1安装与配置指南(二) 环境变量配置 新建 ...