Facebook Pop動(dòng)畫類型

動(dòng)畫類型

Pop支持4種動(dòng)畫類型：彈簧效果、衰減效果、基本動(dòng)畫效果與自定義動(dòng)畫效果。

彈簧效果

彈簧效果可以用來實(shí)現(xiàn)仿真的物理彈簧特效，在下面的這個(gè)例子中，我們用彈簧效果來對(duì)一個(gè)layer的尺寸進(jìn)行縮放：

效果圖：

源碼：

    #import "ViewController.h"
    #import "POP.h"

    @interface ViewController ()

    @end

    @implementation ViewController

    - (void)viewDidLoad {
        [super viewDidLoad];

        // 創(chuàng)建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];

        // 執(zhí)行Spring動(dòng)畫
        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

衰減效果

衰減效果可以用來模擬真實(shí)的物理減速效果，在下面的例子中，我們用衰減效果來對(duì)一個(gè)view的拖拽停止執(zhí)行減速效果。

效果圖：

源碼：

    #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];

        // 添加手勢(shì)
        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];

        // 拖拽動(dòng)作結(jié)束
        if(recognizer.state == UIGestureRecognizerStateEnded)
        {
            // 計(jì)算出移動(dòng)的速度
            CGPoint velocity = [recognizer velocityInView:self.view];

            // 衰退減速動(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:positionAnimation
                                         forKey:@"layerPositionAnimation"];
        }
    }

    @end

基本動(dòng)畫效果

基本動(dòng)畫效果可以指定具體的動(dòng)畫時(shí)間，與 CoreAnimation 中的 CABasicAnimation 的用法極為類似，在下面的例子中，我們用基本動(dòng)畫效果來設(shè)置一個(gè)view的alpha值。

效果圖：

源碼：

    #import "ViewController.h"
    #import "POP.h"

    @interface ViewController ()

    @end

    @implementation ViewController

    - (void)viewDidLoad
    {
        [super viewDidLoad];

        // 創(chuàng)建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];

        // 執(zhí)行基本動(dòng)畫效果
        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

自定義動(dòng)畫效果

自定義動(dòng)畫效果是根據(jù) CADisplayLink 來計(jì)算出中間的差值，然后由你來處理輸出的值的動(dòng)畫效果，詳情請(qǐng)參考相關(guān)頭文件來獲取更多的細(xì)節(jié)。