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

产品有时候会提一些不切实际的需求,比如下面这个:非要在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 = [CAKeyframeAnimationanimationWithKeyPath:@"position"];

    //设置各个关键帧位置

    keyFrame.values = @[[NSValuevalueWithCGPoint:CGPointMake(524, 329)],

                        [NSValuevalueWithCGPoint:CGPointMake(519, 329)],

                        [NSValuevalueWithCGPoint:CGPointMake(529, 329)],

                        [NSValuevalueWithCGPoint:CGPointMake(519, 329)],

                        [NSValuevalueWithCGPoint:CGPointMake(529, 329)],

                        [NSValuevalueWithCGPoint:CGPointMake(519, 329)],

                        [NSValuevalueWithCGPoint:CGPointMake(529, 329)],

                        [NSValuevalueWithCGPoint:CGPointMake(524, 329)]];

    //淡入淡出效果

    keyFrame.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    //动画持续时间

    keyFrame.duration = 0.5;

    //恢复到最初位置

    self.passwordTextField.layer.position = CGPointMake(524, 329);

    //密码输入框图层加入动画

    [self.passwordTextField.layeraddAnimation:keyFrame forKey:@"keyFrame"];

 

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

转自:http://blog.163.com/nijino_saki/blog/static/8009214420132155585685/

posted @ 2014-03-30 18:55  codeartistry  阅读(234)  评论(0编辑  收藏  举报