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];// 初始化ViewUIView *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:boundsforKey:@"size"];[showView.layer pop_addAnimation:cornerRadiusforKey:@"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];// 初始化ViewUIView *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];// 初始化ViewUIView *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:boundsforKey:@"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:selfaction:@selector(scaleToSmall)forControlEvents:UIControlEventTouchDown | UIControlEventTouchDragEnter];// 按住按钮松手后的动画
    [_button addTarget:selfaction:@selector(scaleAnimation)forControlEvents:UIControlEventTouchUpInside];// 按住按钮后拖拽出去的动画
    [_button addTarget:selfaction:@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.centerradius:50.fstartAngle:DEGREES(180)endAngle:DEGREES(180 + 360)clockwise:YESlineDashPattern: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:selfaction:@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:selfaction:@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:positionAnimationforKey:@"layerPositionAnimation"];}
}@end

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