Procedural animations - 6

Today we'll talk about UI...
Usually user interface has a lot of animations, transitions, effects and other stuff... this is necessary to put to user feeling of interactions.
Let's make some simple but awesome animations today! I'll try to show that all of them could be reused in different situations.

New look of tutors

I was thinking about explanation some animations and realized that it is easier to show tutors via gif-images. So I will try to make my tutors with "all in one gif" - style. I think it could be interesting. Let's try, ok? Write a comment about this...

Twitter

Do you know that I have a twitter-account? Anyway, you do now :)
Actually, I don't have much time to write full tutorial regularly. So, if you'd like to get tutors asap - just follow my twitter. But still, in my blog you will find a lot of interesting.

Simple animation

Really like this example. I use this widening circle really often. On buttons that should attract attention, on objects that report about some action. For example, earn money - and the element with money-indicator does this animation. Another example: indicator of unread mail:

Little bit about the code. Only two lines of code here:

alpha = Math.cos(time * speed);

scale = Math.sin(time * speed) * 0.5 + 1;

• Changing value of "speed" constant we can make our animation slow or fast.
• Sine and cosine function go in antiphase. It turns out that at the moment of greatest size the transparency is the smallest. And this is what we need.
• The last one trick. In this code, alpha takes on negative values. In the Flash (where I made this gif), it is so arranged that at negative alpha object is not drawn. If your engine is somehow different. Just put your hands on something like this:

if(alpha < 0)

   alpha = 0;

Successive appearance

Sometimes I need a "related" animation. Such the movement of several connected objects. For example, the appearance of objects one after another. Or spinning in a circle all together. In this case, I use one formula at all, but at the same time in the code I use a shift for objects. For example:

sprite[i].x = i;

In the example above, the coordinate of each sprite depends on the object's number in the list. It is very convenient. Now we will do the same, but we will change the transparency:

Great, right? Just one line of code, but we can do all sorts of things. Footprints in the sand, a sign for movement, various indicators and so on.

So, the code itself:

sprites[i].alpha = (1 + Math.cos(-i + time * 5)) / 2;

A little bit about tricks

• Since the cosine takes values from -1 to 1, we add 1, and we already get a range from 0 to 2. Divide it in half and, as a result, we see the result from 0 to 1, then assign the alpha. Yes, here such a construction (1 + cos ()) / 2 can be seen very often.
• "-i" is just a "phase shift", which gives slightly different values to each sprite in the list.
• Well, so that the animation comes to life, we include the time in our formula: time * 5. The five is the speed of movement. You can play with this value and see how the chain will run at different speeds.

Simple scale3 object

Changing simple parameters like position, object transparency, or rotation is usually not a big deal. It's another matter when you need to change the scale. With the square objects all is ok - it will always take the form of a rectangle. But with a rounded square everything is different.
Let's draw a rounded rect:

Let's change the scale:

Such artifacts always appear when we try to scale something more complicated than an ordinary square. Therefore, the third UI-effect today is just devoted to a similar problem of "beautiful scaling":

In terms this is called a "scale3-object". Cause it is divided into three objects, which, if properly positioned, allow the object to be scaled as much as we want in one direction (horizontal, for example).
In many engines, such objects are provided "from the box". Just transfer the picture and say "cut it into parts as needed." But, in my opinion, it is always better to understand how it works at the most basic level. Knowing that the object contains three separate images, you can implement exactly what you need in the current situation. So use the scale3-objects from your engine, but do not forget how it's arranged inside!

By the way, what I was making the motion of the bottom objects in the last gif-animated picture, I realized that I want a behavior like "smoothly moved, frozen ... smoothly moved back, frozen." I can't do it with sin / cos did functions. So I had to use the tanh function. And it's great! I think I will write about this function in a separate tutor...

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