文档章节

Facebook POP动效库使用教程

tonychb
 tonychb
发布于 2015/05/05 10:34
字数 717
阅读 60
收藏 0

步骤1: 安装


使用CocoaPods安装POP,只需要在Podfile中加入这么一行:

pod 'pop', '~> 1.0'

或者如果想要手动添加,那么参考POP Github中的描述:

除此之外,你还可以将工程添加到工作区里面,然后采用提供的配制文件。或者手动复制POP子目录下的文件,复制到工程里面。如果选择手动安装,确保C++标准库链入其中,只需要在项目链接标记中包含 -lc++即可。

Facebook POP动效库:https://github.com/facebook/pop

如果不懂得如何使用CocoaPods,请看这个教程:

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)


demo参考链接:https://github.com/jxd001/POPdemo/blob/master/README.md

                              http://codeplease.io/

                              http://tapity.com/tutorial-getting-started-with-pop/


本文转载自:http://www.ui.cn/detail/21148.html

tonychb
粉丝 3
博文 29
码字总数 922
作品 0
深圳
私信 提问
iOS开发自学资源

iOS开发完全自学资源集合 字数1740 阅读2910 评论36 喜欢299 如果你有一个很好的想法,为什么不自己动手做一个App来实现它呢。即使你完全没有编程经验也没有关系,通过以下这些精心挑选的教程...

上官尘
2016/03/28
72
0
【开发者福利】最全面的移动端免费素材合集

在移动端设计风起云涌的今天,移动端的UI和UX设计师任重而道远。巧妇难为无米之炊,好素材就是设计师的底气。这次搜集的移动端免费素材覆盖全面,从教学资源到UI Kit,从开发工具到图标合集,...

拉偶有所依
2015/01/06
1K
1
一个产品从0到1,UI设计师参与的所有步骤与所需工具(内附资源下载)。

本文的前4步适用于公司没有产品经理的情况下。 Step 1 讨论 & 草图框架 所需工具:纸、笔 与客户或产品负责人讨论,了解产品的需求。讨论前带好纸笔,讨论时可以画出大概的框架草图。 若是外...

西瓜设计研究所
2017/12/04
0
0
Principle:做动效,选对软件很重要

原文出处:@Smallneinei 你有多久没做动效了?平时的工作主要是终端视觉设计,功能需求加运营需求,静态稿件加动效设计,从比例来看,动效设计其实不会占很多空间,但偶尔也会来一波。而实际...

@Smallneinei
2015/12/04
0
0
干货分享!HTML5 动效的常见制作手法

原文出处:腾讯ISUX - 田田 众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品...

腾讯ISUX - 田田
2015/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql已存在的表增加自增字段

需求: 已有的mysql数据表,希望增加一个自增的字段,并设置新数据的初始值。 实际上不复杂,只是做个备忘。 测试表 CREATE TABLE `t_abc` ( `name` varchar(20) DEFAULT NULL) ENGINE=In...

polly
19分钟前
1
0
去掉截屏功能

/home/rk3288_600_f703/frameworks/base/services/core/java/com/android/server/policy/PhoneWindowManager.java 有一个截屏的线程,注释掉...

安卓工程师王恒
27分钟前
0
0
解决vim打开之后乱码的问题

在Windows中的文档,传输到Linux系统中(使用rz命令),出现乱码 root@localhost ~]# rpm -qf `which iconv` glibc-common-2.17-105.el7.x86_64 [root@localhost ~]# rpm -ihv /mnt/Packages......

寰宇01
44分钟前
2
0
aldi 2017年1月记录

../../tools/CBLAS/lib/cblas_LINUX.a ../../tools/lapack-3.4.2/liblapacke.a \../../tools/lapack-3.4.2/librefblas.a -lgfortran \../../tools/lapack-3.4.2/liblapack.a \../../......

MtrS
45分钟前
3
0
Choerodon如何进行日志收集与告警

作者:董文启 应用程序日志是由软件应用程序记录的事件文件, 它一般包含错误,信息事件和警告。一个良好的日志系统有助于快速发现问题,定位问题,同时也为业务分析起到一定的作用。 传统E...

Choerodon
57分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部