【iOS开发每日小笔记（十二）】仿Facebook登录界面 错误提示抖动 利用CAAnimation设置动画效果

这篇文章是我的【iOS开发每日小笔记】系列中的一片，记录的是今天在开发工作中遇到的，可以用很短的文章或很小的demo演示解释出来的小心得小技巧。它们可能会给用户体验、代码效率得到一些提升，或是之前自己没有接触过的技术，很开心的学到了，放在这里得瑟一下。90%的作用是帮助自己回顾、记忆、复习。

 

原本以为国庆假期可以有时间看看书，写写博客。实际上大部分时间都被赶场参加婚礼和到处去亲戚家串门吃饭所占用。眼看明天还剩最后一天时间，今天赶紧来更新一篇，也算是没有完全荒废这7天长假吧！

Facebook的客户端的登录输入框，有一种很漂亮的效果，就是当用户输入的用户名和口令信息有误时，整个输入界面会左右晃动一下，提示用户“登入错误”，十分有意思。其实，这种效果实现起来也是很简单的。下面分享两种思路。

首先来看一下效果，当点击下方按钮时，灰色的UIView会左右晃动。

（gif图片效果不是太好，真机跑出来要更好一些。）

两种思路均是用CAAnimation实现，只不过一种使用绘制路径的方法为CAAnimation设置路径，另一种是利用“关键帧”设置value来实现。

1.1，路径法：

//
//  ViewController.m
//  ShakeInputViewDemo
//
//  Created by pigpigdaddy on 14-10-6.
//  Copyright (c) 2014年 pigpigdaddy. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong)UIView *shakeView;
@property (nonatomic, strong)UIButton *button;

@end

@implementation ViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.button = [UIButton buttonWithType:UIButtonTypeSystem];
    [self.button setTitle:@"左右抖动" forState:UIControlStateNormal];
    self.button.frame = CGRectMake(100, 300, 100, 40);
    [self.button addTarget:self action:@selector(shakeAction) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:self.button];
    
    self.shakeView = [[UIView alloc] initWithFrame:CGRectMake(50, 80, 220, 180)];
    self.shakeView.backgroundColor = [UIColor grayColor];
    [self.view addSubview:self.shakeView];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

- (void)shakeAction
{
    // 晃动次数
    static int numberOfShakes = 4;
    // 晃动幅度（相对于总宽度）
    static float vigourOfShake = 0.04f;
    // 晃动延续时常（秒）
    static float durationOfShake = 0.5f;
    
    CAKeyframeAnimation *shakeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    // 方法一：绘制路径
    CGRect frame = self.shakeView.frame;
    // 创建路径
    CGMutablePathRef shakePath = CGPathCreateMutable();
    // 起始点
    CGPathMoveToPoint(shakePath, NULL, CGRectGetMidX(frame), CGRectGetMidY(frame));
    for (int index = 0; index < numberOfShakes; index++)
    {
        // 添加晃动路径 幅度由大变小
        CGPathAddLineToPoint(shakePath, NULL, CGRectGetMidX(frame) - frame.size.width * vigourOfShake*(1-(float)index/numberOfShakes),CGRectGetMidY(frame));
        CGPathAddLineToPoint(shakePath, NULL,  CGRectGetMidX(frame) + frame.size.width * vigourOfShake*(1-(float)index/numberOfShakes),CGRectGetMidY(frame));
    }
    // 闭合
    CGPathCloseSubpath(shakePath);
    shakeAnimation.path = shakePath;
    shakeAnimation.duration = durationOfShake;
    // 释放
    CFRelease(shakePath);

    [self.shakeView.layer addAnimation:shakeAnimation forKey:kCATransition];
}

1.2，设置“关键帧”，让CAAnimation自动“补齐”帧与帧之间的动画，只需改变如下函数：

- (void)shakeAction
{
    // 晃动次数
    static int numberOfShakes = 4;
    // 晃动幅度（相对于总宽度）
    static float vigourOfShake = 0.04f;
    // 晃动延续时常（秒）
    static float durationOfShake = 0.5f;
    
    CAKeyframeAnimation *shakeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    // 方法二：关键帧（点）
    CGPoint layerPosition = self.shakeView.layer.position;
    
    // 起始点
    NSValue *value1=[NSValue valueWithCGPoint:self.shakeView.layer.position];
    // 关键点数组
    NSMutableArray *values = [[NSMutableArray alloc] initWithObjects:value1, nil];
    for (int i = 0; i<numberOfShakes; i++) {
        // 左右晃动的点
        NSValue *valueLeft = [NSValue valueWithCGPoint:CGPointMake(layerPosition.x-self.shakeView.frame.size.width*vigourOfShake*(1-(float)i/numberOfShakes), layerPosition.y)];
        NSValue *valueRight = [NSValue valueWithCGPoint:CGPointMake(layerPosition.x+self.shakeView.frame.size.width*vigourOfShake*(1-(float)i/numberOfShakes), layerPosition.y)];
        
        [values addObject:valueLeft];
        [values addObject:valueRight];
    }
    // 最后回归到起始点
    [values addObject:value1];
    
    shakeAnimation.values = values;
    shakeAnimation.duration = durationOfShake;


    [self.shakeView.layer addAnimation:shakeAnimation forKey:kCATransition];
}

 

两种方法的效果是一样的。

demo下载地址：https://github.com/pigpigdaddy/ShakeInputViewDemo