iOS開發(fā)-Pop動畫教程

本文資料來自http://www.appcoda.com/facebook-pop-framework-intro/ 如有錯誤歡迎各位指出

如果你使用 CocoaPods渡冻,你可以添加下面這句話到你的工程中的Podfile文件中族吻;

pod ‘pop’

如果你沒有CocoaPods,你能下載Pop這個框架在https://github.com/facebook/pop 之后添加pop這個文件夾到你的工程中超歌,并且確保你的工程中的“Other Linker Flags”選項已經(jīng)添加了“-lc++”;

5BAD58AF-BE99-4A65-954D-90C7CD300FB9.png

使用Pop

首先導(dǎo)入頭文件

#import "POP.h"

例子一:UITableViewCell Animation

pop-animation-1-1.gif

我們創(chuàng)建一個動畫在tableViewCell上脆荷,首先添加一個放大的動畫當(dāng)我們點擊cell的時候懊悯,當(dāng)我們手離開屏幕的時候炭分,我們用將cell上縮回原先的大小用spring animation;

重寫cell中的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為我們提供許多創(chuàng)建動畫的預(yù)定義屬性师痕,你能找到這些屬性在“POPAnimatableProperty.h”文件中胰坟;

例子二:Animating a Like Button

pop-animation-2.gif

創(chuàng)建一個controller在storyBoard中泞辐,在controller中創(chuàng)建一個UITextField铛碑,之后添加一個send和like按鈕虽界,like按鈕在send按鈕的上面,默認(rèn)的情況下我們展示like按鈕撇吞,當(dāng)用戶輸入文字在textField中我們隱藏like按鈕礁叔,展示send按鈕用一個動畫琅关;
創(chuàng)建一個名為FacebookButtonAnimationViewController的類 繼承UIViewController;在這個類中添加like和send按鈕画机,還有textField的變量;

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

@end

實現(xiàn)UITextField的代理方法:

-(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string

在這個方法中我們可以監(jiān)控用戶輸入和刪除文字响禽,內(nèi)部的實現(xiàn)如下:

-(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;
}

之后我們實現(xiàn)showLikeButton和showSendButton

-(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"];
}

-(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"];
    }
}

例子三:Wrong Password Animation

pop-animation-3-2.gif

首先在storyBoard中新建一個controller,在controller中添加textField和一個button侯繁;
接下來創(chuàng)建一個繼承UIViewControll名位WrongPasswordViewController的類铺董,在類中創(chuàng)建一個UITextField的變量與storyBoard中的textField關(guān)聯(lián),命名為passwordTextField坝锰;

@interface WrongPasswordViewController ()
@property (weak, nonatomic) IBOutlet UITextField *passwordTextField;

@end

之后我們創(chuàng)建一個名位login的方法為Login Button,在這個方法中我們校驗密碼是否正確重付,如果不正確我們?yōu)閠extField添加一個搖晃動畫;

-(void)login{
    POPSpringAnimation *shake = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    
    shake.springBounciness = 20;
    shake.velocity = @(3000);
    
    [self.passwordTextField.layer pop_addAnimation:shake forKey:@"shakePassword"];
}

例子四:Custom View Controller Transition

pop-animation-4.gif

這個例子將教你們怎么跳轉(zhuǎn)到一個控制器用自定義動畫,我們在控制器中建一個按鈕“present”删掀,當(dāng)用戶點擊這個按鈕,app跳轉(zhuǎn)到另一個控制器中用一個自定義動畫纤子,從iOS7開始款票,你能夠自定義控制器的過渡動畫用UIViewController的transitioningDelegate.在這個代理中,我們要實現(xiàn)UIViewControllerTransitioningDelegate的代理方法卡乾,還有提供過渡動畫的實現(xiàn)缚够;

首先鹦赎,創(chuàng)建在storyBoard中創(chuàng)建倆個controller和倆個新類钙姊,命名為 “CustomVCTransitionViewController”和 “CustomModalViewController”
UI設(shè)計如下:

custom-view-controller-ui-hd.jpg

現(xiàn)在我們實現(xiàn)CustomVCTransitionViewController中Present按鈕的點擊煞额,首先是添加UIViewControllerTransitioningDelegate的聲明膊毁;
在CustomVCTransitionViewController.m 我們引入一下頭文件:

#import "CustomModalViewController.h"

#import "PresentingAnimationController.h"
#import "DismissingAnimationController.h"

接下來實現(xiàn)Present按鈕的action和代理方法:

- (IBAction)didClickOnPresent:(id)sender {
    
    CustomModalViewController *modalVC = [self.storyboard instantiateViewControllerWithIdentifier:@"customModal"];
    
    
    modalVC.transitioningDelegate = self;

    modalVC.modalPresentationStyle = UIModalPresentationCustom;
    
    [self.navigationController presentViewController:modalVC animated:YES completion:nil];
}

#pragma mark - UIViewControllerTransitionDelegate -

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
    return [[PresentingAnimationController alloc] init];
}

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
    return [[DismissingAnimationController alloc] init];
}

