iOS 動(dòng)畫(huà)框架pop使用方法

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

彈簧動(dòng)畫(huà)效果

  • 1.效果圖如下:


  • 2.控制器代碼如下,首先用pod安裝導(dǎo)入pop框架:
   #import "ViewController.h"
    #import <POP.h>

    @interface ViewController ()

    @end

    @implementation ViewController

    - (void)viewDidLoad {
        [super viewDidLoad];
        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];

        // 彈簧動(dòng)畫(huà)
        POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
        anim.toValue             = [NSValue valueWithCGPoint:CGPointMake(3.f, 3.f)];
        anim.springSpeed         = 0.f;
        [layer pop_addAnimation:anim forKey:nil];
    }

    @end
  • 3.上述代碼設(shè)置了彈簧對(duì)象的速度(springSpeed)、最終值大小(toValue)，最后圖層對(duì)象layer添加彈簧對(duì)象。

衰減動(dòng)畫(huà)

  • 1.衰減動(dòng)畫(huà)效果


  • 2.實(shí)現(xiàn)代碼：

    #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)畫(huà)
            POPDecayAnimation *positionAnimation = \
        [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];

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

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

            // 添加動(dòng)畫(huà)
            [recognizer.view.layer pop_addAnimation:positionAnimation
                                         forKey:nil];
        }
    }

    @end
  • 3.對(duì)拖拽對(duì)象添加了pan手勢(shì)，根據(jù)手勢(shì)的位置移動(dòng)拖拽對(duì)象，recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,recognizer.view.center.y + translation.y)之后要清零相對(duì)位置，即調(diào)用[recognizer setTranslation:CGPointMake(0, 0) inView:self.view]。在拖拽動(dòng)作結(jié)束的時(shí)候，計(jì)算出相對(duì)速度設(shè)置給衰減動(dòng)畫(huà)對(duì)象。

基本動(dòng)畫(huà)效果

  • 1.基本動(dòng)畫(huà)效果如下:


  • 2.代碼如下:

   #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)畫(huà)效果
        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:nil];
    }

    @end
  • 3.基本動(dòng)畫(huà)對(duì)象只需要設(shè)置起始值(fromValue)和最終值(toValue)以及持續(xù)時(shí)間(duration)就可以了。

POP動(dòng)畫(huà)綜合實(shí)戰(zhàn)

  • 1.動(dòng)畫(huà)效果如下：


  • 2.點(diǎn)擊中間紅色按鈕，6個(gè)按鈕從上面墜落。點(diǎn)擊取消，6個(gè)按鈕又從上邊掉下消失。代碼實(shí)現(xiàn)如下：
#import "BSPublishController.h"
#import "BSVerticalButton.h"
#import <POP.h>
@interface BSPublishController ()
@property(nonatomic,weak)UIImageView *sloganView;
@end
@implementation BSPublishController

 - (void)viewDidLoad {
    [super viewDidLoad];
    //添加6個(gè)按鈕
    NSArray *name = @[@"發(fā)視頻",@"發(fā)圖片",@"發(fā)段子",@"發(fā)聲音",@"審帖",@"離線下載"];
    NSArray *imageName = @[@"publish-video",@"publish-picture",@"publish-text",@"publish-audio",@"publish-review",@"publish-offline"];
    NSUInteger count = name.count;
    NSUInteger maxCols = 3;
    CGFloat buttonW = 72;
    CGFloat buttonH = buttonW + 50;
    CGFloat buttonStartX = 20;
    CGFloat buttonStartY = (BSScreenH-2*buttonH)*0.5;
    CGFloat buttonMargin = (BSScreenW-2*buttonStartX-buttonW*maxCols)/(maxCols-1);
    for (NSUInteger i = 0; i < count; i++) {
        BSVerticalButton *button = [[BSVerticalButton alloc]init];
        [button setImage:[UIImage imageNamed:imageName[i]] forState:UIControlStateNormal];
        [button setTitle:name[i] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        button.titleLabel.font = [UIFont systemFontOfSize:14];
        button.tag = i;
        [button addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:button];
        //計(jì)算frame
        NSUInteger row = i/maxCols;
        NSUInteger col = i%maxCols;
        CGFloat buttonX = buttonStartX + col*(buttonW+buttonMargin);
        CGFloat buttonY = buttonStartY + row*buttonH;
        //使用pop框架，改變frame往下掉,而且不需要再設(shè)置frame了，因?yàn)閜op改變了frame
        POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
        anim.fromValue = [NSValue valueWithCGRect:CGRectMake(buttonX, buttonY-BSScreenH, buttonW, buttonH)];
        anim.toValue   = [NSValue valueWithCGRect:CGRectMake(buttonX, buttonY, buttonW, buttonH)];
        anim.springBounciness = 8;
        anim.springSpeed = 8;
        anim.beginTime = CACurrentMediaTime()+0.1*i;
        [button pop_addAnimation:anim forKey:nil];
    }

    //添加頂部圖片
    UIImageView *slogan = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"app_slogan"]];
    self.sloganView = slogan;
    [self.view addSubview:slogan];
    //中心約束
    POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPViewCenter];
    anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(BSScreenW*0.5, BSScreenH*0.2-BSScreenH)];
    anim.toValue   = [NSValue valueWithCGPoint:CGPointMake(BSScreenW*0.5, BSScreenH*0.2)];
    anim.springBounciness = 8;
    anim.springSpeed = 8;
    anim.beginTime = CACurrentMediaTime()+0.1*count;
    [slogan pop_addAnimation:anim forKey:nil];
}

