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手势的在拖拽结束的时候的速度值.

个人收藏笔记记录

开通VIP