當(dāng)Present按鈕被點擊的時候婚温,didClickOnPresent會響應(yīng)點擊事件媳否,在這個方法中我們初始化CustomModalViewController,并且設(shè)置過度代理方法對于當(dāng)前這個controller力图;
我們必須實現(xiàn) UIViewControllerTransitioningDelegate中倆個必須實現(xiàn)的代理方法掺逼,animationControllerForPresentedController方法返回跳轉(zhuǎn)到CustomModalViewController的過渡動畫.相反,animationControllerForDismissedController返回動畫為了要dismiss的控制器赘那;
現(xiàn)在我們創(chuàng)建一個繼承NSObject的新類叫做PresentingAnimationController氯质,在這個類中我們遵守UIViewControllerAnimatedTransitioning協(xié)議.
在PresentingAnimationController.m中我們添加下面的方法:

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
    return 0.5f;
}



- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
    
    UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
    fromView.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
    fromView.userInteractionEnabled = NO;
    
    UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;
    toView.frame = CGRectMake(0,
                              0,
                              CGRectGetWidth(transitionContext.containerView.bounds) - 100.f,
                              CGRectGetHeight(transitionContext.containerView.bounds) - 280.f);
    CGPoint p = CGPointMake(transitionContext.containerView.center.x, -transitionContext.containerView.center.y);
    toView.center = p;
    
    [transitionContext.containerView addSubview:toView];
    
    POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];
    positionAnimation.toValue = @(transitionContext.containerView.center.y);
    positionAnimation.springBounciness = 10;
    [positionAnimation setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
        [transitionContext completeTransition:YES];
    }];
    
    POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleAnimation.springBounciness = 20;
    scaleAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(1.2, 1.4)];
    
    [toView.layer pop_addAnimation:positionAnimation forKey:@"positionAnimation"];
    [toView.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnimation"];

    
}

第一個方法返回過渡時間拱礁,為了實現(xiàn)動畫蜓陌,我們實現(xiàn)animateTransition方法吩蔑,這里我們將實現(xiàn)怎么去跳轉(zhuǎn)。

現(xiàn)在我們創(chuàng)建一個繼承NSObject的新類叫做DismissingAnimationController隧期,在這個類中我們遵守UIViewControllerAnimatedTransitioning協(xié)議.
相似,我們在DismissingAnimationController.m添加如下方法:

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
    return 0.5f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
    UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;
    toView.tintAdjustmentMode = UIViewTintAdjustmentModeNormal;
    toView.userInteractionEnabled = YES;
    
    UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
    
    
    POPBasicAnimation *closeAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY];
    closeAnimation.toValue = @(-fromView.layer.position.y);
    [closeAnimation setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
        [transitionContext completeTransition:YES];
    }];
    
    POPSpringAnimation *scaleDownAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleDownAnimation.springBounciness = 20;
    scaleDownAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    
    [fromView.layer pop_addAnimation:closeAnimation forKey:@"closeAnimation"];
    [fromView.layer pop_addAnimation:scaleDownAnimation forKey:@"scaleDown"];
 
}

來到CustomModalViewController.m中宏蛉,更新viewDidLoad方法并且實現(xiàn)didClickOnClose方法:

-(void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.layer.cornerRadius = 8.f;
}

- (IBAction)didClickOnClose:(id)sender {
    [self dismissViewControllerAnimated:YES completion:nil];
}

其它參考資料 :http://adad184.com/2015/03/11/intro-to-pop/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拾并,一起剝皮案震驚了整個濱河市嗅义,隨后出現(xiàn)的幾起案子隐砸,更是在濱河造成了極大的恐慌,老刑警劉巖褪那,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件博敬,死亡現(xiàn)場離奇詭異,居然都是意外死亡冶忱,警方通過查閱死者的電腦和手機(jī)境析,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進(jìn)店門劳淆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人括勺,你說我怎么就攤上這事曲掰。” “怎么了乱豆?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵吊趾,是天一觀的道長瑟啃。 經(jīng)常有香客問我蛹屿,道長岩榆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任湿颅,我火速辦了婚禮粥诫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘谊囚。我一直安慰自己执赡,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布奠伪。 她就那樣靜靜地躺著首懈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪滤否。 梳的紋絲不亂的頭發(fā)上最仑,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天泥彤,我揣著相機(jī)與錄音,去河邊找鬼吟吝。 笑死,一個胖子當(dāng)著我的面吹牛滞伟,可吹牛的內(nèi)容都是我干的梆奈。 我是一名探鬼主播称开,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼清酥!你這毒婦竟也來了蕴侣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤辱志,失蹤者是張志新(化名)和其女友劉穎揩懒,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體已球,經(jīng)...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡智亮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年点待,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片馍忽。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡遭笋,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出瓦呼,到底是詐尸還是另有隱情测暗,我是刑警寧澤磨澡,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布稳摄,位于F島的核電站饲宿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏瘫想。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一减噪、第九天 我趴在偏房一處隱蔽的房頂上張望旋廷。 院中可真熱鬧,春花似錦饶碘、人聲如沸馒吴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽扯罐。三九已至,卻和暖如春歹河,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背厨姚。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工键菱, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人拭抬。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像傅蹂,于是被迫代替她去往敵國和親累奈。 傳聞我的和親對象是個殘疾皇子急但,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,440評論 2 359

推薦閱讀更多精彩內(nèi)容