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

可可申請看看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];