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

10
package.json
View File

@@ -24,9 +24,9 @@
"scripts": {
"all": "npm run build && npm run test && npm run lint",
"build": "node build.js",
"lint": "jshint src test/*.js && jscs src test/*.js",
"new-lint": "eslint src test",
"test": "karma start --log-level debug --single-run=true"
"lint": "npm exec -- jshint src test/*.js && npm exec -- jscs src test/*.js",
"new-lint": "npm exec -- eslint src test",
"test": "npm exec -- karma start --log-level debug --single-run=true"
},
"devDependencies": {
"eslint": "^6.8.0",
@@ -39,8 +39,8 @@
"ls": "^0.2.1",
"puppeteer": "^2.1.1",
"qunit": "^2.9.3",
"qunit-assert-close": "^2.1.2",
"syn": "^0.14.1",
"terser": "^4.6.7"
},
"dependencies": {}
}
}