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