两全其美网校城

 找回密码
 注册

Facebook POP动效库使用教程

2015-6-19 14:16| 发布者: ashouyi| 查看: 140| 评论: 0

摘要:   Facebook POP动效库使用教程   如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基。感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效。我们只需5步,便能搞定酷炫 ...

  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,请看这个教程:

  《CocoaPods简易使用指南》

  步骤2: 将POP加入到工程中

  在工程开头添加如下:

  #import

  步骤 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已经安装


鲜花

握手

雷人

鸡蛋

路过

相关分类

Baidu
中华会计网校 新东方网络课堂 中华会计网校会计继续教育 新东方网校 环球网校 中公网校

小黑屋|手机版|关于我们|两全其美网校城 ( 京ICP备05068258-34 )

GMT+8, 2024-4-25 13:51

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

返回顶部