Facebook POP Demo
2016-02-22 13:56
274 查看
如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基。感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效。我们只需5步,便能搞定酷炫的动效。
使用CocoaPods安装POP,只需要在Podfile中加入这么一行:
或者如果想要手动添加,那么参考POP Github中的描述:
除此之外,你还可以将工程添加到工作区里面,然后采用提供的配制文件。或者手动复制POP子目录下的文件,复制到工程里面。如果选择手动安装,确保C++标准库链入其中,只需要在项目链接标记中包含 -lc++即可。
Facebook POP动效库:https://github.com/facebook/pop
如果不懂得如何使用CocoaPods,请看这个教程:
《CocoaPods简易使用指南》
在工程开头添加如下:
使用POP可以创建4类动效:: spring, decay, basic and custom.
Spring (弹性)动效可以赋予物体愉悦的弹性效果
Decay (衰减) 动效可以用来逐渐减慢物体的速度至停止
Basic(基本)动效可以在给定时间的运动中插入数值调整运动节奏
Custom(自定义)动效可以让设计值创建自定义动效,只需简单处理CADisplayLink,并联系时间-运动关系
在这片简短教程中将不涵盖自定义动效,大家可以看看POP的Github来获取更多进阶知识https://github.com/facebook/pop
Pop 让我们可以这样设置动效的属性:
velocity : anim.velocity = @(1000.);
fromValue: anim.fromValue = @(0.0);
toValue: anim.toValue = @(1.0);
bounciness: anim.springBounciness = 10;
若想让物体动起来,只需要添加步骤3所创建的东西到视图。
这就是POP简单创建动效的教程。大家可以看看例子来理解如何创建动效。争取努力变得技艺纯熟吧。
Pop有相关文件扩展作为测试。安装测试文件的方法是用终端进入POP根目录,然后输入
必须确保CocoaPods已经安装
这个动效将按钮缩小到一半
这个动效将按钮旋转
这个改变透明度:
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)
步骤1: 安装
使用CocoaPods安装POP,只需要在Podfile中加入这么一行:pod 'pop', '~> 1.0'
或者如果想要手动添加,那么参考POP Github中的描述:
除此之外,你还可以将工程添加到工作区里面,然后采用提供的配制文件。或者手动复制POP子目录下的文件,复制到工程里面。如果选择手动安装,确保C++标准库链入其中,只需要在项目链接标记中包含 -lc++即可。
Facebook POP动效库:https://github.com/facebook/pop
如果不懂得如何使用CocoaPods,请看这个教程:
《CocoaPods简易使用指南》
步骤2: 将POP加入到工程中
在工程开头添加如下:<span class="post-preStrong" style="font-weight: bold;">#import <POP/POP.h></span>
步骤 3:创建动效
使用POP可以创建4类动效:: spring, decay, basic and custom.Spring (弹性)动效可以赋予物体愉悦的弹性效果
POPSpringAnimation <span class="post-preStrong" style="font-weight: bold;">*</span>anim <span class="post-preStrong" style="font-weight: bold;">=</span> [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
Decay (衰减) 动效可以用来逐渐减慢物体的速度至停止
POPDecayAnimation <span class="post-preStrong" style="font-weight: bold;">*</span>anim <span class="post-preStrong" style="font-weight: bold;">=</span> [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
Basic(基本)动效可以在给定时间的运动中插入数值调整运动节奏
POPBasicAnimation <span class="post-preStrong" style="font-weight: bold;">*</span>anim <span class="post-preStrong" style="font-weight: bold;">=</span> [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 <span class="post-preStrong" style="font-weight: bold;">*</span>opacityAnimation <span class="post-preStrong" style="font-weight: bold;">=</span> [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity];
opacityAnimation.toValue <span class="post-preStrong" style="font-weight: bold;">=</span> @(0.5);
[animView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"];
#更多
Pop Github : https://github.com/facebook/popPopping -Pop案例 : https://github.com/schneiderandre/popping
POP使用教程: https://github.com/maxmyers/FacebookPop
中文教程
POP使用指南(来自Cocohina)
使用FaceceBook的Pop框架替换UIScrollView的减速动画(来自Cocohina)
Facebook POP 进阶指南(来自Cocohina)
相关文章推荐
- 2016:如何选择 Linux 发行版
- DRDB安装配置详解+NFS(Mysql)+Heartbeat高可用实例配置-任志远
- kafka监控
- 二代旅游CMS网站管理系统使用手册(一)--系统介绍
- opencv 特征提取综述
- OPC Client 连接OPC Server 启动多个实例原因分析
- Linux下统计出现次数最多的指定字段值
- Linux DHCP服务器基本设定
- centos 修改tomcat6 8080端口到其它两个范围
- eclipse内存设置,tomcat内存设置,查看内存大小
- 部署Zabbix监控平台
- windows上安装openfire
- 部署Cacti监控平台
- 学习linux计划书
- CentOS 6.5系统中安装配置MySQL数据库
- Mac环境下配置Hadoop-2.6.2版本
- 学习linux运维计划书
- Microservice架构模
- 学习运维计划书
- 为LINUX创建SWAP分区