POP动画[1]

POP动画[1]

pop动画是facebook扩展CoreAnimation的,使用及其方便:)

1:Spring系列的弹簧效果(两个动画kPOPLayerBounds与kPOPLayerCornerRadius同时运行)

#import "RootViewController.h"
#import "YXEasing.h"
#import "POP.h"
#import "YXGCD.h"

@interface RootViewController ()

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 初始化View
    UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
    showView.center  = self.view.center;
    showView.layer.cornerRadius = ;
    showView.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:showView];

    // 延时7s后执行的代码
    [[GCDQueue mainQueue] execute:^{

        // 尺寸
        POPSpringAnimation *bounds = \
        [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

        // 圆角
        POPSpringAnimation *cornerRadius = \
        [POPSpringAnimation animationWithPropertyNamed:kPOPLayerCornerRadius];

        bounds.toValue     = [NSValue valueWithCGRect:CGRectMake(, , , )];
        bounds.springSpeed = ;

        cornerRadius.toValue     = @();
        cornerRadius.springSpeed = ;

        // 添加动画
        [showView.layer pop_addAnimation:bounds
                                  forKey:@"size"];
        [showView.layer pop_addAnimation:cornerRadius
                                  forKey:@"cornerRadius"];

    } afterDelay:NSEC_PER_SEC * ];
}

@end

2:一个动画结束后开始另外一个动画

//
//  RootViewController.m
//  Animation
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "YXEasing.h"
#import "POP.h"
#import "YXGCD.h"

@interface RootViewController ()<POPAnimationDelegate>

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 初始化View
    UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
    showView.center  = self.view.center;
    showView.layer.cornerRadius = ;
    showView.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:showView];

    // 延时7s后执行的代码
    [[GCDQueue mainQueue] execute:^{

        // 位置
        POPSpringAnimation *position = \
            [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition];

        // 设置速度
        position.springSpeed = .f;

        // 赋值
        position.toValue = [NSValue valueWithCGPoint:CGPointMake(, )];

        // 添加动画
        [showView.layer pop_addAnimation:position forKey:nil];

        // 结束后
        [position setCompletionBlock:^(POPAnimation *animation, BOOL finished) {
            // 颜色
            POPSpringAnimation *backgroundColor = \
                [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBackgroundColor];

            // 速度
            backgroundColor.springSpeed = .f;

            // 赋值
            backgroundColor.toValue = (id)[UIColor redColor].CGColor;

            // 添加动画
            [showView.layer pop_addAnimation:backgroundColor forKey:nil];
        }];
    } afterDelay:NSEC_PER_SEC * ];
}

@end

注意动画类型的不同导致toValue的值也不一样,这个始于CALayer的动画保持一致的:

3:动画中的代理

//
//  RootViewController.m
//  Animation
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "YXEasing.h"
#import "POP.h"
#import "YXGCD.h"

@interface RootViewController ()<POPAnimationDelegate>

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 初始化View
    UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
    showView.center  = self.view.center;
    showView.layer.cornerRadius = ;
    showView.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:showView];

    // 延时7s后执行的代码
    [[GCDQueue mainQueue] execute:^{

        // 尺寸
        POPSpringAnimation *bounds = \
            [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

        // 设置代理
        bounds.delegate = self;

        bounds.toValue     = [NSValue valueWithCGRect:CGRectMake(, , , )];
        bounds.springSpeed = ;

        // 添加动画
        [showView.layer pop_addAnimation:bounds
                                  forKey:@"size"];

    } afterDelay:NSEC_PER_SEC * ];
}

// 动画开始
- (void)pop_animationDidStart:(POPAnimation *)anim
{
    NSLog(@"pop_animationDidStart %@", anim);
}

// 动画值动态改变
- (void)pop_animationDidApply:(POPAnimation *)anim
{
    NSLog(@"pop_animationDidApply %@", anim);
}

// 动画到达终点值
- (void)pop_animationDidReachToValue:(POPAnimation *)anim
{
    NSLog(@"pop_animationDidReachToValue %@", anim);
}

// 动画结束
- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished
{
    NSLog(@"pop_animationDidStop %@", anim);
}

@end

动画代理方法能够完整的表示出这个动画执行的过程,从开始到结束到中间值的改变我们都能获取到的.

4:按钮的动画效果

//
//  RootViewController.m
//  Animation
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "YXEasing.h"
#import "POP.h"
#import "YXGCD.h"

@interface RootViewController ()<POPAnimationDelegate>

@property (nonatomic, strong) UIButton    *button;

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 完整显示按住按钮后的动画效果
    _button = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
    _button.layer.cornerRadius = .f;
    _button.backgroundColor = [UIColor cyanColor];
    _button.center = self.view.center;
    [self.view addSubview:_button];

    // 按住按钮后没有松手的动画
    [_button addTarget:self
                action:@selector(scaleToSmall)
      forControlEvents:UIControlEventTouchDown | UIControlEventTouchDragEnter];

    // 按住按钮松手后的动画
    [_button addTarget:self
                action:@selector(scaleAnimation)
      forControlEvents:UIControlEventTouchUpInside];

    // 按住按钮后拖拽出去的动画
    [_button addTarget:self
                action:@selector(scaleToDefault)
      forControlEvents:UIControlEventTouchDragExit];
}

