Facebook喜欢登录屏幕和验证（Window Shake Effect）

Question

我需要登录界面如下所示。

在Facebooks登录时，如果您将用户名或密码字段留空并单击登录按钮，user name和password字段会振动（如同摇动）。

这是怎么做到的？

Answer 1

您可以使用CABasicAnimation来实现此目的。看一下这个UIView shake animation。

CABasicAnimation *animation = 
                         [CABasicAnimation animationWithKeyPath:@"position"];
[animation setDuration:0.05];
[animation setRepeatCount:8];
[animation setAutoreverses:YES];
[animation setFromValue:[NSValue valueWithCGPoint:
               CGPointMake([lockView center].x - 20.0f, [lockView center].y)]];
[animation setToValue:[NSValue valueWithCGPoint:
               CGPointMake([lockView center].x + 20.0f, [lockView center].y)]];
[[lockView layer] addAnimation:animation forKey:@"position"];

对于cocoa应用程序，请查看Core Animation Tutorial: Window Shake Effect。

- (CAKeyframeAnimation *)shakeAnimation:(NSRect)frame
{
int numberOfShakes = 4;
float durationOfShake = 0.2f;
float vigourOfShake = 0.04f;
    CAKeyframeAnimation *shakeAnimation = [CAKeyframeAnimation animation];

    CGMutablePathRef shakePath = CGPathCreateMutable();
    CGPathMoveToPoint(shakePath, NULL, NSMinX(frame), NSMinY(frame));
    int index;
    for (index = 0; index < numberOfShakes; ++index)
    {
        CGPathAddLineToPoint(shakePath, NULL, NSMinX(frame) - frame.size.width * vigourOfShake, NSMinY(frame));
        CGPathAddLineToPoint(shakePath, NULL, NSMinX(frame) + frame.size.width * vigourOfShake, NSMinY(frame));
    }
    CGPathCloseSubpath(shakePath);
    shakeAnimation.path = shakePath;
    shakeAnimation.duration = durationOfShake;
    return shakeAnimation;
}

    [window setAnimations:[NSDictionary dictionaryWithObject:[self shakeAnimation:[window frame]] forKey:@"frameOrigin"]];
    [[window animator] setFrameOrigin:[window frame].origin];