使用 Facebook 开源动画库 POP 实现真实衰减动画

1. POP 动画基于底部刷新原理,是基于CADisplayLink,1秒钟执行60秒,接近于游戏开发引擎

@interface
ViewController ()

@property (nonatomic,strong)CADisplayLink *displayLink;

@property (nonatomic)      NSInteger     count;

@end

- (void)viewDidLoad {

[superviewDidLoad];

self.displayLink = [CADisplayLinkdisplayLinkWithTarget:self

selector:@selector(displayLinkEvent:)];

[self performSelector:@selector(eventOne)

withObject:nil

afterDelay:1];

[self performSelector:@selector(eventTwo)

withObject:nil

afterDelay:2];

}

- (void)displayLinkEvent:(id)obj

{

self.count ++;

NSLog(@"count = %ld",(long)self.count);

}

- (void)eventOne{

[self.displayLinkaddToRunLoop:[NSRunLoopcurrentRunLoop]
forMode:NSDefaultRunLoopMode];

}

- (void)eventTwo{

[self.displayLinkinvalidate];

}

二、POP 动画引擎中 Layer 与 CALayer 的联系与区别

1.使用pop动画与使用CALayer动画非常相似

2.POP动画的执行没有中间状态

3.POP动画是对CALayer的动画的扩充,但不能实现所有的CALayer的动画效果

4.POP动画可以作用在任何对象上,不仅仅是CALayer

- (void)accessNormalLayer{

self.normalLayer = [CALayerlayer];

self.normalLayer.frame =CGRectMake(100,100,
100, 100);

self.normalLayer.backgroundColor = [UIColorredColor].CGColor;

[self.view.layeraddSublayer:self.normalLayer];

//

CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];

basicAnimation.fromValue    = [NSValue valueWithCGPoint:self.normalLayer.position];

basicAnimation.toValue      = [NSValue valueWithCGPoint:CGPointMake(100 +50,400)];

basicAnimation.duration     =
4.0;

basicAnimation.timingFunction = \

[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseIn];

// layer的postion
相当于view 的center

self.normalLayer.position =CGPointMake(100 +50,400);

[self.normalLayeraddAnimation:basicAnimation
forKey:nil];

//1.4秒移除后,动画直接到终点

[self performSelector:@selector(remoVeNormalAnimation)withObject:nilafterDelay:1.4];

}

- (void)remoVeNormalAnimation{

CALayer *layer =
self.normalLayer.presentationLayer;

NSLog(@"%@",NSStringFromCGRect(layer.frame));

NSLog(@"%@",NSStringFromCGRect(self.normalLayer.frame));

[self.normalLayerremoveAllAnimations];

}

三、用 POP 动画引擎实现衰减动画

1.衰减动画由POPDecayAnimaiton来实现

2.需要精确计算停止运动瞬间的加速度才能用衰减动画做出真实的效果

- (void)handlePanGesture:(UIPanGestureRecognizer *)recognizer{

//获取定位点

CGPoint translation = [recognizer
translationInView:self.view];

//recognizer.view.center
指的是button

recognizer.view.center =CGPointMake(recognizer.view.center.x
+ translation.x,

recognizer.view.center.y +translation.y);

//让他恢复坐标系

[recognizer setTranslation:CGPointMake(0,0)
inView:self.view];

if (recognizer.state ==UIGestureRecognizerStateChanged)
{

NSLog(@"手势停止时执行这一句话");

//获取加速度

CGPoint velocity = [recognizer
velocityInView:self.view];

//初始化POP的deacy(衰减)动画

POPDecayAnimaton *decayAnimation = \

[POPDecayAnimation animationWithPropertyName:kPOPLayerPosition];

decayAnimation.velocity = [NSValue valueWithCGPoint:velocity];

[recognizer.view.layer pop_addAnimation:decayAnimation forKey:nil];

}

}

- (void)buttonEvent:(UIButton *)button

{

//[button.layer pop_removeAllAnimations];

}

- (void)viewDidLoad {

[superviewDidLoad];

self.button = [[UIButtonalloc]initWithFrame:CGRectMake(100,100,
100,
100)];

self.button .backgroundColor = [UIColorredColor];

self.button.layer.cornerRadius
= 50;

self.button.layer.masksToBounds
= YES;

self.button.center =self.view.center;

[self.viewaddSubview:self.button];

[self.buttonaddTarget:self

action:@selector(buttonEvent:)

forControlEvents:UIControlEventTouchDragInside];

UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizeralloc]initWithTarget:selfaction:@selector(handlePanGesture:)];

