Commit Graph

11 Commits

Author SHA1 Message Date
thawk
dc3cf69747 Fix issue that data-x/y/z can't use relative-to-screen-size unit. (#815) 2022-07-21 21:49:39 +03:00
thawk
629f7686f3 Add relative move and rotate to rel plugin (#794)
The relative position in rel plugin is currently based on the world coordinate. So for the same effect, like fly in from the right-hand side, we must use different `data-rel-x/y/z` value. Why not let the plugin do the hard part?

So I introduce a `data-rel-position`, when set to `relative`, all relative attribute is based on the position and rotation of previous slide. So no matter the rotation of previous slide, data-rel-x="1000" always looks like fly in from the right-hand side. We can change the position and rotation of one slide, and the position of all following slides will be changed too.

When `data-rel-position` is set to `relative`, relative rotation has a clear meaning. It describes the relative rotations between slides. We don't need to set rotations for all slide, setting the key slides is enough. If `data-rel-position` is not relative, the effect of `data-rel-rotate-x/y/z` is not clear, so they're only used when `data-rel-position="relative"`.

After the introduction of relative rotation, there're 6 attribute that will inherit from previous slide. If we want to set a relative X move, we have to set all other 5 attributes to 0. It's boring. So a `data-rel-clear` is used to set all 6 attributes to 0, and then the value specified in current slide is applied. 

The `examples/3D-positions/index.html` shows some usage. As you can see, the html code of two slide ring is the same, and slides except for the first two in a ring has no position attributes. It work by inheriting the previous one.

This PR invokes a lot math calculations. Basically, the rotation of a slide is translated into the coordinate describing the directions of X/Y/Z axes. And `data-rel-x/y/z` can be easily calculated by that. The rotations is the hard part, I mainly use the algorithm in the Quaternions and spatial rotation - Wikipedia to compose two and more rotations.  I'm not a math guy, hope I don't make much mistakes.
2022-04-24 21:37:50 +03:00
thawk
d3760dfa0a make data-x/y/z supports relative-to-screen size (#804) 2022-02-13 12:35:52 +02:00
thawk
20f74a8b56 Fix relative-to-screen-size calculation (h and w) (#799) 2022-01-30 17:17:56 +02:00
Henrik Ingo
646fc3c45a Fix lint 2019-06-27 09:07:33 +03:00
Henrik Ingo
05cf6ffded rel: In teardown, only reset data-x/y/z attribute if we modified it.
Fixes downstream bug in impressionist:
https://github.com/henrikingo/impressionist/issues/20
2019-06-27 06:58:48 +03:00
Henrik Ingo
194ae3bb62 Fixes to data-rel-to
Fixes 80ffff0e8f
2018-05-08 20:01:11 +03:00
Holger Teichert
80ffff0e8f rel: Add relative positioning relative to any previous step. (#686) 2018-05-01 21:57:40 +03:00
Henrik Ingo
d6c6cd47c2 Change gc.lib.addCallback to gc.lib.pushCallback (#626) 2017-11-05 18:42:27 +02:00
Henrik Ingo
10632c2ebc Add rel goto and skip plugins to build.js too 2017-10-21 14:31:56 +03:00
Henrik Ingo
82ff7cbde0 Add a framework for synchronously executed preInit and preStepLeave plugins.
This allows plugins to register to be executed at the beginning of
impress().init() and impress().goto() respectively. By returning false,
a plugin can also cancel the event.

Also adds 3 plugins that use this: rel, goto and stop.
2017-10-21 12:22:22 +03:00