629f7686f3
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.
30 lines
1.0 KiB
HTML
30 lines
1.0 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright 2016 Henrik Ingo (@henrikingo)
|
|
Released under the MIT license. See LICENSE file.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>QUnit tests for impress.js</title>
|
|
<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
|
|
</head>
|
|
<body>
|
|
<div id="qunit"></div>
|
|
<div id="qunit-fixture"></div>
|
|
<script src="node_modules/qunit/qunit/qunit.js"></script>
|
|
<script src="node_modules/qunit-assert-close/qunit-assert-close.js"></script>
|
|
<!-- The QUnit tests. -->
|
|
<script src="test/helpers.js"></script>
|
|
<!-- Core tests -->
|
|
<script src="test/core_tests.js"></script>
|
|
<script src="test/non_default.js"></script>
|
|
<!-- Plugins -->
|
|
<script src="src/plugins/navigation/navigation_tests.js"></script>
|
|
<script src="test/plugins/rel/relative_to_screen_size_tests.js"></script>
|
|
<script src="test/plugins/rel/rotation_tests.js"></script>
|
|
<script src="test/plugins/rel/padding_tests.js"></script>
|
|
<script src="test/plugins/rel/rel_to_tests.js"></script>
|
|
</body>
|
|
</html>
|