Facebook开源动画库 POP-POPDecayAnimation运用

最新推荐文章于 2017-10-30 15:24:47 发布

weixin_33877092

最新推荐文章于 2017-10-30 15:24:47 发布

阅读量111

点赞数

关于POPDecayAnimation的介绍先引用别人写的一些内容，基本上把它的一些注意点都说明了；

Decay Animation 就是 POP 提供的另外一个非常特别的动画，他实现了一个衰减的效果。这个动画有一个重要的参数 velocity（速率），一般并不用于物体的自发动画，而是与用户的交互共生。这个和 iOS7 引入的 UIDynamic 非常相似，如果你想实现一些物理效果，这个也是非常不错的选择。

Decay 的动画没有 toValue 只有 fromValue，然后按照 velocity 来做衰减操作。如果我们想做一个刹车效果，那么应该是这样的。

POPDecayAnimation *anim = [POPDecayAnimation animWithPropertyNamed:kPOPLayerPositionX]; 
anim.velocity = @(100.0); 
anim.fromValue =  @(25.0); 
//anim.deceleration = 0.998; 
anim.completionBlock = ^(POPAnimation *anim, BOOL finished) { 
  if (finished) {NSLog(@"Stop!");}};

这个动画会使得物体从 X 坐标的点 25.0 开始按照速率 100点／s 做减速运动。这里非常值得一提的是，velocity 也是必须和你操作的属性有相同的结构，如果你操作的是 bounds，想实现一个水滴滴到桌面的扩散效果，那么应该是 [NSValue valueWithCGRect:CGRectMake(0, 0,20.0, 20.0)]

如果 velocity 是负值，那么就会反向递减。

deceleration （负加速度）是一个你会很少用到的值，默认是就是我们地球的 0.998，如果你开发给火星人用，那么这个值你使用 0.376 会更合适。

实例1：创建一个POPDecayAnimation动画实现X轴运动减慢速度的效果

    //1:初始化第一个视图块
    if (self.myView==nil) {
        self.myView=[[UIView alloc]initWithFrame:CGRectMake(0, 80, 30, 30)];
        self.myView.backgroundColor=[UIColor redColor];
        [self.view addSubview:self.myView];
    }
    
    //创建一个POPDecayAnimation动画 实现X轴运动 减慢速度的效果 通过速率来计算运行的距离 没有toValue属性
    POPDecayAnimation *anSpring = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anSpring.velocity = @(500); //速率
    anSpring.beginTime = CACurrentMediaTime() + 1.0f;
    [anSpring setCompletionBlock:^(POPAnimation *prop, BOOL fint) {
        if (fint) {
            NSLog(@"myView=%@",NSStringFromCGRect(self.myView.frame));
        }
    }];
    [self.myView pop_addAnimation:anSpring forKey:@"myViewposition”];

打印出来的值为：myView={{247.00485229492188, 80}, {30, 30}}，说明X轴当前已经到247左右的；

实例2：创建一个POPDecayAnimation动画连续不停的转动

    //2:初始化一个视图块
    if(self.myRotationView==nil)
    {
        self.myRotationView=[[UIView alloc]initWithFrame:CGRectMake(20, 130, 30, 30)];
        self.myRotationView.backgroundColor=[UIColor redColor];
        [self.view addSubview:self.myRotationView];
    }
    
    //创建一个POPDecayAnimation动画  连续不停的转动
    [self performAnimation];

封装的方法：

-(void)performAnimation
{
    [self.myRotationView.layer pop_removeAllAnimations];
    POPDecayAnimation *anRotaion=[POPDecayAnimation animation];
    anRotaion.property=[POPAnimatableProperty propertyWithName:kPOPLayerRotation];
    
    if (self.animated) {
        anRotaion.velocity = @(-150);
    }else{
        anRotaion.velocity = @(150);
        anRotaion.fromValue =  @(25.0);
    }
    
    self.animated = !self.animated;
    
    anRotaion.completionBlock = ^(POPAnimation *anim, BOOL finished) {
        if (finished) {
            [self performAnimation];
        }
    };
    
    [self.myRotationView.layer pop_addAnimation:anRotaion forKey:@"myRotationView"];
}

注意像常量kPOPLayerRotation它是作用在层上，所以我们在使用时要把它加载到相应视图的layer上面；

实例3：实现一个拖动视图运行，将拖动结束后它有减速的效果，当点击视图时它将停所有的动画效果；在减速动画结束后会有一个判断，当前视图的位置是否是触在屏壁，若有则反弹；

#import "DecayViewController.h"
#import <POP.h>

@interface DecayViewController() <POPAnimationDelegate>
@property(nonatomic) UIControl *dragView;
- (void)addDragView;
- (void)touchDown:(UIControl *)sender;
- (void)handlePan:(UIPanGestureRecognizer *)recognizer;
@end

@implementation DecayViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self addDragView];
}

#pragma mark - POPAnimationDelegate

- (void)pop_animationDidApply:(POPDecayAnimation *)anim
{
    //判断是否触屏壁
    BOOL isDragViewOutsideOfSuperView = !CGRectContainsRect(self.view.frame, self.dragView.frame);
    if (isDragViewOutsideOfSuperView) {
        CGPoint currentVelocity = [anim.velocity CGPointValue];
        CGPoint velocity = CGPointMake(currentVelocity.x, -currentVelocity.y);
        POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition];
        positionAnimation.velocity = [NSValue valueWithCGPoint:velocity];
        positionAnimation.toValue = [NSValue valueWithCGPoint:self.view.center];
        [self.dragView.layer pop_addAnimation:positionAnimation forKey:@"layerPositionAnimation"];
    }
}

#pragma mark - Private Instance methods

- (void)addDragView
{
    //拖动
    UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self
                                                                                 action:@selector(handlePan:)];
    
    self.dragView = [[UIControl alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    self.dragView.center = self.view.center;
    self.dragView.layer.cornerRadius = CGRectGetWidth(self.dragView.bounds)/2;
    self.dragView.backgroundColor = [UIColor redColor];
    [self.dragView addTarget:self action:@selector(touchDown:) forControlEvents:UIControlEventTouchDown];
    [self.dragView addGestureRecognizer:recognizer];
    
    [self.view addSubview:self.dragView];
}

//点击时将停所有的动画效果
- (void)touchDown:(UIControl *)sender {
    [sender.layer pop_removeAllAnimations];
}

- (void)handlePan:(UIPanGestureRecognizer *)recognizer
{
    CGPoint translation = [recognizer translationInView:self.view];
    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 == UIGestureRecognizerStateEnded) {
        CGPoint velocity = [recognizer velocityInView:self.view];
        POPDecayAnimation *positionAnimation = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];
        positionAnimation.delegate = self;
        positionAnimation.velocity = [NSValue valueWithCGPoint:velocity];
        [recognizer.view.layer pop_addAnimation:positionAnimation forKey:@"layerPositionAnimation"];
    }
}

@end

实例中还动用到了POPAnimationDelegate

 <POPAnimatorDelegate> 

- (void)pop_animationDidStart:(POPAnimation *)anim;
- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;
- (void)pop_animationDidReachToValue:(POPAnimation *)anim;
- (void)pop_animationDidApply:(POPAnimation *)anim;

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号，每天都会更新一些深度内容，在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣)，当然可以关注后输入：github 会有我的微信号，如果有问题你也可以在那找到我；当然不感兴趣无视此信息；