Facebook喜欢登录屏幕和验证(Window Shake Effect)

Question

我需要我的登录屏幕如下所示.

在Facebooks登录时,如果将用户名或密码字段留空并单击"登录"按钮,则user name和password字段会振动(如同摇动).

这是怎么做到的？

Answer 1

你可以使用这个来实现CABasicAnimation.看一下这个UIView摇动动画.

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];