'Fast Forward' animation option?


(Derek Watson) #1

Hi
Is there any way to create a ‘Fast Forward’ for an animation, giving the user the option to speed up playback or a simple way to copy the timeline and shorten it to give that effect when passing a FFD button?


(Mark Hunte) #2

Of the top of my head…

Using JavaScript you probably need to look at requestAnimationFrame

There are some examples on the site and out in the broader web.

But it would mean also controlling most of th animation from JS and could get complex.

Or you could go to the scene inspector and select the timeline you want and click the timeline duplicate button [+]]

I am not on a mac at the mo so cannot go into any of the above in more detail…

But you may also need to make sure the original timeline goes to the equivalent frame when the >> has stopped so it is not out of sync.


#3

In theory, yes but it’s probably not what you would expect. :slight_smile: (more on this in a mo)

You wouldn’t be able to do this on the fly.

And as @MarkHunte mentions … You would have to set this up before hand and it would become a logistical nightmare to match up where the time is on the first timeline to where, in the second timeline, the same point would be, in order to make it a seamless experience. Not impossible though.


As mentioned earlier, the “not what you would expect (perhaps) approach”.

I would control playback of the timeline with my own “interval” set (requestAnimationFrame could also be used … math would have to change accordingly) and use the

hypeDocument.goToTimeInTimelineNamed(timeInSeconds, timelineName)

in order for it to “play”.

For example, I have a 10 sec timeline and I create a loop that increments the “timeInSeconds” argument by 33.3ms (0.0333 - the time for 1 frame) so every 33.3ms I increment by the same value (as Hype timelines by default are 30fps) so if I click a FF button then I can just set the increment amount to double, triple, etc thus playing more frames in the same amount of time.

logic in code:

moveTimeline = function(multiplier) {
		newtime = time +  0.0333 * multiplier;
		hypeDocument.goToTimeInTimelineNamed(newtime, 'timeline')
		time = newtime;
		
		if (time >= hypeDocument.durationForTimelineNamed('timeline')) {
			clearInterval(timer);
			time = 0;
			startBtn.style.pointerEvents = "auto"; // eye candy and enabling click
			stopBtn.style.pointerEvents = "none"; // disabling click
			hypeDocument.setElementProperty(startBtn, 'opacity', 1, 0.4, 'easeinout') // eye candy
			hypeDocument.setElementProperty(stopBtn, 'opacity', 0.5, 0.4, 'easeinout') // eye candy
		}
		console.log(time);
	}
	
	timer = setInterval(function() { moveTimeline(0.5) }, 33.3);

Then on scene load setup some variables with default values and then you can use buttons to start, stop, ff (change multiplier), etc.

timelineControl.zip (18.8 KB)


Setter method for timeline
(Jonathan Deutsch) #4

This is a a good feature request :slight_smile:. There’s no way within Hype to do it so the above example is the best method right now.