1. 程式人生 > >使用 Facebook開源動畫庫 POP 實現真實衰減動畫

使用 Facebook開源動畫庫 POP 實現真實衰減動畫

tran rect mov rec efault gin calayer uibutton height

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];

// layerpostion相當於viewcenter

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];

//初始化POPdeacy(衰減)動畫

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





使用 Facebook開源動畫庫 POP 實現真實衰減動畫