Facebook Pop動畫類型

2018-09-19 10:25 更新

動畫類型

Pop支持4種動畫類型:彈簧效果、衰減效果、基本動畫效果與自定義動畫效果。

彈簧效果

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

效果圖:

Pop 彈簧效果效果圖

源碼:

    #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動畫
        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的拖拽停止執(zhí)行減速效果。

效果圖:

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

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

            // 衰退減速動畫
            POPDecayAnimation *positionAnimation = \
        [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];

            // 設(shè)置代理
            positionAnimation.delegate = self;

            // 設(shè)置速度動畫
            positionAnimation.velocity = [NSValue valueWithCGPoint:velocity];

            // 添加動畫
            [recognizer.view.layer pop_addAnimation:positionAnimation
                                         forKey:@"layerPositionAnimation"];
        }
    }

    @end

基本動畫效果

基本動畫效果可以指定具體的動畫時間,與 CoreAnimation 中的 CABasicAnimation 的用法極為類似,在下面的例子中,我們用基本動畫效果來設(shè)置一個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í)行基本動畫效果
        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

自定義動畫效果

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

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號