janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add relative move and rotate to rel plugin (#794)

Browse Source 
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.
This commit is contained in:
thawk
2022-04-25 02:37:50 +08:00
committed by GitHub
parent d3760dfa0a
commit 629f7686f3
18 changed files with 10537 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
examples/classic-slides/index.html
View File

@@ -188,7 +188,7 @@
Notation shouldn't be a surprise. We use `data-rotate="30"` attribute, meaning that this
element should be rotated by 30 degrees clockwise.
-->
<div class="step slide" data-rel-x="2200" data-rel-y="600" data-rotate="30">
<div class="step slide" data-rel-position="relative" data-rel-x="2200" data-rel-y="600" data-rel-rotate-z="30">
<h1>A blockquote &amp; image</h1>
<img src="images/3476636111_c551295ca4_b.jpg"
alt="Mother Teresa holding a newborn baby"
@@ -200,10 +200,14 @@
</blockquote>
<div class="notes">
We use <code>data-rel-position="relative"</code> to make <code>data-rel-rotate-*</code> work,
and make <code>data-rel-x/data-rel-y/data-rel-y</code> be calculated at the coordination related to previous slide.
The relative position and rotation will be inherited by following slides,
so it's not necessary to repeat it again and again.
</div>
</div>
<div class="step slide" data-rel-x="1600" data-rel-y="1600" data-rotate="60">
<div class="step slide">
<h1>More text styles</h1>
<p>As usual, use <em>em</em> to emphasize, <br />
<strong>strong</strong> for strong, <u>u</u> for underline,<br />
@@ -216,7 +220,7 @@
</div>
</div>
<div class="step slide" data-rel-x="600" data-rel-y="2200" data-rotate="90">
<div id="motions" class="step slide">
<h1>Motion effects 101</h1>
<p>Items on the slide can</p>
<p class="fly-in fly-out">Fly in</p>
@@ -246,22 +250,32 @@
</div>
</div>
<div id="addons" class="step slide title" data-rel-x="-600" data-rel-y="2200" data-rotate="120">
<div id="zoom" class="step" data-rel-reset data-rel-x="-0.25w" data-rel-y="0.5h" data-scale="0.5">
<div class="notes">
<p>This step zoom in to left bottom of previous slide to see to small text.</p>
<p>It's a empty and transparent.</p>
<p><code>data-rel-reset</code> is used to prevent this step from inheriting the relative positioning from previous slide.</p>
</div>
</div>
<div id="addons" class="step slide title" data-rel-to="motions">
<h2>Add-ons</h2>
<div class="notes">
<p>This version of impress.js includes several add-ons, striving to make this a
full featured presentation app.</p>
<p>The previous step breaks the slide flow, changes the relative position and rotation.</p>
<p>This slide use <code>data-rel-to</code> to inherit relative position and rotation from the slide before previous slide.</p>
</div>
</div>
<div class="step slide" data-rel-x="-1600" data-rel-y="1600" data-rotate="150" data-autoplay="3">
<div class="step slide" data-autoplay="3">
<h1>Impress.js plugins</h1>
<ul>
<li>A new <a href="https://github.com/impress/impress.js/blob/master/src/plugins/README.md">plugin framework</a> allows for rich extensibility,
without bloating the core rendering library.
<ul>
<li class="substep">Press 'P' to open a presenter console.</li>
<li class="substep">When you move the mouse, navigation controls are visible on your bottom left</li>
<li class="substep">When you move the mouse, navigation controls are visible on your bottom right</li>
<li class="substep">Autoplay makes the slides advance after a timeout</li>
<li class="substep">Relative positioning plugin is often a more convenient way to position your slides when editing. (<a href="https://github.com/impress/impress.js/blob/master/examples/classic-slides/index.html">See html for this presentation.</a>)</li>
</ul>
@@ -277,7 +291,7 @@
</div>
</div>
<div class="step slide" data-rel-x="-2200" data-rel-y="600" data-rotate="180">
<div class="step slide">
<h1>Highlight.js</h1>
<pre><code>
// `init` API function that initializes (and runs) the presentation.
@@ -303,7 +317,7 @@
</div>
</div>
<div class="step slide" data-rel-x="-2200" data-rel-y="-600" data-rotate="210">
<div class="step slide">
<h1>Mermaid.js</h1>
<div class="mermaid">
%% This is a comment in mermaid markup
@@ -330,7 +344,7 @@
</div>
</div>
<div id="markdown" class="step slide markdown" data-rel-x="-1600" data-rel-y="-1600" data-rotate="240">
<div id="markdown" class="step slide markdown">
# Markdown.js
* [Markdown.js](https://github.com/evilstreak/markdown-js) integration: for authors in a hurry!
@@ -344,7 +358,7 @@
* [A more advanced Markdown presentation is here.](../markdown/)
</div>
<div id="acme" class="step slide" data-rel-x="-600" data-rel-y="-2200" data-rotate="270">
<div id="acme" class="step slide">
<ul>
<li>Remember, in <em>impress.js</em> the full power of HTML5, CSS3 &amp; JavaScript is always at your fingertips!</li>
<li>For example, you can use tables, forms, or dynamic charts as you would on any web page:</li>