Facebook Pop动画类型

动画类型

Pop支持4种动画类型：弹簧效果、衰减效果、基本动画效果与自定义动画效果。

弹簧效果

弹簧效果可以用来实现仿真的物理弹簧特效，在下面的这个例子中，我们用弹簧效果来对一个layer的尺寸进行缩放：

效果图：

源码：

    #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的拖拽停止执行减速效果。

效果图：

源码：

    #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 来计算出中间的差值，然后由你来处理输出的值的动画效果，详情请参考相关头文件来获取更多的细节。