动画类型
Pop支持4种动画类型:弹簧效果、衰减效果、基本动画效果与自定义动画效果。
弹簧效果
弹簧效果可以用来实现仿真的物理弹簧特效,在下面的这个例子中,我们用弹簧效果来对一个layer的尺寸进行缩放:
效果图:
Pop 弹簧效果效果图
源码:
import "ViewController.h" #import "POP.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // 创建layer CALayer *layer = [CALayer layer]; layer.frame = CGRectMake(0, 0, 50, 50); layer.backgroundColor = [UIColor cyanColor].CGColor; layer.cornerRadius = 25.f; layer.position = self.view.center; [self.view.layer addSublayer:layer]; // 执行Spring动画 POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; anim.toValue = [NSValue valueWithCGPoint:CGPointMake(3.f, 3.f)]; anim.springSpeed = 0.f; [layer pop_addAnimation:anim forKey:@"ScaleXY"]; } @end
衰减效果
衰减效果可以用来模拟真实的物理减速效果,在下面的例子中,我们用衰减效果来对一个view的拖拽停止执行减速效果。
效果图:
Pop 衰减效果效果图
源码:
import "ViewController.h" #import "POP.h" @interface ViewController ()<POPAnimationDelegate> @property(nonatomic) UIControl *dragView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // 初始化dragView 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.view addSubview:self.dragView]; [self.dragView addTarget:self action:@selector(touchDown:) forControlEvents:UIControlEventTouchDown]; // 添加手势 UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]; [self.dragView addGestureRecognizer:recognizer]; } - (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]; // 拖拽动作结束 if(recognizer.state == UIGestureRecognizerStateEnded) { // 计算出移动的速度 CGPoint velocity = [recognizer velocityInView:self.view]; // 衰退减速动画 POPDecayAnimation *positionAnimation = \ [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition]; // 设置代理 positionAnimation.delegate = self; // 设置速度动画 positionAnimation.velocity = [NSValue valueWithCGPoint:velocity]; // 添加动画 [recognizer.view.layer pop_addAnimation:positionAnimation forKey:@"layerPositionAnimation"]; } } @end
基本动画效果
基本动画效果可以指定具体的动画时间,与 CoreAnimation
中的 CABasicAnimation
的用法极为类似,在下面的例子中,我们用基本动画效果来设置一个view的alpha值。
效果图:
源码:
import "ViewController.h" #import "POP.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // 创建view UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; showView.alpha = 0.f; showView.layer.cornerRadius = 50.f; showView.center = self.view.center; showView.backgroundColor = [UIColor cyanColor]; [self.view addSubview:showView]; // 执行基本动画效果 POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha]; anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; anim.fromValue = @(0.0); anim.toValue = @(1.0); anim.duration = 4.f; [showView pop_addAnimation:anim forKey:@"fade"]; } @end
自定义动画效果
自定义动画效果是根据 CADisplayLink
来计算出中间的差值,然后由你来处理输出的值的动画效果,详情请参考相关头文件来获取更多的细节。