Cocoa in the Shell

[iOS] Springboard shake effect

In this short post, I’ll show you how to create an animation similar to the springboard shake effect, the one you see when you want to move or delete an application.

This little shake effect is funny, and easy enough to reproduce using Core Animation. When we take a look at this animation, we can see that it’s nothing more than a tiny repeated rotation of the icons.
To illustrate this I’ll be using the simple image gallery code from one of my previous post.

First, add something to trigger the animation in the actual code, this part is up to you, a simple button will do the job.

Now here is the code

    CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    [anim setToValue:[NSNumber numberWithFloat:0.0f]];
    [anim setFromValue:[NSNumber numberWithDouble:M_PI/64]];
    [anim setDuration:0.1];
    [anim setRepeatCount:NSUIntegerMax];
    [anim setAutoreverses:YES];
    for (UIView* v in self.view.subviews)
        if ([v isKindOfClass:[MGPictureView class]])
            [v.layer addAnimation:anim forKey:@"SpringboardShake"];

That’s all, let’s take a quick look at this method :

  • First we create a basic animation with the transform.rotation key.

  • Then we set the from and to values, for rotation we use radians and not degrees, so I chose an arbitrary value of M_PI/64 which seemed good enough for the effect.

  • Next we set the duration of the animation, and the number of times we want to repeat it, and set the autoreverse flag to YES.

  • Finally we add the animation to our ImageViews, and we are done.

As a result, we have our pretty similar effect than the Springboard one.