Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Support pause/resume for the animated element #111

@jongmoon

Description

@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, ...)

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions