POPAnimation初體驗(yàn)

本人有若干成套學(xué)習(xí)視頻, 可試看! 可試看! 可試看, 重要的事情說三遍 包含Java, 數(shù)據(jù)結(jié)構(gòu)與算法, iOS, 安卓, python, flutter等等, 如有需要, 聯(lián)系微信tsaievan.

POPAnimation 是 facebook 搞出來的一個(gè)框架,專門做動(dòng)畫的.

常言道,一個(gè)框架不好用就不是一個(gè)好框架, github 上16000+stars 可不是蓋的,足見其受歡迎程度

POPAnimation 的使用方法和 CAAnimation極為相似,設(shè)置架構(gòu)都和 CAAnimation 相似,如下圖所示


POPAnimation的結(jié)構(gòu)
  • POPAnimation是一個(gè)大的基類
  • POPPropertyAnimation 繼承自POPAnimation
  • 但真正起作用的還是下面紅色方框中的四個(gè)類
這四個(gè)類的使用方法基本相同,主要就有以下三步
  1. 初始化動(dòng)畫效果對(duì)象
  2. 為動(dòng)畫效果添加屬性
  3. 將動(dòng)畫效果添加到目標(biāo)對(duì)象上

這都是套路了,不多說
我就寫了一個(gè)很簡(jiǎn)單的 demo, 太復(fù)雜的咱也不會(huì),之前沒有看過任何 demo, 和資料,只聽說過有這么個(gè)東西,寫起來還是坑太多啊.況且之前的 CAAnimation 也忘了個(gè)七七八八.

先看下效果圖:
demo 效果

可以看到,這是個(gè)包含2個(gè) tableView 的控制器
很多電商類的 APP 都實(shí)現(xiàn)了這種雙 tableView的聯(lián)動(dòng),但這不是今天的重點(diǎn)

  • 點(diǎn)擊左邊的 cell, 右邊 tableView 變成一個(gè) alpha 值為0.6的小正方形縮到屏幕的左上角,隨后自動(dòng)還原

  • 點(diǎn)擊右邊的 cell, 左邊的 tableView 直接縮到左下角,點(diǎn)擊屏幕還原.

關(guān)鍵代碼如下
 >  // -------- 彈簧動(dòng)畫 --------
 >/* 初始化彈簧動(dòng)畫效果對(duì)象 */

POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

 >/* 設(shè)置動(dòng)畫效果的屬性 */
>animation.springSpeed = 20;
>animation.springBounciness = 20;
>animation.toValue = [NSValue >valueWithCGRect:self.leftTableViewRect];

 >/* 將動(dòng)畫添加到需要呈現(xiàn)的對(duì)象上,理論上可以是任何對(duì)象 */

[self.leftTableView pop_addAnimation:animation >forKey:@"sizeLarge"];

    >// -------- 基本動(dòng)畫 --------
>  - 初始化動(dòng)畫效果對(duì)象
  >  - 為動(dòng)畫效果對(duì)象設(shè)置屬性
  >  - 將動(dòng)畫效果添加到對(duì)象身上

>POPBasicAnimation *basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
basicAnimation.fromValue = @0;
basicAnimation.toValue = @1;
basicAnimation.duration = 2;
[self.leftTableView pop_addAnimation:basicAnimation forKey:@"alphaChange"];
完整代碼如下:

#import "ViewController.h"
#import <pop/POP.h>

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource,POPAnimationDelegate>
@property (weak, nonatomic) IBOutlet UITableView *leftTableView;
@property (weak, nonatomic) IBOutlet UITableView *rightTableView;
/* 記錄左邊 tableView 的 Rect 值 */
@property (nonatomic,assign) CGRect leftTableViewRect;

/* 記錄右邊 tableView 的 Rect 值 */
@property (nonatomic,assign)CGRect rightTableViewRect;

@end

@implementation ViewController

#pragma mark *** 視圖的生命周期 ***
- (void)viewDidLoad {
    [super viewDidLoad];
    self.leftTableView.dataSource = self;
    self.rightTableView.dataSource =self;
    self.leftTableView.delegate = self;
    self.rightTableView.delegate =self;
    [self setupUI];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
        // -------- 在 viewDidAppear 中存儲(chǔ)控件的 frame 值才能獲得真正的正確的 frame 值 --------
    self.leftTableViewRect = self.leftTableView.frame;
    self.rightTableViewRect = self.rightTableView.frame;
}

    // -------- 在 dealloc 方法中移除所有動(dòng)畫 --------
-(void)dealloc
{
    [self pop_removeAllAnimations];
}

#pragma mark *** 設(shè)置 UI ***
- (void)setupUI
{
    UIImage *image = [UIImage imageNamed:@"01"];
    self.view.layer.contents = (__bridge id _Nullable)(image.CGImage);
}

