Pop(Part1)

本文翻譯自Creating Simple Animations with Facebook's Pop Framework

pop-animations.jpg

本文,我們將用Facebook POP framework在應(yīng)用中來做一些好看實(shí)用的動畫.就像其他AppCode的文章一樣,我將用實(shí)例來使你明白且掌握Pop的用法.最終我們將用它來實(shí)現(xiàn)四個簡單的動畫.
Pop是可用于iOS和OS X的拓展動畫引擎.除了提供基本的動畫類型,諸如Linear,Ease-In,Ease-Out,Ease-In-Ease-Out外,它還提供彈簧、衰減和自定義動畫.

  • Spring - 創(chuàng)建力學(xué)特性動畫反彈效果
  • Decay - 創(chuàng)建力學(xué)特性移動物體平滑停止的效果
  • Custom - 由于引擎的可擴(kuò)展性,你可以自定義動畫效果

Pop的基礎(chǔ)動畫類型為POPAnimation.你可以認(rèn)為它是所有POP動畫的抽象類或者底層類.Pop接口是NSObject的category.因此任何對象都可以使用Pop來添加動畫.

pop-category.jpg

Pop的API對開發(fā)者相當(dāng)友好,你可以很輕松地完成逼真的擁有物理特性的效果.例如,下面就是創(chuàng)建一個具有彈簧效果的test label:

Objective-C 
POPSpringAnimation *sprintAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
sprintAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(0.9, 0.9)];
sprintAnimation.velocity = [NSValue valueWithCGPoint:CGPointMake(2, 2)];
sprintAnimation.springBounciness = 20.f;
[self.textLabel pop_addAnimation:sprintAnimation forKey:@"springAnimation"];

swift

        let springAnimation = POPSpringAnimation(propertyNamed: kPOPViewScaleXY)
        springAnimation.toValue = NSValue(CGPoint: CGPointMake(0.9, 0.9))
        springAnimation.velocity = NSValue(CGPoint: CGPointMake(2, 2))
        springAnimation.springBounciness = 20
        textLabel.pop_addAnimation(springAnimation, forKey: "springAnimation")

非常簡單吧？下面我們來編寫一個Demo.我相信當(dāng)你完成這個Demo的時候你會對Pop有一個更好的理解.

  • Pop Framework的使用
    如果你使用CocoPods,在你項(xiàng)目中的Podfile文件中添加:

pod 'pop','~>1.0'

如果沒有用Cocopods,你可以在這里下載,然后將pop文件夾拖進(jìn)你的項(xiàng)目中.選擇你的項(xiàng)目確保Build Setting下的"Other Linker Flags"選項(xiàng)下增加-lc++.

using-pop-framework-hd.jpg

還要把Header Search Path設(shè)置正確.例如,我通常將"pop"framework放在"Library"文件夾.你可以設(shè)置Header Search Path為"$(SRCROOT)/Library".當(dāng)你使用時,只需在你的代碼里添加:

#import <pop/POP.h>

完成后,創(chuàng)建一個如下的僅有三行的table view:

sample-pop-app.jpg

你也可以在這里下載初始項(xiàng)目.

  • Example #1: UITableViewCell動畫
    首先我們來創(chuàng)建一個table view cell動畫.當(dāng)用戶點(diǎn)擊時添加一個放大效果的動畫.手放開時使用spring動畫來返回.
    用下面的代碼在ExampleCell.m重寫setHighlighted:方法:
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated
{
    [super setHighlighted:highlighted animated:animated];
    if (self.highlighted) {
        POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewScaleXY];
        scaleAnimation.duration = 0.1;
        scaleAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(1, 1)];
        [self.textLabel pop_addAnimation:scaleAnimation forKey:@"scalingUp"];
    } else {
        POPSpringAnimation *sprintAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
        sprintAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(0.9, 0.9)];
        sprintAnimation.velocity = [NSValue valueWithCGPoint:CGPointMake(2, 2)];
        sprintAnimation.springBounciness = 20.f;
        [self.textLabel pop_addAnimation:sprintAnimation forKey:@"springAnimation"];
    }
}

Pop用起來相當(dāng)簡單.首先選擇動畫的類型.上面的例子中,我們選擇POPBasicAnimation作為選中時的動畫,選擇POPSpringAnimation作為手指離開時的動畫.類型選擇完后,就該設(shè)置動畫的屬性了.Label上的兩個動畫我們都設(shè)置了kPOPViewScaleXY屬性.下一步,我們設(shè)置將對象放大為CGPointMake(1,1).根據(jù)不同的動畫類型,你需要另外增加相應(yīng)的設(shè)置,比如在spring動畫中添加springBounciness屬性來控制彈簧的效果.最后我們將動畫添加到text label上且給它個名字(例如springAnimation)

