Pop(Part1)

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

pop-animations.jpg
本文,我们将用Facebook POP framework在应用中来做一些好看实用的动画.就像其他AppCode的文章一样,我将用实例来使你明白且掌握Pop的用法.最终我们将用它来实现四个简单的动画.
Pop是可用于iOS和OS X的拓展动画引擎.除了提供基本的动画类型,诸如Linear,Ease-In,Ease-Out,Ease-In-Ease-Out外,它还提供弹簧、衰减和自定义动画.

• Spring - 创建力学特性动画反弹效果
• Decay - 创建力学特性移动物体平滑停止的效果
• Custom - 由于引擎的可扩展性,你可以自定义动画效果

Pop的基础动画类型为POPAnimation.你可以认为它是所有POP动画的抽象类或者底层类.Pop接口是NSObject的category.因此任何对象都可以使用Pop来添加动画.

pop-category.jpg
Pop的API对开发者相当友好,你可以很轻松地完成逼真的拥有物理特性的效果.例如,下面就是创建一个具有弹簧效果的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.我相信当你完成这个Demo的时候你会对Pop有一个更好的理解.

• Pop Framework的使用
  如果你使用CocoPods,在你项目中的Podfile文件中添加:

pod 'pop','~>1.0'

如果没有用Cocopods,你可以在这里下载,然后将pop文件夹拖进你的项目中.选择你的项目确保Build Setting下的"Other Linker Flags"选项下增加-lc++.

using-pop-framework-hd.jpg

还要把Header Search Path设置正确.例如,我通常将"pop"framework放在"Library"文件夹.你可以设置Header Search Path为"$(SRCROOT)/Library".当你使用时,只需在你的代码里添加:

#import <pop/POP.h>

完成后,创建一个如下的仅有三行的table view:

sample-pop-app.jpg

你也可以在这里下载初始项目.

• Example #1: UITableViewCell动画
  首先我们来创建一个table view cell动画.当用户点击时添加一个放大效果的动画.手放开时使用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用起来相当简单.首先选择动画的类型.上面的例子中,我们选择POPBasicAnimation作为选中时的动画,选择POPSpringAnimation作为手指离开时的动画.类型选择完后,就该设置动画的属性了.Label上的两个动画我们都设置了kPOPViewScaleXY属性.下一步,我们设置将对象放大为CGPointMake(1,1).根据不同的动画类型,你需要另外增加相应的设置,比如在spring动画中添加springBounciness属性来控制弹簧的效果.最后我们将动画添加到text label上且给它个名字(例如springAnimation)

Pop提供了创建动画时的各种属性,你可以通过查看POPAnimatableProperty.h来了解.

运行程序,点击cell后手指离开来查看动画效果.

pop-animation-1-1.gif

• Example #2:Like Button添加动画
  你使用过Facebook Messager app吗？我非常喜欢发送信息时Send/Like按钮的动画.下面我用Pop来创建一个类似的动画.
  首先在storyboard里创建一个新的view controller.添加一个评论用的text field.将Like button放在Send button的位置.默认Like button会显示.当用户填写评论时,我们将隐藏Like button,显示Send button,这个过程会添加动画效果.

facebook-send-ui-design-hd.jpg
最后将列表View controller和Facebook Like View controller通过Segue连接起来.设置segue的identifier为"openFB".等会我们会编写segue的相关代码.
创建完界面后,新建一个名为FacebookButtonAnimationViewController的自定义view controller类.
接下来,创建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里面导入POP.h实现UITextFieldDelegate方法:

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

在FacebookButtonAnimationViewController.m的viewDidLoad里面添加如下代码来设置text field的代理和隐藏Send按钮:

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

现在我们在实现方法里来处理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;
}

当用户输入或者删除输入内容时会调用shouldChangeCharactersInRange方法.如果text field为空,将显示Like按钮,如果不为空,则显示Send按钮.
下面我们将实现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按钮有同样的设置,但是用一个翻转动画来替换spring动画.创建一个POPSpringAnimation并设置属性值"from"和"to".Like按钮会从45度(M_PI/4)翻转到0度,bounciness值为20.
最后,添加下面的代码在ExamplesListViewController.m来处理segue跳转:

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

现在来测试下应用.点击Run按钮在text filed输入内容来测试动画效果.

pop-animation-2.gif

Girl学iOS100天 第10天