POP動(dòng)畫[1]

pop動(dòng)畫是facebook擴(kuò)展CoreAnimation的,使用及其方便:)

?

1:Spring系列的彈簧效果(兩個(gè)動(dòng)畫kPOPLayerBounds與kPOPLayerCornerRadius同時(shí)運(yùn)行)

#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];// 延時(shí)7s后執(zhí)行的代碼[[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;// 添加動(dòng)畫 [showView.layer pop_addAnimation:boundsforKey:@"size"];[showView.layer pop_addAnimation:cornerRadiusforKey:@"cornerRadius"];} afterDelay:NSEC_PER_SEC * 7]; }@end

?

2:一個(gè)動(dòng)畫結(jié)束后開始另外一個(gè)動(dòng)畫

// // 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];// 延時(shí)7s后執(zhí)行的代碼[[GCDQueue mainQueue] execute:^{// 位置POPSpringAnimation *position = \[POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition];// 設(shè)置速度position.springSpeed = 0.f;// 賦值position.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];// 添加動(dòng)畫 [showView.layer pop_addAnimation:position forKey:nil];// 結(jié)束后[position setCompletionBlock:^(POPAnimation *animation, BOOL finished) {// 顏色POPSpringAnimation *backgroundColor = \[POPSpringAnimation animationWithPropertyNamed:kPOPLayerBackgroundColor];// 速度backgroundColor.springSpeed = 0.f;// 賦值backgroundColor.toValue = (id)[UIColor redColor].CGColor;// 添加動(dòng)畫 [showView.layer pop_addAnimation:backgroundColor forKey:nil];}];} afterDelay:NSEC_PER_SEC * 7]; }@end

注意動(dòng)畫類型的不同導(dǎo)致toValue的值也不一樣,這個(gè)始于CALayer的動(dòng)畫保持一致的:

?

3:動(dòng)畫中的代理

// // 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];// 延時(shí)7s后執(zhí)行的代碼[[GCDQueue mainQueue] execute:^{// 尺寸POPSpringAnimation *bounds = \[POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];// 設(shè)置代理bounds.delegate = self;bounds.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];bounds.springSpeed = 0;// 添加動(dòng)畫 [showView.layer pop_addAnimation:boundsforKey:@"size"];} afterDelay:NSEC_PER_SEC * 7]; }// 動(dòng)畫開始 - (void)pop_animationDidStart:(POPAnimation *)anim {NSLog(@"pop_animationDidStart %@", anim); }// 動(dòng)畫值動(dòng)態(tài)改變 - (void)pop_animationDidApply:(POPAnimation *)anim {NSLog(@"pop_animationDidApply %@", anim); }// 動(dòng)畫到達(dá)終點(diǎn)值 - (void)pop_animationDidReachToValue:(POPAnimation *)anim {NSLog(@"pop_animationDidReachToValue %@", anim); }// 動(dòng)畫結(jié)束 - (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished {NSLog(@"pop_animationDidStop %@", anim); }@end

動(dòng)畫代理方法能夠完整的表示出這個(gè)動(dòng)畫執(zhí)行的過程,從開始到結(jié)束到中間值的改變我們都能獲取到的.

?

4:按鈕的動(dòng)畫效果

// // 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];// 完整顯示按住按鈕后的動(dòng)畫效果_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];// 按住按鈕后沒有松手的動(dòng)畫 [_button addTarget:selfaction:@selector(scaleToSmall)forControlEvents:UIControlEventTouchDown | UIControlEventTouchDragEnter];// 按住按鈕松手后的動(dòng)畫 [_button addTarget:selfaction:@selector(scaleAnimation)forControlEvents:UIControlEventTouchUpInside];// 按住按鈕后拖拽出去的動(dòng)畫 [_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的動(dòng)畫真心強(qiáng)大呢:)

?

5:Stroke動(dòng)畫效果

// // 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:減速動(dòng)畫

// // 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];// 當(dāng)觸目的時(shí)候移除動(dòng)畫 [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));// 拖拽動(dòng)作結(jié)束if(recognizer.state == UIGestureRecognizerStateEnded){// 計(jì)算出移動(dòng)的速度CGPoint velocity = [recognizer velocityInView:self.view];NSLog(@"velocity %@", NSStringFromCGPoint(velocity));// 衰退減速動(dòng)畫POPDecayAnimation *positionAnimation = \[POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];// 設(shè)置代理positionAnimation.delegate = self;// 設(shè)置速度動(dòng)畫positionAnimation.velocity = [NSValue valueWithCGPoint:velocity];// 添加動(dòng)畫 [recognizer.view.layer pop_addAnimation:positionAnimationforKey:@"layerPositionAnimation"];} }@end

計(jì)算出pan手勢(shì)的在拖拽結(jié)束的時(shí)候的速度值.

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/YouXianMing/p/3772390.html

總結(jié)

以上是生活随笔為你收集整理的POP动画[1]的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。