Rotation: fraction of a degree possible?

Using JavaScript with Hype
1

HI all JS code warriors

I've noticed that with the visual rotation tool it is possible to add only integer degrees.
Would it be possible to add a fractional degree with some js code instead?
I need that as a workaround for jerky tweening of slow-moving elements (still persisting in Firefox).

There was an old topic from Jaywing ( topic:8723/Dec 2016), where Jonathan suggested:

But to add one whole degree is way too much, elements get visibly slanted which is visually in many cases inappropriate.

Any suggestions?

2

Sure, you can use the Get and Set Hype Api functions to Get, modify, and then Set a new rotation angle:

var currentZ = hypeDocument.getElementProperty(rect3, 'rotateZ');
console.log(currentZ);
var newZ = .5 + currentZ
hypeDocument.setElementProperty(rect3, 'rotateZ', newZ, .5, 'easeinout')

Clicking the gray rectangle repeatedly in this test doc will slowly rotate it clockwise by .5 degrees each time (over the span of half a second).

hypeDocument.setElementProperty(rect3, 'rotateZ', newZ, .5, 'easeinout')

To break down the line that actually does the animation: Rect3 is the Unique Element ID, rotateZ is the property, newZ is the actual number rotation angle which will be animated to, .5 is the animation duration, and easeinout is the easing property.

test.zip (19.7 KB)

1 Like
3

To add to what @Daniel discussed…

In your case it sounds like You just need the element to be slightly rotated to provide a smoother animation.

So one strategy might be to trigger code in an “On Scene Load” handler, so when a Scene loads the particular element(s) is all set to be animated as the slight rotation is there at the start:

function rotate (hypeDocument, element, event) {
    hypeDocument.setElementProperty(rect3, 'rotateZ', .3)
}

• “rect3” is the id of the element You are going to animate.
• “rotateZ” is the name of the property You are affecting.
• “.3” is the rotation in degrees; in this case 3/10th’s of a degree

Note that there is no animation in the code as in Daniel’s example.

Demo: rotate_JHSv1.hype.zip (14.4 KB)

3 Likes
4

Wow, that was a reply in a flash, thank you guys !
@Daniel @JimScott

I will test those code snippets asap.
I am pretty new to JS, that is why
JavaScript Getter/Setter API etc. phrases sound – for now – cryptic and somewhat daunting for me,
but thanks to your explainers/examples I got really interested to learn more of that useful stuff.

3 Likes