[self.buttonaddGestureRecognizer:panGesture];

Facebook官方的pop 动画:附链接https://github.com/schneiderandre/popping

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-10 05:43:45

使用 Facebook 开源动画库 POP 实现真实衰减动画的相关文章

使用 Facebook开源动画库 POP 实现真实衰减动画

1. POP动画基于底层刷新原理.是基于CADisplayLink,1秒钟运行60秒,接近于游戏开发引擎 @interface ViewController () @property (nonatomic,strong)CADisplayLink *displayLink; @property (nonatomic)      NSInteger     count; @end - (void)viewDidLoad { [superviewDidLoad]; self.displayLink

Facebook开源动画库 POP-POPBasicAnimation运用

动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习:本文主要针对的是POPBasicAnimation运用:实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/facebookPopTest POP默认支持三种动画 但同时也支持自定义动画 POPBasicAnimation //基本动画 POPSpringAnimation //类似弹簧一般的动画效果 POPDecayAnimation //过阻尼效

Facebook开源动画库 POP-POPSpringAnimation运用

POPSpringAnimation也许是大多数人使用POP的理由 其提供一个类似弹簧一般的动画效果:实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/facebookPopTest POPSpringAnimation可配置的属性与默认值为 springBounciness:4.0    //[0-20] 弹力 越大则震动幅度越大 springSpeed     :12.0   //[0-20] 速度 越大则动画结束越快 dynamicsTens

Facebook开源动画库 POP-小实例

实例1:图片视图跟着手在屏幕上的点改变大小 - (void)viewDidLoad { [super viewDidLoad]; //添加手势 UIPanGestureRecognizer *gesture = [[UIPanGestureRecognizer alloc] init]; [gesture addTarget:self action:@selector(changeSize:)]; [self.view addGestureRecognizer:gesture]; } - (vo

[转] iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么?

iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么? http://www.zhihu.com/question/23654895/answer/25541037 拿 Canvas 来和 Pop 比其实不大合适,虽然两者都自称「动画库」,但是「库」这个词的含义有所区别.本质上 Canvas 是一个「动画合集」而 Pop 是一个「动画引擎」. 先说 Canvas.Canvas 的目的是「Animate in Xcode Without Code」.开发者可以通过在 Storyboar

打造简易NineoldAndroids动画库,深入理解Android动画原理

简介 NineoldAndroids是Github上一个著名的动画库,简单来说,NineOldAndroids是一个向下兼容的动画库,主要是使低于API 11的系统也能够使用View的属性动画. 网上已经有一些文章,介绍了这个库的设计,包括类结构和思想,例如 NineOldAnimations 源码解析 NineoldAndroids动画库源码分析 上面两篇文章都比较详细的介绍了NineoldAndroids的源码,可以说为大家看源码带来很大的方便. 那为什么我还要写这篇文章呢? 我们来看Nin

前端能力模型-动画类型及动画库的介绍

一.背景: 合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥. 二.动画技术分类: 按技术类型来进行分类,分为三类:JS动画,CSS3动画,html5动画,接下来分别对三类动画进行讲解. 1)JS动画 通过一个定时器setInterval间隔来改变元素样式,动画结束时clearInterval即可.(早期类库:jquery.prototype.mootools) 优缺点: 优点:可控性很强,兼容性较好

让动画不再僵硬:Facebook Rebound Android动画库介绍

introduction official site:http://facebook.github.io/reboundgithub : https://github.com/facebook/reboundRebound是facebook推出的一个弹性动画库,可以让动画看起来真实自然,像真实世界的物理运动,带有力的效果,使用的参数则是facebook的origami中使用的.官网上有一个简单的JS版本来做demo,如果说到evernote.LinkedIn.flow等应用也在使用这个动画库,是

Facebook Rebound 弹性动画库 源码分析

Rebound源码分析 让动画不再僵硬:Facebook Rebound Android动画库介绍一文中介绍了rebound这个库. 对于想体验一下rebound的效果,又懒得clone和编译代码的,这里提供一个demo apk. 今天看到了tumblr发布了基于rebound的Backboard,本想直接分析一下Backboard对rebound做了些什么,不过考虑到rebound还没有仔细分析过,所以这里做一下源码分析. 对外部来说,首先接触的就是SpringSystem了,但在说它之前,先