本文翻译自:Creating Simple Animations with Facebook’s Pop Framework
Part1在这里
- Example #3:错误密码动画
作为Mac用户,你肯定熟悉OS X系统里的密码框.当你密码输入错误时,输入框会晃动.现在我们将用Pop实现这种动画效果.
第一步,添加一个新的view controller.在上面增加一个text field和一个登录按钮.然后在Example List View Controller和新页面之间添加segue.设置此segue的identifier为"openWrongPass".完成后你的interface页面会如下图一般:
pop-wrong-password-ui-hd.jpg
接下来创建一个名为WrongPasswordViewController的类文件并将它设置为新建的View Controller的类.创建text field的变量并命名为passwordTextField.
@interface WrongPasswordViewController ()
@property (weak, nonatomic) IBOutlet UITextField *passwordTextField;
@end
然后创建一个名为login的登录按钮.
如前文所述,我们将在text field上增加一个晃动动画来标示错误密码.示例中并不验证密码而仅仅是在点击登录按钮时展示晃动动画.
实现登录方法如下:
- (IBAction)login:(id)sender {
POPSpringAnimation *shake = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
shake.springBounciness = 20;
shake.velocity = @(3000);
[self.passwordTextField.layer pop_addAnimation:shake forKey:@"shakePassword"];
}
上面的代码相当简洁.我们创建了一个属性为kPOPLayerPositionX属性的POPSpringAnimation.这个属性表示text field以X轴为方向.
最后记得在WrongPasswordViewController.m开头导入POP.h:
#import <pop/POP.h>
Cool!完成了!运行程序来测试下.
pop-animation-3-2.gif
- Example #4:自定义ViewController转场
最后一个例子,我将展示view controller的转场动画.我们在一个view controller上面添加一个"Present"按钮.当用户点击时,应用将通过一个自定义动画来呈现另一个view Controller.iOS7以后,我们能够利用UIViewController中的transitioningDelegate来自定义转场动画.这个代理方法,需要继承于UIViewControllerAnimatedTransitioning.提供了view controllers之间的转场动画.
首先在storyboard上创建两个view Controller和两个类.命名为"CustomVCTransitionViewController"和"CustomModalViewController".将他们对应于相应的view Controllers.Model view controller(红色的)的storyboard ID 设置为"customModal".将Example List View Controller和CustomVCTransitionViewController通过segue连接.并将此segue的identifier设置为"openCustomTransition".
UI如下图所示:
custom-view-controller-ui-hd.jpg
你可以快速测试下app.当你点击Custom VC Transition时CustomVCTransitionController将会出现.
现在我们将编写CustomVCTransitionViewController来处理Present按钮.在CustomVCTransitionViewController.h里面添加如下代码来使其遵从UIViewControllerTransitioningDelegate协议:
@interface CustomVCTransitionViewController : UIViewController <UIViewControllerTransitioningDelegate>
在CustomVCTransitionViewController.m里面增加下面头文件:
#import "CustomModalViewController.h"
#import "PresentingAnimationController.h"
#import "DismissingAnimationController.h"
#import <pop/POP.h>
添加如下代码来实现Present按钮动作和实现协议的方法:
- (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];
}
当按钮点击时,会调用didClickOnPresent方法.这里我们举例modal view controller,设置transitioning代理为当前view controller.还要设置modal presentation style为custom.(记得在storyboard连接Present button和这个方法)
类已经遵从了UIViewControllerTransitioningDelegate协议,因此实现了其两个必须的方法.animationControllerForPresentedController:方法返回的是用于展现modal view controller的转场动画.相反的,animationControllerForDismissedController方法提供的是页面消失的动画.
我们还没有创建这两个动画类.现在我们新建一个名为PresentingAnimationController的遵从UIViewControllerAniamtionTransitioning协议的NSObject的子类:
#import <UIKit/UIKit.h>
#import "POP.h"
@interface PresentingAnimationController : NSObject <UIViewControllerAnimatedTransitioning>
在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"];
}
第一个方法定义了转场时间(例如0.5秒).对于转场动画,我们实现了animateTransition:方法.在里面我定义了转场动画如何展现.首先在转场里通过viewControllerForKey:方法取到"fromView".继而取得"toView".一旦你取得这两个views,就能在之间添加各种动画.这里我们实现两种动画:position动画和scale动画.位置动画将使view从屏幕顶部下落到中央.放大缩小动画将view先方法然后回到正常大小.
下面,创建一个名为DismissingAnimationController遵从UIViewControllerAnimatedTransitioning协议的类:
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <pop/POP.h>
@interface DismissingAnimationController : NSObject <UIViewControllerAnimatedTransitioning>
@end
相似的,通过实现UIViewControllerAnimatedTransitioning协议的必须方法来实现消失动画:
- (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"];
}
当modal view 消失时,我们实现了两个动画:关闭动画和缩小动画.通过这两个动画的结合我们实现了modal view的消失和移出屏幕.
在CustomModalViewController.m里的viewDidLoad方法里实现didClickOnClose方法:
- (void)viewDidLoad {
[super viewDidLoad];
// Round corner
self.view.layer.cornerRadius = 8.f;
}
- (IBAction)didClickOnClose:(id)sender {
[self dismissViewControllerAnimated:YES completion:nil];
}
最后连接Close按钮和didClickOnClose方法.
Cool!该测试app了.运行并测试下view的转场.
pop-animation-4.gif
- 小结
在这篇教程里,我介绍了Facebook的Pop framework.正如你所看到的,这个动画引擎相当好用.如果你理解了这篇教程里的动画技术,将它们用到你的应用中吧.
你可以在the project on Github下载整个项目.
Girl学iOS100天 第11天
