Hype Animation Frame

Extension Project
, ,
1

HypeAnimationFrame_1
HypeAnimationFrame_13508×2481 222 KB

This is a Hype AnimationFrame, a wrapper for window.requestAnimationFrame (without polyfill for it). Will keep polyfills from now on separate, so projects that already use them don’t load them twice.

Basic usage:

	hypeDocument.startAnimationFrame(function(time){
		// your code goes here and executes once per frame
	});

Advanced usage (with all options):

	hypeDocument.startAnimationFrame(function(time){
		// your code goes here and executes once per frame
	},{
		framerate: 30,		/* framerate 1-60 */
		id: 'myTicker',		/* ID for managing, defaults to callback if not anonymous */
		scope: window,	/* defines scope of execution, defaults to hypeDocument */
		
	});

Online Example:
HypeAnimationFrame.html

Example Hype File:
HypeAnimationFrame.zip

Code repository on GitHub

Version-History:
1.0 Initial release under MIT
1.1 Converted into a self contained extension
1.2 Added id, scope and refactored names
1.3 Added support for Framerate

Content Delivery Network (CDN)

Latest version can be linked into your project using the following in the head section of your project:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeAnimationFrame/HypeAnimationFrame.min.js"></script>

Optionally you can also link a SRI version or specific releases.
Read more about that on the JsDelivr (CDN) page for this extension at https://www.jsdelivr.com/package/gh/worldoptimizer/HypeAnimationFrame

Learn how to use the latest extension version and how to combine extensions into one file at

3 Likes
2

PS: Fixed the missing parameter missing in the function.apply --> time. Will add an example using time in the next update.

3

↑ look at project
1.1 Converted into a self contained extension

4

@jonathan I get some jitter. Is this because the frameAction is firing more often then the VSync?

5

↑ look at project
1.2 Added id, scope and refactored names

I externalized the library into an .JS-file. There is also a minified version now. Please don’t hotlink in production, for testing it’s okay! If you don’t want an additional file request just dump the content of the minified version into your Head HTML in a <script>...</script> enclosure.

6

I think I'd need to see a video of the issue; it seems to work fine for me. Sometimes dropped frames look like jitter (moving ahead or behind) due to how our brain works, so it is useful to look in slow-mo to see what is actually happening. Also note:

  • vsync issues would cause tearing; browsers draw double-buffered so practically this cannot happen
  • When a call is under requestAnimationFrame, it will group anything requiring a paint together, so it should all get painted together

I am wondering though what the use case of this is, instead of just using requestAnimationFrame directly?

7

It stops all loops on scene changes no matter how many you start and takes out the pain of having to understand or think about the break off and self calling in each tick.

1 Like
8

↑ look at project
1.3 Added support for Framerate

Use framerate on the config object to set it up.

Visual explaination of framerate
(example represents a framerate of 30 vs. 60 frames with regular animation frames):

001
VisualizeUpdates.001.jpeg1024×768 85.7 KB

1 Like