07 ноября 2017

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.

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

1 коммент.:

  1. ᐈ Casino Review in 2021 | Games, RTP, Games - OKLAHOMA
    Casino is an international online 검증사이트 casino with a diverse selection of games, 게임종류 including roulette, 벳플릭스 blackjack, poker, video poker, and video poker. Rating: 토토 먹튀 사례 9.2/10 · ‎Review by 골인 벳 Gary Hart

    ОтветитьУдалить