COMMUNITY

Javascript animate() function

Hello everybody,

I am trying to use animate() function on element in Haxe but i cant find correct syntax how define arguments. This is how function is defined:

/**
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
@throws DOMError
**/
@:overload( function( keyframes : Dynamic, ?options : KeyframeAnimationOptions) : Animation {} )
	function animate( keyframes : Dynamic, ?options : Float ) : Animation;

I couldnt find solution how to write arguments for example easing, iterations in KeyframeAnimationOptions argument.
Did you meet with this and know solution how to write it, please?

Also this is reference to next question how to improving animations. I tried everyone example how to use requestAnimationFrame() and looked up for its definition in https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

It works correctly in clean JS and in Haxe only when I used cast for argument (requestAnimationFrame(cast …)). I would like to get rid of this cast but i think i do something wrong because without cast a compiler always saying something wrong.

Thank you so much for your help.

I couldnt find solution how to write arguments for example easing, iterations in KeyframeAnimationOptions argument

Pretty much the same way you would with normal js: https://try.haxe.org/#D9f91

1 Like

this is my approach it’s always served me well ( kill prob does not work ).

… … … … that does look alot clearer about the OP’s question about how to pass params to the existing .animate extern… :stuck_out_tongue:

Not sure if my approach is particularly beautiful your approach certainly looks clean, htmlHelper is on haxelib so you can just install the haxelib and use it.

My typical use can be seen in this complex Tetris example, so it’s just like in flash or any game engine.

It can compare it with similar flash/openfl/nme approach, I have a feeling the css injection may work better but likely not conventional enough for mainstream engines, probably lighter than the normal openfl event structures.

Heaps provides perhaps the simplest approach to main loop automagically, Kha normally set something up in the initialization.

I think now Haxe provides a main render loop out of the box. I have not tried for JS, but I have this recent Animate version that seems to works for C++ target, expect that I have made it over complex but nice to have it work similar to my existing Animate approach.

You can see it used rather convolutely here:

But my Animate approach I have used for years even in IE8 so it must be reliable as long as you don’t try to kill it. You can see it used here for my Zebra


Test animation
https://rawgit.com/nanjizal/Zeal/master/deploy/index.html

Or even in my Divtastic pure div experiments ( likely named differently internally as Animate was a more recent naming ).
https://rawgit.com/nanjizal/divtasticDemo/master/div_clock/DivClock.html

I was going to say MaxHaxe if your wanting to do Canvas animations the two Canvas ( the blitting approach used in Zebra ) seems quite fast, it is also provided by htmlHelper.

There is also stuff in htmlHelper for SVG but i have found it to be rather heavy in real use ( but there are hxDaedalus and PolyominoTriangles examples probably not with direct links as I hid them ).

htmlHelper is setup to make working with javascript animation easier (well for me atleast ), it kind of ignore html traditional approach and allow use more like normal graphics code, I have used it in Angular even, but had to hand modify the js to keep it happy.
https://nanjizal.github.io/htmlHelper/pages/htmlHelper/canvas/CanvasWrapper.html

I have started trying to provide more GL centric code in kitGL suited towards WebGL( only 1 at moment ), but it’s more like a work in progress kit where I try to make it easy to snap bits together without full on framework and to minimize effort of remembering the webgl wiring detail, the lime also works for comparisom, nme maybe not properly. But it’s in flux so will change.
Currently it’s only setup for haxe nightly.


dox
https://nanjizal.github.io/kitGL/pages/kitGL/glWeb/index.html

Certainly you will get better pipeline control for shader animation with something like Kha toolkit that helps a lot with 2D, obviously OpenFL provides better Vector support in html5 and Heaps is pretty fast for html animation but I am not sure it’s quite as nice for vector as OpenFL and the shader approach I doubt is as clear an Kha. Most of the frameworks allow WebGL rendering with Canvas fall back, but often you feel rather disconnected from the html and the structures do add weight.

Sorry have no idea if any of this is useful, or your haxe experiance I can only offer my own explorative approaches - I know it can be daunting getting js stuff setup in haxe when all the tutorials online are focused on muggle javascript only.