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

Posted blfbuaa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 Facebook开源动画库 POP 实现真实衰减动画相关的知识,希望对你有一定的参考价值。

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 实现真实衰减动画的主要内容,如果未能解决你的问题,请参考以下文章

Facebook开源动画库 POP-POPBasicAnimation运用

Facebook开源动画库 POP-POPSpringAnimation运用

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

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

如何手动导入pop动画库

Facebook Rebound 弹性动画库 源码分析