Facebook POP动效库使用教程
编者注:用Origami作iOS动效的同学如果愁怎么实现,可以把这个给开发看看作为参考哦
如果说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)
Facebook POP动效库使用教程的更多相关文章
- iOS开发Facebook POP动效库使用教程
如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能 ...
- 前端必须收藏的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 ...
- faceBook Pop动画库手动添加版本
本人将pop的框架直接拖进工程里面然后按照教程导入头文件#import "POP.h"发现报找不到文件的错误,于是我手动将pop库里面所有类似于#import <POP/XX ...
- css动效库animate.css和swiper.js
animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...
- Principle如何制作动效设计?简单易学的Principle动效设计教程
Principle for Mac是一款新开发的交互设计软件.相比 Pixate 更容易上手,界面类似 Sketch 等做图软件,思路有点像用 Keynote 做动画,更「可视化」一些. 如果您还没有 ...
- Facebook的Pop动画库相关资料
https://github.com/facebook/pop http://www.cocoachina.com/industry/20140507/8339.html http://www.ui. ...
- Facebook 开源动画库 pop
官网:https://github.com/facebook/pop Demo: https://github.com/callmeed/pop-playground 一:pop的基本构成: POPP ...
随机推荐
- (转)AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...
- Android SDK 开发指南
Android SDK 开发指南 视频详解 以下视频是对融云 Android SDK 开发使用的详细讲解,您可以在阅读文档时配合学习. 更多视频教程如下: CSDN 融云 Android SDK ...
- 装配SpringBean(二)--XML方式介绍
装配SpringBean,我理解的意思就在容器中定义一个bean,然后让容器通过某种方式找到它.因为在Spring中一切皆资源,资源就是所谓的bean,我们怎么才能从容器中获取这些资源呢?那就是控制反 ...
- DIV+CSS标准化布局
1.DIV+CSS布局 说明:在网页开发制作中,需要对页面内容进行“模块化标准布局”,把内容放入到某个位置,让页面形成固定规律展示出来 模块化:在网页中所有的内容都是以块来展示的 标准化:在开发网站时 ...
- 搭建maven聚合工程包含springboot模块
一.新建一个maven项目 二.删除src 打开pom.xml 补充标签 <packaging>pom</packaging> 新建 <module>brr- ...
- xshell下载免费版
正在使用的xshell 5不能使用,提示xshell 5评估期已过,重新安装还是不行.其实xshell 5有免费版的,即Home & school 版本.卸载原程序,下载安装免费版本的xshe ...
- 宝塔https
登录宝塔论坛,然后申请免费的https,然后在域名控制面板添加解析并验证,最后宝塔强制https跳转
- Javascript-简单的计时钟表
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- springcloud的服务提供者与服务消费者
1.说明 springcloud中由服务消费者调用服务提供者一共有两种方法rest和feign 2.feign (1)使用feign的方式进行服务调,搭建服务提供者. 创建一个web项目(服务提供者) ...
- Spring相关技术记录
@ResponseStatus(value=) Hibernate OneToOne: 使用optional=false,才能使用lazy 如果关联字段是当前表的主键,我试了不加optional=fa ...