Procedural animations - 7

Let's continue our talks about procedural animations. Today we are going to make shaking stuff.
Wrong password? - shake the button with the password. More examples:

• Earthquake
• Camera shaking while explosions
• Alarm UI

Actually, a lot of situations have shaking animations! So, how we should make it by code? And we want just a little bit of code, of course. Let's start!

In a few words...

Don't have time to read the whole tutorial? Ok, just look at the gif-image. The main idea is in it:

A bell

Let's go deeper...
To ring a bell we just shake it. The result that we want to achieve:

The main movement is the cosine function. This one:

bell.rotation = Math.cos(time * Speed) * Amplitude;

in this formula

• Speed - the speed of the movement
• Amplitude - the amplitude of the bell movement

Let's take a look on the gif again. Notice, that the bottom part of the bell is moving with the delay. As it has a mass and an inertia!

Awesome! To make this just reduce the phase of the movement:

bell_part.rotation = Math.cos(time * Speed - 0.7) * Amplitude;

Speed and Amplitude are the same here.

That's it! Just two lines of code for both objects. Congrats!

Text button

And what about UI / interface? Because we need to shake buttons sometimes too.

• Wrong password? Just shake a button!
• Don't have money to purchase something? Let's blink the price.
• Phone icon is shaking during dialing / calling
• Morning... and the alarm will wake you up with a shaking animation.

First step. Draw the button. And the text. Make them as separate objects.

Use the cosine function. Again. But now we should change we position:

rect.x = Math.cos(time * 25) * 5;

text.x = Math.cos(time * 25 - 0.3) * 8

The result:

Text is delayed a little bit. Simulation of inertia and mass, remember? Ok, the numbers here are:

• Speed = 25
• Amplitude = 5 (and 8 for the text)

The dialing icon

Let's go deeper and make it a little more complicated. Add scale changing. Draw something like this:

Phone icon is moving with the cosine function:

phone.x = Math.cos(time * 50 - 0.3) * 3;

Great! Now we have this animation:

But... the icon is shaking constantly! And we want some periodic movement: shaking, relaxing and shaking again... Let's modulate an amplitude with additional extension:

Math.pow(Math.sin(time), 6)

This function has the form that is shown below:

Interfere two previous formula and get this:

phone.x = Math.cos(time * 50 - 0.3) * 3 * Math.pow(Math.sin(time), 6)

Now we have periodic and smooth animation:

For the epic style animation let's change the scale too:

phoneScale = 0.7 + Math.pow(Math.sin(time), 6) * 0.3;

circleScale = 0.7 + Math.pow(Math.sin(time - 0.4), 6) * 0.3;

Beeeeep:

Blender

One of the best shaking examples is the blender!
Draw several objects:

And then shake it separately:

part_1.rotation = Math.cos(time * 65) * 2;

juice.rotation = Math.cos(time * 65 - 0.8) * 2;

juice_2.rotation = Math.cos(time * 65 - 3.6) * 2;

The result:

That's it for today! Stay tuned.

Сообщения, схожие по тематике: