Facebook POP动画简单使用

简单实用POP动画

发现POP比较好的一点是保留了动画结束后的状态,通过block回调。使用POPAnimatableProperty 可以快速添加基本动画,也可以自定义属性动画。

弹性动画

- (void)spring{

POPSpringAnimation* framePOP = [POPSpringAnimation
animationWithPropertyNamed:kPOPViewBackgroundColor];

framePOP.springSpeed =
10.f;

framePOP.springBounciness =
4.f;

framePOP.toValue =  [UIColor
greenColor];

[framePOP
setCompletionBlock:^(POPAnimation * anim ,
BOOL finsih) {

if (finsih) {

NSLog(@"view.frame = %@",NSStringFromCGRect(view.frame));

}

}];

[view
pop_addAnimation:framePOP forKey:@"go"];

}

减缓动画

- (void)Decay{

POPDecayAnimation* decay = [POPDecayAnimation
animationWithPropertyNamed:kPOPViewFrame];

//    decay.toValue = [NSValue valueWithCGRect:CGRectMake(200, 400, 100, 100)];

decay.velocity = [NSValue
valueWithCGRect:CGRectMake(200,
300, 100,
100)];

[view
pop_addAnimation:decay forKey:@"go"];

}

基本动画

-(void)basic{

POPBasicAnimation* basicAnimation = [POPBasicAnimation
animationWithPropertyNamed:kPOPLayerCornerRadius];

basicAnimation.toValue = [NSNumber
numberWithFloat:CGRectGetHeight(view.frame)/2.];

basicAnimation.timingFunction =[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

//    basicAnimation.duration = 3.f;

[basicAnimation
setCompletionBlock:^(POPAnimation * ani,
BOOL fin) {

if (fin) {

NSLog(@"view.frame = %@",NSStringFromCGRect(view.frame));

//            POPBasicAnimation* newBasic = [POPBasicAnimation easeInEaseOutAnimation];

//            newBasic.property = [POPAnimatableProperty propertyWithName:kPOPLayerCornerRadius];

//            newBasic.toValue = [NSNumber numberWithFloat:0];

//            [view.layer pop_addAnimation:newBasic forKey:@"go"];

}

}];

[view.layer
pop_addAnimation:basicAnimation
forKey:@"frameChange"];

}

组合动画

-(void)group

{

view.transform =
CGAffineTransformMakeRotation(M_PI_2/3);

POPBasicAnimation* spring = [POPBasicAnimation
animationWithPropertyNamed:kPOPLayerPositionY];

spring.beginTime =
CACurrentMediaTime();

spring.duration =
.4f;

spring.fromValue = [NSNumber
numberWithFloat:-100.f];

spring.toValue = [NSNumber
numberWithFloat:CGRectGetMinY(view.frame) +
80];

[spring
setCompletionBlock:^(POPAnimation * ani,
BOOL fin) {

}];

POPBasicAnimation* basic = [POPBasicAnimation
animationWithPropertyNamed:kPOPLayerRotation];

basic.beginTime =
CACurrentMediaTime();

basic.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

basic.toValue = [NSNumber
numberWithFloat:-M_PI_4];

basic.duration =
.4f;

POPBasicAnimation* rotation = [POPBasicAnimation
animationWithPropertyNamed:kPOPLayerRotation];

rotation.beginTime =
CACurrentMediaTime() +
.4f;

rotation.toValue = [NSNumber
numberWithFloat:0.f];

rotation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

rotation.duration =
.25f;

POPBasicAnimation* donw = [POPBasicAnimation
animationWithPropertyNamed:kPOPLayerPositionY];

donw.beginTime =
CACurrentMediaTime() +
0.4f;

donw.toValue = [NSNumber
numberWithFloat:CGRectGetMinY(view.frame)];

donw.duration =
.25f;

donw.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

[view.layer
pop_addAnimation:spring forKey:@"spring"];

[view.layer
pop_addAnimation:basic forKey:@"basic"];

[view.layer
pop_addAnimation:donw forKey:@"down"];

[view.layer
pop_addAnimation:rotation forKey:@"rotation"];

}

时间: 2024-11-05 19:29:29

Facebook POP动画简单使用的相关文章

POP动画引擎中Layer与CALayer的一点区别

POP动画引擎是facebook提供的一个开源框架, 可以实现很多的动画效果, 这里就不一一介绍啦, 有兴趣的童鞋请移步: https://github.com/facebook/pop 下面简单的讲一下POP动画引擎中Layer与CALayer的区别: 这里, 代码做的都是同一个效果: 执行位移动画3秒, 然后在1秒后移除所有动画 使用POP效果图: 使用CALayer效果图: 可以看到, POP执行的动画当动画被移除之后, 被执行对象保留了被停止时的状态 而CALayer执行的动画当动画被移

iOS facebook PoP 初体验

说到pop,我学到了很多.第一次使用了,cocopods工具,因为不熟悉操作,昨天弄了好久,终于给掌握了.从安装到运行.为了给更多的人能够学到pop,我今天写一个完全版的从cocopods运用到pop动画简单介绍. 1.cocopods的安装.打开终端输入这个命令:  gem sources --remove https://rubygems.org/  等有反应后再输入:  gem sources -a http://ruby.taobao.org/  最好输入  gem sources -l

[翻译] POP Facebook的动画开源库

Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it supports spring and decay dynamic animations, making it useful for building realistic, physics-based interactions. The API allows quick integration wit

POP简单动画简单使用 (入门级别)

动画可以让APP"更友好"的与用户交互,苹果提供很多的好看的动画供开发者使用,不过简单的平移.旋转.缩放.......使用起来很简单,但是想要进行一些比较复杂的动画效果,使用起来就比较难以实现,俗话说需求促进开发,facebook提供的开源的框架供我们免费使用,底层使用的是c++去实现,流畅度不输苹果的动画效果,甚至有的动画效果看起来比苹果提供的动画更"流畅"...... 这篇文章介绍大名鼎鼎的POP动画的使用 POP:   https://github.com/f

iOS开发Facebook POP动效库使用教程

如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能搞定酷炫的动效. 步骤1: 安装 使用CocoaPods安装POP,只需要在Podfile中加入这么一行: pod 'pop', '~> 1.0' 或者如果想要手动添加,那么参考POP Github中的描述: 除此之外,你还可以将工程添加到工作区里面,然后采用提供的配制文件.或者手动复制POP子目录

Facebook POP 进阶指南

本文转自Kevin Blog Facebook 在发布了 Paper 之后,似乎还不满足于只是将其作为一个概念性产品,更进一步开源了其背后的动画引擎 POP,此举大有三年前发布的 iOS UI 框架 Three20 的意味.而 POP 开源后也不负 Facebook 的厚望. POP背后的开发者是 Kimon Tsinteris, Push Pop Press 的联合创始人,曾经在Apple担任高级工程师,并参与了 iPhone 和 iPad 上软件的研发(iPhone的指南针以及地图).201

Facebook POP动效库使用教程

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

Facebook Pop介绍与使用

前言 前段时间花了点时间,稍微看了下核心动画,感觉还是学到了不少,顺便给大家安利一个网站,这上面是对<iOS Core Animation: Advanced Techniques>的中文译本.有兴趣的同学可以花时间好好看看-接下来看我们今天的主角POP-Facebook出品的动画引擎. 介绍 Pop是一个动画引擎,用以扩展iOS.OSX的动画类型.相较于iOS.OSX中的基本动画效果,Pop扩展后支持弹簧动画效果与衰减动画效果,你可以用Pop动画引擎来构建出真实的物理交互效果.它的API与C

POP动画[1]

POP动画[1] pop动画是facebook扩展CoreAnimation的,使用及其方便:) 1:Spring系列的弹簧效果(两个动画kPOPLayerBounds与kPOPLayerCornerRadius同时运行) #import "RootViewController.h" #import "YXEasing.h" #import "POP.h" #import "YXGCD.h" @interface RootVi