#pragma mark *** 點(diǎn)擊屏幕觸發(fā)的方法 ***
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
        // -------- 彈簧動(dòng)畫 --------
    
     /* 初始化彈簧動(dòng)畫效果對(duì)象 */
    POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
    
     /* 設(shè)置動(dòng)畫效果的屬性 */
    animation.springSpeed = 20;
    animation.springBounciness = 20;
    animation.toValue = [NSValue valueWithCGRect:self.leftTableViewRect];
    
     /* 將動(dòng)畫添加到需要呈現(xiàn)的對(duì)象上,理論上可以是任何對(duì)象 */
    [self.leftTableView pop_addAnimation:animation forKey:@"sizeLarge"];
    
    
        // -------- 基本動(dòng)畫 --------
    
     /* 同樣是這三步
      * 1. 初始化動(dòng)畫效果對(duì)象
      * 2. 為動(dòng)畫效果對(duì)象設(shè)置屬性
      * 3. 將動(dòng)畫效果添加到對(duì)象身上
      */
    
    POPBasicAnimation *basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
    basicAnimation.fromValue = @0;
    basicAnimation.toValue = @1;
    basicAnimation.duration = 2;
    [self.leftTableView pop_addAnimation:basicAnimation forKey:@"alphaChange"];
}

#pragma mark *** tableView 的數(shù)據(jù)源方法 ***

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([tableView isEqual:self.leftTableView]) {
        UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"leftCell"];
        cell.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1];
        
        return cell;
    }else
    {
        UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"rightCell"];
        cell.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1];
        
        return cell;
    }
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if ([tableView isEqual:self.leftTableView]) {
        return 5;
    }else
    {
        return 10;
    }
}

#pragma mark *** tableView 的代理方法 ***
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([tableView isEqual:self.rightTableView]) {
        POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
        animation.springSpeed = 20;
        animation.springBounciness = 20;
        animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, [UIScreen mainScreen].bounds.size.height - 1, 1, 1)];
        [self.leftTableView pop_addAnimation:animation forKey:@"sizeSmall"];
        
    }else
    {
        POPBasicAnimation *basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
        basicAnimation.fromValue = @0;
        basicAnimation.toValue = @0.6;
        basicAnimation.duration = 1;
        [self.rightTableView pop_addAnimation:basicAnimation forKey:@"alphaChange"];
        
        POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
        
        animation.springSpeed = 20;
        animation.springBounciness = 20;
        animation.toValue = [NSValue valueWithCGRect:CGRectMake([UIScreen mainScreen].bounds.size.width - 100,0,100,100)];
        [self.rightTableView pop_addAnimation:animation forKey:@"hidden"];
        
        animation.delegate = self;
    }
}
#pragma mark *** POPAnimationDelegate POPAnimation的代理方法 ***
    // -------- 當(dāng)動(dòng)畫停止時(shí)執(zhí)行 --------
- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished
{
    POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
    springAnimation.springSpeed = 20;
    springAnimation.springBounciness = 20;
    springAnimation.toValue = [NSValue valueWithCGRect:self.rightTableViewRect];
    [self.rightTableView pop_addAnimation:springAnimation forKey:@"appear"];
    
    POPBasicAnimation *basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
    basicAnimation.fromValue = @0.6;
    basicAnimation.toValue = @1;
    basicAnimation.duration = 1;
    [self.rightTableView pop_addAnimation:basicAnimation forKey:@"alphaChange"];
}
@end

PS. 本人有若干成套學(xué)習(xí)視頻, 包含Java, 數(shù)據(jù)結(jié)構(gòu)與算法, iOS, 安卓, python, flutter等等, 如有需要, 聯(lián)系微信tsaievan.

最后編輯于 ：
?著作權(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)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果，實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜，今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,697評(píng)論 6贊 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果，實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫全貌。在這里你可以看...
    F麥子閱讀 5,271評(píng)論 5贊 13
  • 在iOS實(shí)際開發(fā)中常用的動(dòng)畫無非是以下四種：UIView動(dòng)畫，核心動(dòng)畫，幀動(dòng)畫，自定義轉(zhuǎn)場(chǎng)動(dòng)畫。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,329評(píng)論 1贊 23
  • 顯式動(dòng)畫 顯式動(dòng)畫，它能夠?qū)σ恍傩宰鲋付ǖ淖远x動(dòng)畫，或者創(chuàng)建非線性動(dòng)畫，比如沿著任意一條曲線移動(dòng)。 屬性動(dòng)畫 ...
    清風(fēng)沐沐閱讀 2,098評(píng)論 1贊 5
  • 本文轉(zhuǎn)載自：http://www.cocoachina.com/ios/20150105/10812.html 為...
    idiot_lin閱讀 1,382評(píng)論 0贊 1

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