New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rotate element along path in line with bezier angle? #3
Comments
hrm its actually quite hard. in theory you need to find the 1st derivate of in practice you need to find how far the object moved in the last frame or hope that helps! On Wed, May 11, 2011 at 1:58 AM, techninja <
|
Interesting stuff! I actually did go ahead and attempt to implement something like this on the end during the FX stepping, but you can't rely on an angle taken from the immediately previous position because of rounding errors the angle bounces around like crazy. Even with average smoothing it only cut it down from a flickering mess to a drunken wobble. I'll attempt with three to 5 frames distance and see how well that works. |
Yep, got it to to work! Unfortunately it's still pretty fidgety, and because it's based off of the frames, the offset depends on the speed of the animation (fairly slow in my case). The following modification of the $.fx.step.path function relies on the jquery rotate plugin mention in comment 1, and the angle finder function in a reachable scope.
...and the angle finder function:
This completely falls apart at slow speed, and doesn't work at all until the position buffer fills up to the freame_read_offset, but other than that it seems to manage pretty well. If only We knew the math a bit better I'm quite sure you could plot an exact angle based on the more accurate calculation pre-rounding. |
yes i imagine it's all turned into integers ? - is it possible to set the shouldn't you empty the position buffer every time you take a reading ? On Wed, May 11, 2011 at 8:00 AM, techninja <
|
I've got a version of the plugin that does exactly that: https://github.com/louisremi/jquery-interval-bookmarklet/blob/gh-pages/jquery.path.js |
@louisremi Dude. Duuuude! Far better than mine. By grabbing the values before they get integerized the calculations are smooth as butter. Though I'm missing the rotate cssHook, just replacing it with the $().rotate supplied by the rotate plugin and handing it the correct angle makes it work like a treat! Though I'd say instead of passing a boolean over, you pass the rotation angle offset (and then somehow get that over to the fx.step function ;) |
sounds great - louisremi - is it ready just to merge in ? |
No, rotate is supposed to work as an option but the code has a bug: it only
|
I've created a new branch that:
It's here: https://github.com/louisremi/jquery.path/tree/rotateOption |
jquery.path is perfect for my needs, but it's missing one little piece. What might be the best way to implement jquery rotate to change the angle of the element set to follow the bezier path, and to keep it's angle in line with the path?
http://code.google.com/p/jqueryrotate/
If you had an image of a car, animated to follow the contours of a hill, you'd want the image element to rotate as well, and there should be enough data to divine the proper angle (given the correct offset) inside the bezier animation function, I just can't seem to figure out what is what.
Any ideas?
The text was updated successfully, but these errors were encountered: