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(0, 0, 50, 50)];
    showView.center  = self.view.center;
    showView.layer.cornerRadius = 25;
    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(0, 0, 200, 200)];
        bounds.springSpeed = 0;
        
        cornerRadius.toValue     = @(100);
        cornerRadius.springSpeed = 0;
        
        // 添加動畫
        [showView.layer pop_addAnimation:bounds
                                  forKey:@"size"];
        [showView.layer pop_addAnimation:cornerRadius
                                  forKey:@"cornerRadius"];
        
    } afterDelay:NSEC_PER_SEC * 7];
}

@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(0, 0, 50, 50)];
    showView.center  = self.view.center;
    showView.layer.cornerRadius = 25;
    showView.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:showView];
    
    // 延時7s后執行的代碼
    [[GCDQueue mainQueue] execute:^{
        
        // 位置
        POPSpringAnimation *position = \
            [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition];

        // 設置速度
        position.springSpeed = 0.f;
        
        // 賦值
        position.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];

        // 添加動畫
        [showView.layer pop_addAnimation:position forKey:nil];
        
        // 結束后
        [position setCompletionBlock:^(POPAnimation *animation, BOOL finished) {
            // 顏色
            POPSpringAnimation *backgroundColor = \
                [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBackgroundColor];
            
            // 速度
            backgroundColor.springSpeed = 0.f;
            
            // 賦值
            backgroundColor.toValue = (id)[UIColor redColor].CGColor;
            
            // 添加動畫
            [showView.layer pop_addAnimation:backgroundColor forKey:nil];
        }];
    } afterDelay:NSEC_PER_SEC * 7];
}

@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(0, 0, 50, 50)];
    showView.center  = self.view.center;
    showView.layer.cornerRadius = 25;
    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(0, 0, 200, 200)];
        bounds.springSpeed = 0;
        
        // 添加動畫
        [showView.layer pop_addAnimation:bounds
                                  forKey:@"size"];
        
    } afterDelay:NSEC_PER_SEC * 7];
}

// 動畫開始
- (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(0, 0, 70, 30)];
    _button.layer.cornerRadius = 5.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(3.f, 3.f)];
    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.f, 1.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(1.f, 1.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:50.f
                                                   startAngle:DEGREES(180)
                                                     endAngle:DEGREES(180 + 360)
                                                    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()%100/100.f;
        CGFloat value2 = arc4random()%100/100.f;
        
        POPSpringAnimation *strokeAnimationEnd = \
            [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
        strokeAnimationEnd.toValue = @(value1 > value2 ? value1 : value2);
        strokeAnimationEnd.springBounciness = 12.f;
        
        
        POPSpringAnimation *strokeAnimationStart = \
            [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeStart];
        strokeAnimationStart.toValue = @(value1 < value2 ? value1 : value2);
        strokeAnimationStart.springBounciness = 12.f;

        
        [layer pop_addAnimation:strokeAnimationEnd forKey:@"layerStrokeAnimation"];
        [layer pop_addAnimation:strokeAnimationStart forKey:@"layerStrokeAnimation1"];
        
    } timeInterval:1*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(0, 0, 100, 100)];
    self.dragView.center = self.view.center;
    self.dragView.layer.cornerRadius = CGRectGetWidth(self.dragView.bounds)/2;
    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(0, 0) 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手勢的在拖拽結束的時候的速度值.