本文資料來自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++”;
使用Pop
首先導(dǎo)入頭文件
#import "POP.h"
例子一:UITableViewCell Animation
我們創(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
創(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
首先在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
這個例子將教你們怎么跳轉(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è)計如下:
現(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];
}