iOS pop动画的入门使用

主要入门参考：http://www.jianshu.com/p/a138a8832452

前言

动画在APP开发过程中 大家多多少少都会接触到 而且随着ios7的扁平化风格启用之后 越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然 还是以国外的APP居多)

有过相关开发经验的同学肯定知道在iOS中 动画相关的部分都是基于Core Animation 但是今天我们不讨论Core Animation 今天的主角是POP -来自于Facebook的动画引擎(其实我不喜欢把POP定义为动画引擎 我愿意称它为函数发生器)

介绍

官方地址 https://github.com/facebook/pop

官方介绍(翻译版)

POP是一个在iOS与OS X上通用的极具扩展性的动画引擎 它在基本的静态动画的基础上增加的弹簧动画与衰减动画 使之能创造出更真实更具物理性的交互动画 POP的API可以快速的与现有的ObjC代码集成并可以作用于任意对象的任意属性

POP是个相当成熟且久经考验的框架 Facebook出品的令人惊叹的Paper应用中的所有动画和效果即出自POP

安装方式还是推荐使用CocoaPod

pod ‘pop’, ‘~> 1.0’

POP的神奇之处在于 它是独立与Core Animation的存在 所以 忘记Core Animation吧 忘记Layer Tree吧 迎接一个简单的明天 (LOL 开玩笑的~:) 很多地方还是会需要Core Animation的 不过说不定哪天苹果大发善心 将动画相关的部分向POP借鉴一点也不是不可能的(比如SpriteKit就借鉴了Cocos2D :)

使用

POP默认支持三种动画 但同时也支持自定义动画

POPBasicAnimation

POPSpringAnimation //弹性动画

POPDecayAnimation //阻尼效果

POPCustomAnimation //自定义动画

官方代码：

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
anim.fromValue = @(0.0);
anim.toValue = @(1.0);
[view pop_addAnimation:anim forKey:@"fade"];

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 400, 400)];
[layer pop_addAnimation:anim forKey:@"size"];

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anim.velocity = @(1000.);
[layer pop_addAnimation:anim forKey:@"slide"];

用法：

主要就是用便利构造器创建动画对象 需要传一个animationPropertyName 例如：kPOPViewScaleXY

然后设置fromValue 和 toValue duration等

ps:

POPAnimatableProperty.h文件里面包含很多动画的枚举

当你不知道怎么 fromValue toValue是什么类型的时候 可以查看POPAnimatableProperty.h里面的一些方法如下

{kPOPScrollViewContentOffset,
^(UIScrollView *obj, CGFloat values[]) {
values_from_point(values, obj.contentOffset);
},
^(UIScrollView *obj, const CGFloat values[]) {
[obj setContentOffset:values_to_point(values) animated:NO];
},
kPOPThresholdPoint
},

根据 values_from_point 点进去 看到如下：

NS_INLINE void values_from_point(CGFloat values[], CGPoint p)

大体就知道是CGPoint类型

接下来我简单的贴一下demo代码

//
//  ViewController.m
//  popDemo
//
//  Created by linpeng on 17/3/6.
//  Copyright © 2017年 linpeng. All rights reserved.
//

#import "ViewController.h"
#import <POP.h>
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
[self setupUI];
}

-(void)setupUI
{
[self setupUIBaseAnimation];
[self setupUISpringAnimation];
[self setupUIDeceayAnimation];
[self setupUIShapeLayerBaseAnimation];
}

-(void)setupUIBaseAnimation
{
UIView *view = [[UIView alloc] init];
view.frame = CGRectMake(100, 10, 100, 100);
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];

POPBasicAnimation *an = [POPBasicAnimation animationWithPropertyNamed:kPOPViewScaleXY];
an.fromValue = [NSValue valueWithCGPoint:CGPointMake(0.0f, 0.0f)];
an.toValue = [NSValue valueWithCGPoint:CGPointMake(1.0f, 1.0f)];
an.duration = 2;
an.repeatCount = 1;
[view pop_addAnimation:an forKey:@"dsadsa"];

[an setCompletionBlock:^(POPAnimation *an, BOOL finish) {
if (finish) {
POPBasicAnimation *ani = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerCornerRadius];
ani.fromValue = @0;
ani.toValue = @50;
ani.duration = 2;
ani.repeatCount = 10;
[view.layer pop_addAnimation:ani forKey:@"dddd"];
}
}];

}
-(void)setupUISpringAnimation
{
CGFloat contentWidth = 100;
UIView *view2 = [[UIView alloc] init];
view2.frame = CGRectMake(100, contentWidth*4, 100, 100);
view2.backgroundColor = [UIColor redColor];
[self.view addSubview:view2];

POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"prop" initializer:^(POPMutableAnimatableProperty *prop) {
// read value
prop.readBlock = ^(id obj, CGFloat values[]) {
NSLog(@"read %@",values[0]);
};
// write value
prop.writeBlock = ^(id obj, const CGFloat values[]) {
NSLog(@"write %@",values[0]);
};
// dynamics threshold
prop.threshold = 1;
}];

POPSpringAnimation *springAni = [POPSpringAnimation animationWithPropertyNamed:kPOPViewCenter];
springAni.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 200)];
springAni.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 400)];;
springAni.springBounciness = 10;
springAni.springSpeed = 1;
springAni.repeatCount = 10;
//    springAni.beginTime = CACurrentMediaTime()+2;
springAni.property = prop;
[view2 pop_addAnimation:springAni forKey:@"spring"];
}
-(void)setupUIDeceayAnimation
{
CGFloat contentWidth = 100;
UIView *view1 = [[UIView alloc] init];
view1.frame = CGRectMake(100, contentWidth+10, 100, 100);
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];

POPDecayAnimation *anDecay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anDecay.velocity = @(200);
anDecay.repeatCount = 2;
[view1 pop_addAnimation:anDecay forKey:@"position"];

}

-(void)setupUIShapeLayerBaseAnimation
{
CAShapeLayer *shapeLaye = [self drawCircle];
[self.view.layer addSublayer:shapeLaye];
POPBasicAnimation *shareAni = [POPBasicAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
shareAni.duration = 5;
shareAni.repeatCount = 10;
shareAni.toValue = @0.9;
shareAni.fromValue = @0.0;
[shapeLaye pop_addAnimation:shareAni forKey:@"shapreAnimationKey"];
}

- (CAShapeLayer *)drawCircle {
CAShapeLayer *circleLayer = [CAShapeLayer layer];
// 指定frame，只是为了设置宽度和高度
circleLayer.frame = CGRectMake(0, 0, 200, 200);
// 设置居中显示
circleLayer.position = self.view.center;
// 设置填充颜色
circleLayer.fillColor = [UIColor clearColor].CGColor;
// 设置线宽
circleLayer.lineWidth = 5.0;
// 设置线的颜色
CGRect frame = CGRectMake(10, 10, 100, 100);
circleLayer.strokeColor = [UIColor redColor].CGColor;
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:frame];

// 设置CAShapeLayer与UIBezierPath关联
circleLayer.path = circlePath.CGPath;
circleLayer.strokeStart = 0.0;
circleLayer.strokeEnd = 0.9;

// 将CAShaperLayer放到某个层上显示
[self.view.layer addSublayer:circleLayer];

return circleLayer;
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

一些效果demo

github：https://github.com/schneiderandre/popping