利用CAKeyFrameAnimation实现仿MAC登录界面密码不正确晃动效果

2016.12.29 更新：

iOS7 推出了UIView的关键帧动画API，代码就不用像下面写的那么麻烦了。

产品有时候会提一些不切实际的需求，比如下面这个：非要在iOS设备上实现登录输入密码不正确时密码框晃动3次的需求。纵观我见过的应用，还没有见过输入框带这种效果的。不过既然要实现，就要想办法争取做出来。

实际效果见下面视频：

最初我的想法是用UIView的animation代码块来实现，效果也可以，代码如下：

CGPoint originCenter = textField.center;
[UIView animateWithDuration:SHAKE_ONCE_DURATION / 2 animations:^{
    textField.center = CGPointMake(originCenter.x - INPUT_PASSWORD_SHAKE_OFFSET, originCenter.y);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:SHAKE_ONCE_DURATION delay:0 options:UIViewAnimationOptionAutoreverse|UIViewAnimationOptionRepeat animations:^{
        [UIView setAnimationRepeatCount:2.5];
        textField.center = CGPointMake(originCenter.x + INPUT_PASSWORD_SHAKE_OFFSET, originCenter.y);
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:SHAKE_ONCE_DURATION / 2 animations:^{
                textField.center = CGPointMake(originCenter.x, originCenter.y);
            } completion:^(BOOL finished) {
        }];
    }];
}];

主要思想是运用语句块的completion实现动画嵌套。但是这段代码别人不容易读懂，后期维护起来有点困难。

最近正在学习关键帧动画技术（CAKeyframeAnimation）,于是我尝试用关键帧动画实现这个需求，上代码。

//创建关键帧动画
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//设置各个关键帧位置
keyFrame.values = @[[NSValue valueWithCGPoint:CGPointMake(524, 329)],
                    [NSValue valueWithCGPoint:CGPointMake(519, 329)],
                    [NSValue valueWithCGPoint:CGPointMake(529, 329)],
                    [NSValue valueWithCGPoint:CGPointMake(519, 329)],
                    [NSValue valueWithCGPoint:CGPointMake(529, 329)],
                    [NSValue valueWithCGPoint:CGPointMake(519, 329)],
                    [NSValue valueWithCGPoint:CGPointMake(529, 329)],
                    [NSValue valueWithCGPoint:CGPointMake(524, 329)]];
//淡入淡出效果
keyFrame.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//动画持续时间
keyFrame.duration = 0.5;
//恢复到最初位置
self.passwordTextField.layer.position = CGPointMake(524, 329);
//密码输入框图层加入动画
[self.passwordTextField.layer addAnimation:keyFrame forKey:@"keyFrame"];

关键帧顾名思义，就是设置view的各个关键帧，然后就会按照设置好的坐标进行动画。需要注意的是关键帧动画是隐式动画，即动画执行完不保留最终位置。还有就是需要导入QuartzCore头文件。