CODEWITHSUNDEEP
iphoneobjective-cioscore-animation
Pooja
Pooja

Reputation: 2200

How do you make images wobble like on the iPhone home screen?

I have many icons in my app and I would like to animate them in a manner similar to what happens when you try to delete applications from the iPhone's home screen. How can you do this?

Additionally, is there a way to have the icons animate up onto the screen in a manner similar to what happens when you unlock the iPhone?

Upvotes: 10

Views: 9270

Answers (5)

Igor Ryazancev
Igor Ryazancev

Reputation: 11

in SwiftUI you can adapt this code to your project

import SwiftUI

struct WobbleView: View {
    @State private var wobbleAngle: Double = 0.0
    @State private var isWobbling: Bool = false

    var body: some View {
        Text("Wobble Me!") // Replace with your desired view
            .rotationEffect(.degrees(wobbleAngle))
            .onAppear {
                startWobble()
            }
            .onDisappear {
                stopWobble()
            }
    }

    private func startWobble() {
        isWobbling = true
        withAnimation(
            Animation.linear(duration: 0.2)
                .repeatForever(autoreverses: true)
        ) {
            wobbleAngle = 3 // Adjust for wobble intensity
        }
    }

    private func stopWobble() {
        isWobbling = false
        wobbleAngle = 0 // Reset the rotation
    } 
}

Upvotes: 0

Joshua Hart
Joshua Hart

Reputation: 852

Answers seem a little outdated, so here's updated logic within an easy to use UIView extension.

Default value for duration parameter being that the animation happens for infinity.

Swift 5 -2022

extension UIView {
    func wobble(duration: CFTimeInterval = .infinity) {
        let animation = CAKeyframeAnimation(keyPath: "transform.rotation.z")
        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
        animation.duration = 0.2
        animation.values = [0.015, 0.03, 0.015, 0, -0.015, -0.03, -0.015, 0]
        animation.repeatDuration = duration
        layer.add(animation, forKey: "wobble")
    }

    func layerremoveAllAnimations() {
        layer.removeAllAnimations()
    }
}

Upvotes: 1

FreaknBigPanda
FreaknBigPanda

Reputation: 1127

with blocks (iOS 4+) it would look like:

#define RADIANS(degrees) ((degrees * M_PI) / 180.0)

    CGAffineTransform leftWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-2.0));
    CGAffineTransform rightWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(2.0));

    cell.transform = leftWobble;  // starting point
    cell.deleteButton.hidden = NO;

    [UIView animateWithDuration:0.125 delay:0 options:(UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse) animations:^{
        cell.transform = rightWobble;
    }completion:^(BOOL finished){
    }];

Upvotes: 10

TigerCoding
TigerCoding

Reputation: 8720

If you want to make your views, images, etc. wobble, like the home screen, you could do something like this:

    CGAffineTransform leftWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-15.0));
    CGAffineTransform rightWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(15.0));

    view.transform = leftWobble;  // starting point

    [UIView beginAnimations:@"wobble" context:view];
    [UIView setAnimationRepeatAutoreverses:YES];
    [UIView setAnimationRepeatCount:5]; // adjustable
    [UIView setAnimationDuration:0.125];
    [UIView setAnimationDelegate:self];
    view.transform = rightWobble; // end here & auto-reverse
    [UIView commitAnimations];

You would also need to add this define:

#define RADIANS(degrees) ((degrees * M_PI) / 180.0)

Upvotes: 26

MHC
MHC

Reputation: 6405

If you mean icons in the main screen of iOS, I don't think it would be ever possible.

Of course, if you mean icons inside your application, you can do whatever you want.

Upvotes: 1

Related Questions