2 jquery animation parallel (or a effect)

This post is kinda drafty, but since the Google’s first page for this were outdated, here we go!

When trying running 2 animations (or multiple) side by side (in parallel) at a same element, via JQuery .animate() they run one after another; like they are supposed to do by default, but there is a argument to override;  queue. In a silly example:

  j('body').animate({ paddingTop: 100}, 500, function(){ alert('Took half a second!')}).animate({paddingLeft: 100}, {duration: 500, queue:false})

Here we are animating both in parallel, and the callback alert, run after half a second. (*be careful about callbacks on animations with queue:false, since they don’t seem to trigger )

In another example, fairly more complex (and real ), I am using JQueryUI for both  shake, and color effects.
The objective is to simulate a div that gets overheated and waves to chill, real fast.

var pointsE = j('#health_bar .stats')
pointsE.css( {color: 'rgb(255,0,0)' })
        .stop(true)
        .effect('bounce', {times: 5, distance:10, easing: 'easeOutElastic'}, 300 )
        .html('OUCH!')
        .animate({ color: 'rgb(255,255,255)' }, { duration: 500, queue: false})

Just be aware, that it doesn’t seen .effect(), supporting queue: false –it breaks. That’s why I put it in the .animate()
About the .stop(true), it is just to be sure that the queue is empty before starting the animation (in practice, it is a minor fix for consecutive .effect(‘shake’))

 

References:
jQuery .animate() API
jQueryUI Color
jQueryUi Shake Effect

The coordinate system – InMotion

Hello! This post is about how we’ll deal with coordinate system In Motion way. This goes while I build the editor.

I decided to go with the Cartesian System, centered in the middle for 2 main reasons:

We are used to it, what makes it simple! And, It is not bounded to any edge, what makes it adaptable for no matter how big the editor canvas gets.

Notice that is does differ from the HTML5 Canvas Tag orientation, where all the values are positive, as illustrated here.

An example of the translation

The translation is very easy to be done from the raw click to the InMotion system:

x: click.x – canvas.center_x,
y: canvas.center_y – click.y

Also, going the opposite conversion is just the inverse.

inMotion – a Tween engine for Javascript

Hello!

I’m glad to announce the begin of my development of In Motion, my implementation of (movement ) Tween over the CANVAS tag of HTML5

In Motion - Very Early Preview

The features included are expect to be by 1.0:

• A few shapes of Bones
• Each bone is defined by 2 dots and an ID
• The animation of each bone is done by moving each dot of the bone
• A few animations included (mostly the same as this guy)
• An editor for the animation functions
• Each bone can have specific animation and duration for each keyframe
• They will be able to appear and hide

The implementation targets:

• Performance
• Flexible
• Easy to Use

What is to be expected? A 2D bone-jointless system for animation focusing games. Editor included

When should be the first release? I still don’t have a schedule, but it is one of FlockonUS project, so it is a priority along with a few.

Why? I want to make games and sites using cool JavaScript, so far I found no libs that do what I’m looking for.

On the next posts there will be follow ups of some interesting stuff over the implementation

This is the first post of the category inmotion.