Wie erzeugt man den wackelnden Icon-Effekt für das iPhone?

Question

Ich möchte ein Bild in meiner Anwendung hin und her wackeln lassen, ähnlich wie die iPhone-Symbole wackeln, wenn man sie nach unten drückt. Wie kann ich das am besten machen?

Dies ist mein erster Ausflug in die Welt der Animationen, bei dem ich keine animierten GIFs verwende. Ich glaube, die Idee ist, das Bild leicht hin und her zu drehen, um den Wackeleffekt zu erzeugen. Ich habe die Verwendung von CABasicAnimation und CAKeyframeAnimation in Betracht gezogen. CABasicAnimation erzeugt bei jeder Wiederholung einen Jitter, weil es zur Ausgangsposition springt und nicht zurück interpoliert. CAKeyframeAnimation scheint wie die Lösung, außer dass ich es nicht zum Laufen bringen kann. Ich muss etwas übersehen. Hier ist mein Code mit der CAKeyframeAnimation (die nicht funktioniert):

    NSString *keypath = @"wobbleImage";
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:keypath];
animation.duration = 1.0f;
animation.delegate = self;
animation.repeatCount = 5;

CGFloat wobbleAngle = 0.0872664626f;
NSValue *initial = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(0.0f, 0.0f, 0.0f, 1.0f)];
NSValue *middle = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(wobbleAngle, 0.0f, 0.0f, 1.0f)];
NSValue *final = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(-wobbleAngle, 0.0f, 0.0f, 1.0f)];
animation.values = [NSArray arrayWithObjects:initial, middle, final, nil];

[imageView.layer addAnimation:animation forKey:keypath];

Vielleicht gibt es aber auch eine ganz einfache Lösung, die ich gerade übersehe. Ich bin für jeden Hinweis dankbar. Danke!

Answer 1

Am einfachsten geht das mit Swift 4+:

static func wobbleAnimation(button: UIButton) {
    CATransaction.begin()
    let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
    rotateAnimation.autoreverses = true
    rotateAnimation.repeatCount = Float.greatestFiniteMagnitude
    rotateAnimation.fromValue = CGFloat(-0.2)
    rotateAnimation.toValue = CGFloat(0.2)
    rotateAnimation.duration = 0.20
    button.layer.add(rotateAnimation, forKey: nil)
    CATransaction.commit()
}

static func stopWobbleAnimation(button: UIButton) {
    button.layer.removeAllAnimations()
}

Answer 2

Nun, der Code, der durch Ramin Aber wenn Sie die Tabbar-Anwendung verwenden und zum nächsten Tab-Element wechseln und dann wieder zum vorherigen Tab-Element zurückkehren, werden Sie sehen, dass Ihre Ansicht nach links verschoben wurde, jedes Mal.So ist die beste Praxis, dass Sie ViewWillAppear-Methode als verwenden.

- (void)viewWillAppear:(BOOL)animated
{
    UIView* item = self.view;
    item.transform = CGAffineTransformIdentity;
}

so dass Sie jedes Mal, wenn die Ansicht geladen wird, Ihre Animation an der richtigen Stelle wiederfinden, und verwenden Sie auch diese Methode.

[UIView setAnimationDidStopSelector:@selector(myMethod:finished:context:)];

Answer 3

Mauersegler 3

func startWiggling() {
    deleteButton.isHidden = false
    guard contentView.layer.animation(forKey: "wiggle") == nil else { return }
    guard contentView.layer.animation(forKey: "bounce") == nil else { return }

    let angle = 0.04

    let wiggle = CAKeyframeAnimation(keyPath: "transform.rotation.z")
    wiggle.values = [-angle, angle]
    wiggle.autoreverses = true
    wiggle.duration = randomInterval(0.1, variance: 0.025)
    wiggle.repeatCount = Float.infinity
    contentView.layer.add(wiggle, forKey: "wiggle")

    let bounce = CAKeyframeAnimation(keyPath: "transform.translation.y")
    bounce.values = [4.0, 0.0]
    bounce.autoreverses = true
    bounce.duration = randomInterval(0.12, variance: 0.025)
    bounce.repeatCount = Float.infinity
    contentView.layer.add(bounce, forKey: "bounce")
}

func stopWiggling() {
    deleteButton.isHidden = true
    contentView.layer.removeAllAnimations()
}