Ich versuche, ein UIView zum Schütteln zu bringen, wenn eine Taste gedrückt wird.
Ich passe den Code an, den ich auf http://www.cimgf.com/2008/02/27/core-animation-tutorial-window-shake-effect/ gefunden habe .
Wenn Sie jedoch versuchen, den folgenden Code anzupassen, um eine UIView zu erschüttern, funktioniert dies nicht:
- (void)animate {
const int numberOfShakes = 8;
const float durationOfShake = 0.5f;
const float vigourOfShake = 0.1f;
CAKeyframeAnimation *shakeAnimation = [CAKeyframeAnimation animation];
CGRect frame = lockView.frame;
CGMutablePathRef shakePath = CGPathCreateMutable();
CGPathMoveToPoint(shakePath, NULL, CGRectGetMinX(frame), CGRectGetMinY(frame));
for (int index = 0; index < numberOfShakes; ++index) {
CGPathAddLineToPoint(shakePath, NULL, CGRectGetMinX(frame) - frame.size.width * vigourOfShake, CGRectGetMinY(frame));
CGPathAddLineToPoint(shakePath, NULL, CGRectGetMinX(frame) + frame.size.width * vigourOfShake, CGRectGetMinY(frame));
}
CGPathCloseSubpath(shakePath);
shakeAnimation.path = shakePath;
shakeAnimation.duration = durationOfShake;
[lockView.layer addAnimation:shakeAnimation forKey:@"frameOrigin"];
}
ios
iphone
animation
cocoa-touch
core-animation
Jack Greenhill
quelle
quelle
Ich bevorzuge diese Lösung mit einem schönen federnden Verhalten, ideal für eine Shake-Animation mit falschem Passwort.
view.transform = CGAffineTransformMakeTranslation(20, 0); [UIView animateWithDuration:0.4 delay:0.0 usingSpringWithDamping:0.2 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ view.transform = CGAffineTransformIdentity; } completion:nil];
Swift 3
extension UIView { func shake() { self.transform = CGAffineTransform(translationX: 20, y: 0) UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 1, options: .curveEaseInOut, animations: { self.transform = CGAffineTransform.identity }, completion: nil) } }
quelle
Hier ist meine schöne und einfach aussehende Version. Dies simuliert den Shake, den Sie unter Mac OS X erhalten, wenn Sie sich falsch anmelden. Sie können dies als Kategorie in UIView hinzufügen, wenn Sie möchten.
@implementation UIView (DUExtensions) - (void) shake { CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.x"]; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; animation.duration = 0.6; animation.values = @[ @(-20), @(20), @(-20), @(20), @(-10), @(10), @(-5), @(5), @(0) ]; [self.layer addAnimation:animation forKey:@"shake"]; } @end
Die Animationswerte sind der x-Versatz von der aktuellen Position der Ansicht. Positive Werte verschieben die Ansicht nach rechts und negative Werte nach links. Wenn Sie sie sukzessive absenken, erhalten Sie einen Shake, der natürlich an Dynamik verliert. Sie können diese Zahlen ändern, wenn Sie möchten.
quelle
Hier ist die schnelle Version als Erweiterung für den Fall, dass jemand sie benötigt
extension UIImageView{ func vibrate(){ let animation = CABasicAnimation(keyPath: "position") animation.duration = 0.05 animation.repeatCount = 5 animation.autoreverses = true animation.fromValue = NSValue(CGPoint: CGPointMake(self.center.x - 2.0, self.center.y)) animation.toValue = NSValue(CGPoint: CGPointMake(self.center.x + 2.0, self.center.y)) self.layer.addAnimation(animation, forKey: "position") } }
Dadurch wird eine kleine UIImageView (ca. 15x15) animiert. Wenn Sie etwas Größeres animieren müssen, können Sie den Bewegungsfaktor 2.0 in etwas Größeres ändern.
quelle
Basierend auf der Antwort von @bandejapaisa, UIView-Erweiterung für Swift 3
extension UIView { func shake() { let animation = CAKeyframeAnimation(keyPath: "transform.translation.x") animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear) animation.duration = 0.6 animation.values = [-20, 20, -20, 20, -10, 10, -5, 5, 0] layer.addAnimation(animation, forKey: "shake") } }
quelle
Sie können diesen Code ausprobieren:
Verwenden Sie zum Aufrufen des folgenden Codes:
[self earthquake:myObject];
#pragma mark EarthQuake Methods - (void)earthquake:(UIView*)itemView { AudioServicesPlaySystemSound(kSystemSoundID_Vibrate); CGFloat t = 2.0; CGAffineTransform leftQuake = CGAffineTransformTranslate(CGAffineTransformIdentity, t, -t); CGAffineTransform rightQuake = CGAffineTransformTranslate(CGAffineTransformIdentity, -t, t); itemView.transform = leftQuake; // starting point [UIView beginAnimations:@"earthquake" context:itemView]; [UIView setAnimationRepeatAutoreverses:YES]; // important [UIView setAnimationRepeatCount:3]; [UIView setAnimationDuration:0.05]; [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector:@selector(earthquakeEnded:finished:context:)]; itemView.transform = rightQuake; // end here & auto-reverse [UIView commitAnimations]; } - (void)earthquakeEnded:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context { if ([finished boolValue]) { UIView* item = (UIView *)context; item.transform = CGAffineTransformIdentity; } }
quelle
Sie können diese Methode beim UIButton-Klickereignis aufrufen
-(void)shakescreen { //Shake screen CGFloat t = 5.0; CGAffineTransform translateRight = CGAffineTransformTranslate(CGAffineTransformIdentity, t, t); CGAffineTransform translateLeft = CGAffineTransformTranslate(CGAffineTransformIdentity, -t, -t); self.view.transform = translateLeft; [UIView animateWithDuration:0.05 delay:0.0 options:UIViewAnimationOptionAutoreverse|UIViewAnimationOptionRepeat animations:^ { [UIView setAnimationRepeatCount:2.0]; self.view.transform = translateRight; } completion:^(BOOL finished) { if (finished) { [UIView animateWithDuration:0.05 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^ { self.view.transform = CGAffineTransformIdentity; } completion:NULL]; } }]; }
Hoffe das hilft dir :-)
quelle
Die C # Xamarin.iOS-Version der Antwort zum Erstellen einer UIView-Shake-Animation unter iOS finden Sie weiter unten
CAKeyFrameAnimation keyframeAnimation = CAKeyFrameAnimation.GetFromKeyPath(new NSString("transform.translation.x")); keyframeAnimation.TimingFunction = CAMediaTimingFunction.FromName(CAMediaTimingFunction.EaseInEaseOut); keyframeAnimation.Duration = 0.6f; keyframeAnimation.Values = new NSObject[]{ new NSNumber(-20f), new NSNumber(20f), new NSNumber(-20f), new NSNumber(20f), new NSNumber(-10f), new NSNumber(10f), new NSNumber(-5f), new NSNumber(5f), new NSNumber(0f) }; shakyView.Layer.AddAnimation(keyframeAnimation, "shake");
quelle
Hier ist eine, die eine Dämpferfunktion verwendet, um das Schütteln zu verringern:
- (void)shake { CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; animation.duration = 0.5; animation.delegate = self; animation.fillMode = kCAFillModeForwards; animation.removedOnCompletion = YES; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; NSMutableArray* values = [[NSMutableArray alloc] init]; int steps = 100; double position = 0; float e = 2.71; for (int t = 0; t < steps; t++) { position = 10 * pow(e, -0.022 * t) * sin(0.12 * t); NSValue* value = [NSValue valueWithCGPoint:CGPointMake([self center].x - position, [self center].y)]; DDLogInfo(@"Value: %@", value); [values addObject:value]; } animation.values = values; [[self layer] addAnimation:animation forKey:@"position"]; }
quelle
Ich habe @ Matt Long Code überarbeitet und eine Kategorie erstellt
UIView
. Jetzt ist es viel wiederverwendbarer und einfacher zu bedienen.@implementation UIView (Animation) - (void)shakeViewWithOffest:(CGFloat)offset { CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.x"]; [animation setDuration:0.05]; [animation setRepeatCount:6]; [animation setAutoreverses:YES]; [animation setFromValue:@([self center].x-offset)]; [animation setToValue:@([self center].x+offset)]; [self.layer addAnimation:animation forKey:@"position.x"]; } - (void)shake { [self shakeViewWithOffest:7.0f]; } @end
quelle
Swift 3-Implementierung basierend auf der Antwort von @ Mihael-Isaev
private enum Axis: StringLiteralType { case x = "x" case y = "y" } extension UIView { private func shake(on axis: Axis) { let animation = CAKeyframeAnimation(keyPath: "transform.translation.\(axis.rawValue)") animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear) animation.duration = 0.6 animation.values = [-20, 20, -20, 20, -10, 10, -5, 5, 0] layer.add(animation, forKey: "shake") } func shakeOnXAxis() { self.shake(on: .x) } func shakeOnYAxis() { self.shake(on: .y) } }
quelle
extension UIView { func shake() { let animation = CAKeyframeAnimation(keyPath: "transform.translation.x") animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear) animation.duration = 0.6 animation.values = [-20, 20, -20, 20, -10, 10, -5, 5, 0] self.layer.add(animation, forKey: "shake") }}
quelle
Sie können den folgenden Code ausprobieren:
+ (void)vibrateView:(UIView*)view { CABasicAnimation *shiverAnimationR; shiverAnimationR = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; shiverAnimationR.toValue = [NSNumber numberWithFloat:DEGREES_TO_RADIANS(1)]; //shiverAnimationR.toValue = [NSNumber numberWithFloat:DEGREES_TO_RADIANS(-10)]; shiverAnimationR.duration = 0.1; shiverAnimationR.repeatCount = 1000000.0; // Use A high Value shiverAnimationR.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; [view.layer addAnimation: shiverAnimationR forKey:@"shiverAnimationR"]; CABasicAnimation * shiverAnimationL; shiverAnimationL = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; //shiverAnimationL 2.toValue = [NSNumber numberWithFloat:DEGREES_TO_RADIANS(10)]; shiverAnimationL.toValue = [NSNumber numberWithFloat:DEGREES_TO_RADIANS(-1)]; shiverAnimationL.duration = 0.1; shiverAnimationL.repeatCount = 1000000.0; shiverAnimationL.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; [view.layer addAnimation: shiverAnimationL forKey:@"shiverAnimationL"]; }
Über den Link.
quelle
Hier ist eine Version mit,
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
Eingeführt in iOS 7.
const CGFloat xDelta = 16.0f; [UIView animateKeyframesWithDuration:0.50f delay:0.0f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{ [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:(1.0/6.0) animations:^{ self.passwordTextField.transform = self.usernameTextField.transform = CGAffineTransformMakeTranslation(xDelta, 0.0); }]; [UIView addKeyframeWithRelativeStartTime:(1.0/6.0) relativeDuration:(1.0/6.0) animations:^{ self.passwordTextField.transform = self.usernameTextField.transform = CGAffineTransformMakeTranslation(-xDelta, 0.0); }]; [UIView addKeyframeWithRelativeStartTime:(1.0/3.0) relativeDuration:(1.0/3.0) animations:^{ self.passwordTextField.transform = self.usernameTextField.transform = CGAffineTransformMakeTranslation(xDelta/2.0, 0.0); }]; [UIView addKeyframeWithRelativeStartTime:(2.0/3.0) relativeDuration:(1.0/3.0) animations:^{ self.passwordTextField.transform = self.usernameTextField.transform = CGAffineTransformIdentity; }]; } completion:NULL];
quelle
Hier ist eine UIView-Erweiterung, die eine fantastische Shake-Animation bietet: https://gist.github.com/mourad-brahim/cf0bfe9bec5f33a6ea66
Ein Swift5-Update wird in den Kommentaren bereitgestellt.
quelle
Swift 4.0:
Basierend auf der Top-Antwort, aber einer Verfeinerung der Animation: Dies hat nicht die Sprünge am Anfang und Ende der Animation.
let midX = center.x let midY = center.y let rightAnim = CABasicAnimation(keyPath: #keyPath(CALayer.position)) rightAnim.duration = 0.07 rightAnim.autoreverses = true rightAnim.fromValue = CGPoint(x: midX, y: midY) rightAnim.toValue = CGPoint(x: midX + 9, y: midY) let leftAnim = CABasicAnimation(keyPath: #keyPath(CALayer.position)) leftAnim.duration = 0.07 leftAnim.autoreverses = true leftAnim.fromValue = CGPoint(x: midX, y: midY) leftAnim.toValue = CGPoint(x: midX - 9, y: midY) let group = CAAnimationGroup() group.duration = leftAnim.duration + rightAnim.duration group.animations = [rightAnim, leftAnim] group.repeatCount = 3 layer.add(group, forKey: #keyPath(CALayer.position))
quelle