您的位置:首页 > 运维架构

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

2015-07-15 23:57 381 查看


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

@interface
ViewController ()

@property (nonatomic,strong)CADisplayLink *displayLink;
@property (nonatomic) NSInteger count;

@end



- (void)viewDidLoad {

[superviewDidLoad];

self.displayLink = [CADisplayLinkdisplay
LinkWithTarget: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.displayLink addToRunLoop:[NSRunLoopcurrentRunLoop]forMode:NSDefaultRunLoopMode];

}

- (void)eventTwo{

[self.displayLink invalidate];

}
二、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 = \

[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

// layer的postion
相当于view 的center

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

[self.normalLayer addAnimation:basicAnimationforKey: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.normalLayer removeAllAnimations];

}


三、用 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 = [[UIButton alloc]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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: