iOS开发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 <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)

时间: 2024-12-04 19:31:39

iOS开发Facebook POP动效库使用教程的相关文章

Facebook POP动效库使用教程

编者注:用Origami作iOS动效的同学如果愁怎么实现,可以把这个给开发看看作为参考哦 如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能搞定酷炫的动效. 步骤1: 安装 使用CocoaPods安装POP,只需要在Podfile中加入这么一行: pod 'pop', '~> 1.0' 或者如果想要手动添加,那么参考POP Github中的描述:

iOS开发 非常全的三方库、插件、大牛博客等等

UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能.可以自定义上下拉刷新的文字说明.具体使用看"使用方法". (国人写) XHRefreshControl- XHRefreshControl 是一款高扩展性.低耦合度的下拉刷新.上提加载更多的组件.(国人写) CBStoreHo

iOS:iOS开发非常全的三方库、插件、大牛博客等等

iOS开发非常全的三方库.插件.大牛博客等等 github排名:https://github.com/trending, github搜索:https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableView或

iOS开发&gt;学无止境 - POP 介绍与使用实践(快速上手动画)

作者:里脊串(@里脊串) 网址:http://adad184.com/2015/03/11/intro-to-pop/   前言 动画在APP开发过程中 大家多多少少都会接触到 而且随着ios7的扁平化风格启用之后 越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然 还是以国外的APP居多) 有过相关开发经验的同学肯定知道在iOS中 动画相关的部分都是基于Core Animation 但是今天我们不讨论Core Animation 今天的主角是POP -来自于Face

Android开发--Facebook酷炫开源库Shimmer使用

今天在上网的时候无意间看到了Facebook的Shimmer开源库,感觉很是酷炫,而且使用超方便,决定给大家介绍一下.Shimmer是Facebook提供的一项基于Java的library,它可以使Android中的所有View控件具有闪光的效果.该项目的GitHub项目托管地址,请猛戳https://github.com/facebook/shimmer-android 使用Shimmer 配置工程 首先,我们在GitHub上将该项目clone到本地: 接下来我们在Android studio

iOS 开发的非常有用 第三方库

ios中那些好用的第三方库 ios 里面有很多很多好用的第三方框架,有许多是项目中必用的,本文主要来写一些常用的ios第三方库的使用 (一)Masonry Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X. Masonry是一个用代码写ios或os界面的库,可以代替Auto layout. Masonry的github地址:https://github.com/SnapKit/Maso

iOS开发中用到的第三方库概览

前言:记录一下使用过和接触过的第三方库,重要程度与顺序无关 网络请求: AFNetworking:AFNetworking is a delightful networking library for iOS and Mac OS X. YTKNetwork:YTKNetwork is a high level request util based on AFNetworking. 转模型 MJExtension:A fast, convenient and nonintrusive conve

IOS开发中有用的第三方库

#Objective-C中最受瞩目库 [链接](https://github.com/languages??/Objective-C/most_watched) * [three20](https://github.com/facebook/three20) * faebook的320库** * [AFNetworking](https://github.com/AFNetworking/AFNetworking) *网络库** * [MBProgressHUD](https://github.

[IOS开发] Cocos2d-x2.2使用Admob插屏广告教程(一)

?1.版别 Cocos2d-x 2.2    GoogleAdMobAdsSdkiOS-6.5.1 2.导入 2.1导入头文件和.a文件 并在Librabry Search Paths中添加.a文件的路径 2.2导入所需iOS构造 AdSupport.framework    StoreKit.framework    AudioToolbox.framework    MediaPlayer.framework    MessageUI.framework    SystemConfigura