本文翻譯自Creating Simple Animations with Facebook's Pop Framework
本文,我們將用Facebook POP framework在應(yīng)用中來(lái)做一些好看實(shí)用的動(dòng)畫.就像其他AppCode的文章一樣,我將用實(shí)例來(lái)使你明白且掌握Pop的用法.最終我們將用它來(lái)實(shí)現(xiàn)四個(gè)簡(jiǎn)單的動(dòng)畫.
Pop是可用于iOS和OS X的拓展動(dòng)畫引擎.除了提供基本的動(dòng)畫類型,諸如Linear,Ease-In,Ease-Out,Ease-In-Ease-Out外,它還提供彈簧、衰減和自定義動(dòng)畫.
- Spring - 創(chuàng)建力學(xué)特性動(dòng)畫反彈效果
- Decay - 創(chuàng)建力學(xué)特性移動(dòng)物體平滑停止的效果
- Custom - 由于引擎的可擴(kuò)展性,你可以自定義動(dòng)畫效果
Pop的基礎(chǔ)動(dòng)畫類型為POPAnimation.你可以認(rèn)為它是所有POP動(dòng)畫的抽象類或者底層類.Pop接口是NSObject的category.因此任何對(duì)象都可以使用Pop來(lái)添加動(dòng)畫.
Pop的API對(duì)開發(fā)者相當(dāng)友好,你可以很輕松地完成逼真的擁有物理特性的效果.例如,下面就是創(chuàng)建一個(gè)具有彈簧效果的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")
非常簡(jiǎn)單吧？下面我們來(lái)編寫一個(gè)Demo.我相信當(dāng)你完成這個(gè)Demo的時(shí)候你會(huì)對(duì)Pop有一個(gè)更好的理解.
- Pop Framework的使用
如果你使用CocoPods,在你項(xiàng)目中的Podfile文件中添加:
pod 'pop','~>1.0'
如果沒(méi)有用Cocopods,你可以在這里下載,然后將pop文件夾拖進(jìn)你的項(xiàng)目中.選擇你的項(xiàng)目確保Build Setting下的"Other Linker Flags"選項(xiàng)下增加-lc++.
還要把Header Search Path設(shè)置正確.例如,我通常將"pop"framework放在"Library"文件夾.你可以設(shè)置Header Search Path為"$(SRCROOT)/Library".當(dāng)你使用時(shí),只需在你的代碼里添加:
#import <pop/POP.h>
完成后,創(chuàng)建一個(gè)如下的僅有三行的table view:
你也可以在這里下載初始項(xiàng)目.
- Example #1: UITableViewCell動(dòng)畫
首先我們來(lái)創(chuàng)建一個(gè)table view cell動(dòng)畫.當(dāng)用戶點(diǎn)擊時(shí)添加一個(gè)放大效果的動(dòng)畫.手放開時(shí)使用spring動(dòng)畫來(lái)返回.
用下面的代碼在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用起來(lái)相當(dāng)簡(jiǎn)單.首先選擇動(dòng)畫的類型.上面的例子中,我們選擇POPBasicAnimation作為選中時(shí)的動(dòng)畫,選擇POPSpringAnimation作為手指離開時(shí)的動(dòng)畫.類型選擇完后,就該設(shè)置動(dòng)畫的屬性了.Label上的兩個(gè)動(dòng)畫我們都設(shè)置了kPOPViewScaleXY屬性.下一步,我們?cè)O(shè)置將對(duì)象放大為CGPointMake(1,1).根據(jù)不同的動(dòng)畫類型,你需要另外增加相應(yīng)的設(shè)置,比如在spring動(dòng)畫中添加springBounciness屬性來(lái)控制彈簧的效果.最后我們將動(dòng)畫添加到text label上且給它個(gè)名字(例如springAnimation)
Pop提供了創(chuàng)建動(dòng)畫時(shí)的各種屬性,你可以通過(guò)查看POPAnimatableProperty.h來(lái)了解.
運(yùn)行程序,點(diǎn)擊cell后手指離開來(lái)查看動(dòng)畫效果.
- Example #2:Like Button添加動(dòng)畫
你使用過(guò)Facebook Messager app嗎？我非常喜歡發(fā)送信息時(shí)Send/Like按鈕的動(dòng)畫.下面我用Pop來(lái)創(chuàng)建一個(gè)類似的動(dòng)畫.
首先在storyboard里創(chuàng)建一個(gè)新的view controller.添加一個(gè)評(píng)論用的text field.將Like button放在Send button的位置.默認(rèn)Like button會(huì)顯示.當(dāng)用戶填寫評(píng)論時(shí),我們將隱藏Like button,顯示Send button,這個(gè)過(guò)程會(huì)添加動(dòng)畫效果.
最后將列表View controller和Facebook Like View controller通過(guò)Segue連接起來(lái).設(shè)置segue的identifier為"openFB".等會(huì)我們會(huì)編寫segue的相關(guān)代碼.
創(chuàng)建完界面后,新建一個(gè)名為FacebookButtonAnimationViewController的自定義view controller類.
接下來(lái),創(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里面添加如下代碼來(lái)設(shè)置text field的代理和隱藏Send按鈕:
self.msgTextField.delegate = self;
self.sendButton.hidden = YES;
現(xiàn)在我們?cè)趯?shí)現(xiàn)方法里來(lái)處理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)容時(shí)會(huì)調(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按鈕添加一個(gè)屬性為kPOPViewScaleXY屬性的spring動(dòng)畫.
Like按鈕有同樣的設(shè)置,但是用一個(gè)翻轉(zhuǎn)動(dòng)畫來(lái)替換spring動(dòng)畫.創(chuàng)建一個(gè)POPSpringAnimation并設(shè)置屬性值"from"和"to".Like按鈕會(huì)從45度(M_PI/4)翻轉(zhuǎn)到0度,bounciness值為20.
最后,添加下面的代碼在ExamplesListViewController.m來(lái)處理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)在來(lái)測(cè)試下應(yīng)用.點(diǎn)擊Run按鈕在text filed輸入內(nèi)容來(lái)測(cè)試動(dòng)畫效果.
Girl學(xué)iOS100天 第10天
