Rotate object infinitely without using timeline


(Vishwas Gagrani) #1

I am using this code:

var a = hypeDocument.getElementById('a');

hypeDocument.setElementProperty(a, 'rotateZ',  val1 , time1, 'linear')

How can I rotate infinitely using the above code?

I saw this: Howto: Loop or Repeat an Animation,
but I want to do it without using timeline :slight_smile:


#2

Something like this might work??

var a = hypeDocument.getElementById('a');
var val1 = 0, time1 = 1.0;

function mainLoop() {
	val1 += 6;
	hypeDocument.setElementProperty(a, 'rotateZ',  val1, 0, 'linear')
    requestAnimationFrame(mainLoop);
}

requestAnimationFrame(mainLoop);

This would animate the element 360º / 1s (roughly)


(Vishwas Gagrani) #3

Thanks. That is working.
But I am having a doubt. Won’t this create a problem as you are calling
requestAnimationFrame(mainLoop);
Without knowing if the tween to increment the angle by 6 degrees has completed or not?
And why there is a “0” in place of time? Is it a typo? I am confused since even if it’s a typo it’s working?


#4

@VishwasGagrani

This is a common looping tactic using requestAnimationFrame. On each recursion the “val1” variable will always increase by 6 until you call cancelAnimationFrame() to cancel the “looping”.

The 0 is not a typo it’s just left there to show you that the animation with start immediately. If for example you put in 1.0 (1sec) it will start off slowly then resume at the same speed. Whichever is the preferred effect.

This is by no means a finished example. It’s just to show you a way to “infinitely” loop your animation.


#5

Did not know about using the “0” duration. Thank You!


(Jonathan Deutsch) #6

slightly off topic, but to clarify the duration and timing function aren’t even required if you want it to instantly change.

This is valid:

hypeDocument.setElementProperty(element, propertyName, value)

See that the in-app documentation view calls the other arguments out as optionalDuration and optionalTimingFunction:

optionalDuration is given in seconds; the default value is 0.

optionalTimingFunction will default to ‘easeinout’ if not provided.


#7

so would

hypeDocument.setElementProperty(a, 'rotateZ',  val1 'linear'

work?


(Jonathan Deutsch) #8

No, because be 4th argument must be the duration. Additionally there’s no point to having a timing function without a duration since it will just be applied instantly.

(you are missing a comma and closing parenthesis, so it will probably cause a syntax error first :wink:)

This will work:

hypeDocument.setElementProperty(a, 'rotateZ',  val1, 2.0);

It will cause a 2.0 second animation with an 'easeinout' timing function (the default if left unspecified).

Basically if a optionalDuration is given to setElementProperty, it creates an ad-hoc timeline animating that property. If no duration is given, it immediately changes the value.


#9

I don’t mean to be flippant but ok comma aside (my bad as I missed filling it in) I was simply pointing out to the OP the way he added the animation so as not to be too confusing. I of course understand the way you’ve done it with the API and the order of parameters but for clarities sake I was making it (maybe) clearer for the OP. :wink:

Also, and definitely off topic, I may have had a few too many drinks as my team (country) just won the Grand Slam (local … to the UK) rugby tournament so I’m definitely not firing on all cylinders :smiley:


(Jonathan Deutsch) #10

Haha yeah my post was also off topic from the original Q, just seemed like an opportunity to clarify the API :slight_smile:.


(ma wei) #11

You don’t use var Timer1 = 1.0 , why?


(Mark Hunte) #12

He has but indirectly, so it is all on one line.

var val1 = 0, time1 = 1.0;

You can chain the type by using a comma " ," to separate the objects.
i