Facebook like login screen and validation(Window Shake Effect)

Question

I need my login screen look like the following.

In Facebooks login, if you leave the username or password fields blank and click the Log in button, the user name and password fields vibrates (as in shakes).

How is this done ?

Answer 1

You can achieve this using CABasicAnimation. Take a look at this 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"];

for cocoa application take a look at 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];