diff options
author | Saivan <savian@me.com> | 2018-05-15 15:03:28 +1000 |
---|---|---|
committer | Saivan <savian@me.com> | 2018-05-15 15:03:28 +1000 |
commit | 685d53295dd005c6f513b6123d8cd3fb3e671c8a (patch) | |
tree | dd764c50642f0a10d054bee862aa7698c8a10dcc /useCases.md | |
parent | 8b80921347cc1c183d00f442877453aad22ff672 (diff) | |
download | svg.js-685d53295dd005c6f513b6123d8cd3fb3e671c8a.tar.gz svg.js-685d53295dd005c6f513b6123d8cd3fb3e671c8a.zip |
The timeline is now decoupled from the real time
This commit allows the timeline to exist independently of the actual
time. This will allow it to be used to seek through an animation
with relative ease. We also made some architectural changes to the
timeline to support this.
Changes
=======
- Refactored the runner into its own file without exposing it to the
user (changed the gulpfile)
- The timeline no longer depends on the current time
- The user can supply absolute times to queue events
- Some more methods have been integrated into the timeline
Diffstat (limited to 'useCases.md')
-rw-r--r-- | useCases.md | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/useCases.md b/useCases.md new file mode 100644 index 0000000..eb21068 --- /dev/null +++ b/useCases.md @@ -0,0 +1,44 @@ + + +# Tagged Animations + +The user can tag and control the runner for any animation + +```js + +var animation = element + .loop(300, true) + .tag('first') + .rotate(360) + .translate(50) + .animate(300, 200) + .tag('second') + .scale(3) + +animation.finish('first') +animation.pause('first') +animation.stop('first') +animation.play('first') + +``` + + +# Absolute Timeline Times + +The user can specify their time which is relative to the timelines time. + + +```js + +var animation = element + .animate(2000).move(200, 200) + +// after 1000 ms +animation.animate(1000, 0, 500).scale(2) + +``` + +This block of code would: +- Spend the first 1000ms moving the element +- At this time, it will snap the scale to 1.5 (halfway to 2) +- After this time, the scale and the move should go together |