Support pause/resume for the animated element

[jongmoon]

It's migrated from Internal Issue List.

Why we do?

There's some components implemented a pause/resume. But They are not incomplete.

(I've found severals, but currently I can found below one. Need More Search)
For example, https://github.com/tobia/Pause

1. It doesn't support chaining

• below code can not be pause/resume by this component.

  $el.animate(prop1).animate(prop2);

2. It doesn't support relative positioning(or movement) like below

  $el.animate({"left": "+=100px"});

3. Absolutely, It doesn't support trasform that egjs can do

And other purpose?

We can dig up jQuery more.

Check Point

I think if we overcome below things, we can implement them.

1. Store animation queue(fx.queue) and Restore them.

2. Relative position calculation

• We must trace the position.
• General CSS property like "left", "right", ... looks like easy but relative position by transform is not a simple problem.

Relative Position Calculation

Suggestion

When paused, store below value.

Last Time Ratio (r) = time consumed (d) / total time (t)
Relative Position To Move (p) = Destination Value(v) - v * easing(r)

When resumed, restore above value and animate with them.

this.animate({"pos": "+=p"});//psuedo, MUST decompose each by type (like left, top, margin, ...)

[mixed]

Pass to next release