- (void)scaleToSmall
{
    NSLog(@"scaleToSmall");

    POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.75f, 0.75f)];
    [_button.layer pop_addAnimation:scaleAnimation forKey:@"layerScaleSmallAnimation"];
}

- (void)scaleAnimation
{
    NSLog(@"scaleAnimation");

    POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleAnimation.velocity = [NSValue valueWithCGSize:CGSizeMake(.f, .f)];
    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(.f, .f)];
    scaleAnimation.springBounciness = 18.0f;
    [_button.layer pop_addAnimation:scaleAnimation forKey:@"layerScaleSpringAnimation"];
}

- (void)scaleToDefault
{
    NSLog(@"scaleToDefault");

    POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(.f, .f)];
    [_button.layer pop_addAnimation:scaleAnimation forKey:@"layerScaleDefaultAnimation"];
}

@end

POP的动画真心强大呢:)

5:Stroke动画效果

//
//  RootViewController.m
//  Animation
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "YXEasing.h"
#import "POP.h"
#import "YXGCD.h"
#import "CAShapeLayer+Circle.h"

@interface RootViewController ()<POPAnimationDelegate>

@property (nonatomic, strong) GCDTimer  *timer;

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 圆
    CAShapeLayer *layer = [CAShapeLayer LayerWithCircleCenter:self.view.center
                                                       radius:.f
                                                   startAngle:DEGREES()
                                                     endAngle:DEGREES( + )
                                                    clockwise:YES
                                              lineDashPattern:nil];

    layer.strokeColor   = [UIColor cyanColor].CGColor;    // 边缘线的颜色
    layer.lineCap       = kCALineCapRound;                // 边缘线的类型
    layer.lineWidth     = 5.0f;                           // 线条宽度
    layer.strokeStart   = 0.0f;
    layer.strokeEnd     = 1.0f;

    [self.view.layer addSublayer:layer];

    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [_timer event:^{

        CGFloat value1 = arc4random()%/.f;
        CGFloat value2 = arc4random()%/.f;

        POPSpringAnimation *strokeAnimationEnd = \
            [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
        strokeAnimationEnd.toValue = @(value1 > value2 ? value1 : value2);
        strokeAnimationEnd.springBounciness = .f;

        POPSpringAnimation *strokeAnimationStart = \
            [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeStart];
        strokeAnimationStart.toValue = @(value1 < value2 ? value1 : value2);
        strokeAnimationStart.springBounciness = .f;

        [layer pop_addAnimation:strokeAnimationEnd forKey:@"layerStrokeAnimation"];
        [layer pop_addAnimation:strokeAnimationStart forKey:@"layerStrokeAnimation1"];

    } timeInterval:*NSEC_PER_SEC];
    [_timer start];
}

@end

6:减速动画

//
//  RootViewController.m
//  Animation
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "YXEasing.h"
#import "POP.h"
#import "YXGCD.h"

@interface RootViewController ()<POPAnimationDelegate>

@property(nonatomic) UIControl *dragView;

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIPanGestureRecognizer *recognizer = \
        [[UIPanGestureRecognizer alloc] initWithTarget:self
                                                action:@selector(handlePan:)];

    self.dragView = [[UIControl alloc] initWithFrame:CGRectMake(, , , )];
    self.dragView.center = self.view.center;
    self.dragView.layer.cornerRadius = CGRectGetWidth(self.dragView.bounds)/;
    self.dragView.backgroundColor = [UIColor cyanColor];
    [self.dragView addGestureRecognizer:recognizer];

    // 当触目的时候移除动画
    [self.dragView addTarget:self
                      action:@selector(touchDown:)
            forControlEvents:UIControlEventTouchDown];

    [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(, ) inView:self.view];
    NSLog(@"center %@", NSStringFromCGPoint(recognizer.view.center));

    // 拖拽动作结束
    if(recognizer.state == UIGestureRecognizerStateEnded)
    {
        // 计算出移动的速度
        CGPoint velocity = [recognizer velocityInView:self.view];
        NSLog(@"velocity %@", NSStringFromCGPoint(velocity));

        // 衰退减速动画
        POPDecayAnimation *positionAnimation = \
            [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];

        // 设置代理
        positionAnimation.delegate = self;

        // 设置速度动画
        positionAnimation.velocity = [NSValue valueWithCGPoint:velocity];

        // 添加动画
        [recognizer.view.layer pop_addAnimation:positionAnimation
                                         forKey:@"layerPositionAnimation"];
    }
}

@end

计算出pan手势的在拖拽结束的时候的速度值.