上面沒(méi)有單獨(dú)設(shè)置按鈕的frame,而是在pop對(duì)象的屬性(fromValue和toValue)里進(jìn)行了設(shè)置。這里重寫(xiě)了Button按鈕，重寫(xiě)的代碼如下:

#import "BSVerticalButton.h"
@implementation BSVerticalButton

 - (instancetype)initWithFrame:(CGRect)frame {
    if (self == [super initWithFrame:frame]) {
        self.titleLabel.textAlignment = NSTextAlignmentCenter;
    }
    return self;
}

  - (void)awakeFromNib {
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
}

 //這個(gè)是控件重新布局，所以要調(diào)用layoutSubviews，而修改控件大小，是調(diào)用setFrame
 - (void)layoutSubviews {

    [super layoutSubviews];
    self.imageView.x = 0;
    self.imageView.y = 0;
    self.imageView.width = self.width;
    self.imageView.height = self.imageView.width;
    
    self.titleLabel.x = 0;
    self.titleLabel.y = self.imageView.height;
    self.titleLabel.width = self.width;
    self.titleLabel.height = self.height - self.width;
}

 - (void)setFrame:(CGRect)frame {
    [super setFrame:frame];
}
@end

點(diǎn)擊取消6個(gè)按鈕從上面掉下來(lái)，代碼如下:

   - (void)cancel:(void(^)(int))completeion{
    //讓按鈕往下掉
    NSUInteger index = 2;
    NSUInteger count = self.view.subviews.count;

    for (NSUInteger i = index; i<count ; i++) {
        UIView *subview = self.view.subviews[i];
        //這里不需要計(jì)算frame，因?yàn)橐呀?jīng)添加到view中，只需要設(shè)置最后的位置
        POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];
        anim.toValue  = [NSValue valueWithCGPoint:CGPointMake(subview.centerX, subview.centerY+BSScreenH)];
        anim.beginTime = CACurrentMediaTime()+0.1*i;
        [subview pop_addAnimation:anim forKey:nil];
        if (i == count-1) {
            //最后一個(gè)控件pop完退出控制器，寫(xiě)在外面會(huì)直接退出
            [anim setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
                if (completeion) {
                    
                }
                [self dismissViewControllerAnimated:NO completion:nil];
            }];
        }
    }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺ios動(dòng)畫(huà)全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,690評(píng)論 6贊 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你可以看...
    F麥子閱讀 5,270評(píng)論 5贊 13
  • "小畫(huà)板程序"完成"小畫(huà)板"程序。 下載地址：http://git.oschina.net/changyou/my...
    _淺墨_閱讀 790評(píng)論 0贊 5
  • 在iOS實(shí)際開(kāi)發(fā)中常用的動(dòng)畫(huà)無(wú)非是以下四種：UIView動(dòng)畫(huà)，核心動(dòng)畫(huà)，幀動(dòng)畫(huà)，自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,324評(píng)論 1贊 23
  • Core Animation Core Animation，中文翻譯為核心動(dòng)畫(huà)，它是一組非常強(qiáng)大的動(dòng)畫(huà)處理API，...
    45b645c5912e閱讀 3,157評(píng)論 0贊 21

友情鏈接更多精彩內(nèi)容