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