Pop提供了創(chuàng)建動畫時的各種屬性,你可以通過查看POPAnimatableProperty.h來了解.

運(yùn)行程序,點(diǎn)擊cell后手指離開來查看動畫效果.

pop-animation-1-1.gif
  • Example #2:Like Button添加動畫
    你使用過Facebook Messager app嗎？我非常喜歡發(fā)送信息時Send/Like按鈕的動畫.下面我用Pop來創(chuàng)建一個類似的動畫.
    首先在storyboard里創(chuàng)建一個新的view controller.添加一個評論用的text field.將Like button放在Send button的位置.默認(rèn)Like button會顯示.當(dāng)用戶填寫評論時,我們將隱藏Like button,顯示Send button,這個過程會添加動畫效果.

facebook-send-ui-design-hd.jpg

最后將列表View controller和Facebook Like View controller通過Segue連接起來.設(shè)置segue的identifier為"openFB".等會我們會編寫segue的相關(guān)代碼.
創(chuàng)建完界面后,新建一個名為FacebookButtonAnimationViewController的自定義view controller類.
接下來,創(chuàng)建Like和Send按鈕的變量.另外還有text field的.你的代碼如下:

@interface FacebookButtonAnimationViewController ()
@property (weak, nonatomic) IBOutlet UIButton *likeButton;
@property (weak, nonatomic) IBOutlet UIButton *sendButton;
@property (weak, nonatomic) IBOutlet UITextField *msgTextField;
@end

在FacebookButtonAnimationViewController.h里面導(dǎo)入POP.h實(shí)現(xiàn)UITextFieldDelegate方法:

#import <UIKit/UIKit.h>
#import <pop/POP.h>
@interface FacebookButtonAnimationViewController : UIViewController <UITextFieldDelegate>
@end

在FacebookButtonAnimationViewController.m的viewDidLoad里面添加如下代碼來設(shè)置text field的代理和隱藏Send按鈕:

self.msgTextField.delegate = self;
self.sendButton.hidden = YES;

現(xiàn)在我們在實(shí)現(xiàn)方法里來處理text field,添加如下方法:

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
    
    NSString *comment;
    
    if (range.length == 0) {
        comment = [NSString stringWithFormat:@"%@%@", textField.text, string];
    } else {
        comment = [textField.text substringToIndex:textField.text.length - range.length];
    }
    
    if (comment.length == 0) {
        // Show Like
        [self showLikeButton];
    } else  {
        // Show Send
        [self showSendButton];
    }
    
    return YES;
}

當(dāng)用戶輸入或者刪除輸入內(nèi)容時會調(diào)用shouldChangeCharactersInRange方法.如果text field為空,將顯示Like按鈕,如果不為空,則顯示Send按鈕.
下面我們將實(shí)現(xiàn)showLikeButton和showSendButton的方法:

- (void)showSendButton {
    if (self.sendButton.isHidden) {
        self.likeButton.hidden = YES;
        self.sendButton.hidden = NO;
        
        POPSpringAnimation *sprintAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
        
        sprintAnimation.velocity = [NSValue valueWithCGPoint:CGPointMake(8, 8)];
        sprintAnimation.springBounciness = 20.f;
        [self.sendButton pop_addAnimation:sprintAnimation forKey:@"sendAnimation"];
    }
}
 
-(void)showLikeButton {
    self.likeButton.hidden = NO;
    self.sendButton.hidden = YES;
    
    POPSpringAnimation *spin = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];
    
    spin.fromValue = @(M_PI / 4);
    spin.toValue = @(0);
    spin.springBounciness = 20;
    spin.velocity = @(10);
    [self.likeButton.layer pop_addAnimation:spin forKey:@"likeAnimation"];
}

在showSendButton方法,我們隱藏Like按鈕顯示Send按鈕,給Send按鈕添加一個屬性為kPOPViewScaleXY屬性的spring動畫.
Like按鈕有同樣的設(shè)置,但是用一個翻轉(zhuǎn)動畫來替換spring動畫.創(chuàng)建一個POPSpringAnimation并設(shè)置屬性值"from"和"to".Like按鈕會從45度(M_PI/4)翻轉(zhuǎn)到0度,bounciness值為20.
最后,添加下面的代碼在ExamplesListViewController.m來處理segue跳轉(zhuǎn):

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    switch (indexPath.row) {
        case 0:
            [self performSegueWithIdentifier:@"openFB" sender:self];
            break;
        case 1:
            [self performSegueWithIdentifier:@"openWrongPass" sender:self];
            break;
        case 2:
            [self performSegueWithIdentifier:@"openCustomTransition" sender:self];
            break;
            
        default:
            break;
    }
}

現(xiàn)在來測試下應(yīng)用.點(diǎn)擊Run按鈕在text filed輸入內(nèi)容來測試動畫效果.

pop-animation-2.gif

Girl學(xué)iOS100天 第10天

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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