Javascript animate() function

MaxiHaxe · July 9, 2020, 4:06pm

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 Window.requestAnimationFrame() - Web APIs | MDN

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.

ianharrigan · July 9, 2020, 5:49pm

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: Try Haxe!

nanjizal · July 9, 2020, 10:26pm

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

github.com

nanjizal/htmlHelper/blob/master/src/htmlHelper/tools/AnimateTimer.hx

package htmlHelper.tools;
import js.Browser;
import js.html.StyleElement;
class AnimateTimer {
    // called every frame
    public static var onFrame: Int -> Void;
    public static var counter: Int = 0;
    static var s: StyleElement;
    // rather ugly way to inject add a css enterframe loop for animation 
    // into the head of document.injectCSSenterFrame
    public static inline
    function create(){
        if( s != null ) return;
        s = Browser.document.createStyleElement();
        s.innerHTML = "@keyframes spin { from { transform:rotate( 0deg ); } to { transform:rotate( 360deg ); } }";
        Browser.document.getElementsByTagName("head")[0].appendChild( s );
        (cast s).animation = "spin 1s linear infinite";
        loop( 60.0 );
    }
    static

This file has been truncated. show original

ianharrigan · July 10, 2020, 11:40pm

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

nanjizal · July 11, 2020, 2:46am

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.

github.com

nanjizal/PolyominoTriangles/blob/master/src/polyominoTriangles/PolyominoTrianglesCanvas.hx#L51


var downDown:           Bool = false;
var upDown:             Bool = false;
public static function main(){ new PolyominoTrianglesCanvas(); } public function new(){
    var canvas = new CanvasWrapper();
    canvas.width = 1024;
    canvas.height = 768;
    Browser.document.body.appendChild( cast canvas );
    surface = new Surface( canvas.getContext2d() );
    Draw.drawTri = Triangle.drawTri;
    polyomino = new Polyomino( 1 );
    AnimateTimer.create();
    AnimateTimer.onFrame = render;
    Browser.document.onkeydown = keyDown;
    Browser.document.onkeyup = keyUp;
}

function render( i: Int ):Void{
    //update();
    polyomino.update();
    renderTriangles();
}

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.

github.com

nanjizal/PolyominoTriangles/blob/master/src/polyominoTriangles/PolyominoTrianglesFlash.hx#L58


var current = Lib.current;
var stage = current.stage;
viewSprite = new Sprite();
g = viewSprite.graphics;
addChild( viewSprite );
Draw.drawTri = Triangle.drawTri;
scale = 1.;
polyomino = new Polyomino( scale );
stage.addEventListener( KeyboardEvent.KEY_DOWN, keyDown );
stage.addEventListener( KeyboardEvent.KEY_DOWN, keyUp );
stage.addEventListener( Event.ENTER_FRAME, enterFrame );
#if nme 
    stage.addEventListener( Event.RESIZE, resize );
    current.graphics.beginFill(0xFFFFFF, 1. );
    current.graphics.drawRect( 0., 0., 70., 40. );
    current.graphics.endFill();
    current.addChild( new nme.display.FPS() );
    resize( null );
    enterFrame( null );
    resize( null );
#end

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

github.com

nanjizal/PolyominoTriangles/blob/master/src/polyominoTriangles/PolyominoTrianglesHeaps.hx#L52


    g.clear();
    for( i in 0...triangles.length ){
        tri = triangles[ i ];
        g.beginFill( gameColors[ tri.colorID ] );
        g.lineTo( ox + tri.ax * s, oy + tri.ay * s );
        g.lineTo( ox + tri.bx * s, oy + tri.by * s );
        g.lineTo( ox + tri.cx * s, oy + tri.cy * s );
        g.endFill();
    }
}
override function update(dt:Float) {
    if( K.isDown( K.UP ) ){
        polyomino.rotate( 1 );
    }
    if( K.isDown( K.DOWN ) ){
        polyomino.move(  0, 1 );
    }
    if( K.isDown( K.LEFT ) ) {
        polyomino.move( -1, 0 );
    } else if( K.isDown( K.RIGHT ) ) {
        polyomino.move(  1, 0 );

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.

github.com

nanjizal/kitGL/blob/master/src/kitGL/gluon/Animate.hx

package kitGL.gluon;

import haxe.MainLoop;
import haxe.Timer;
class Animate{
    public var speedDelta: Float = 0.01;
    public var onEnterFrame: Void -> Void;
    public var onStop:       Void -> Void;
    public var onStart:      Void -> Void;
    public var lastT:        Float = 0;
    public 
    var mainLoopHandle: MainEvent;
    public function new(){
        onEnterFrame = function(){ /*   */ };
        onStop     = function(){ /*   */ };
        onStart    = function(){ /*   */ };
    }
    public function start(){
        mainLoopHandle = MainLoop.add( mainLoop );
        onStart();

This file has been truncated. show original

You can see it used rather convolutely here:

github.com

TrilateralX/TrilateralSamples/blob/master/gluon/Bpathsvg/Main.hx

package;
import kitGL.gluon.Glwrapper;
import kitGL.gluon.Animate;
function main(){
    var animate          = new Animate();
    var glWrapper        = new Glwrapper();
    var trilateralTri    = new TrilateralSVG( glWrapper.gl );
    trilateralTri.setup();
    glWrapper.onFrame    = trilateralTri.render;
    glWrapper.onStop     = animate.stop;
    animate.onEnterFrame = glWrapper.mainLoop;
    animate.start();
}

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

github.com

nanjizal/Zeal/blob/master/src/zeal/Zeal.hx#L56


                            ,   Std.int( 100+i*30)
                            ,   zebraSkin 
                            );
        
        zebra.angle = Math.PI/( Math.random()*8 );
        zebras.push( zebra );
    }
    animate();
}
function animate(){
    AnimateTimer.onFrame = animateZebra;
    AnimateTimer.create();
    //var timer = new haxe.Timer( Math.floor( 1000/30 ) );
    //timer.run = animateZebra;
}
inline 
function animateZebra( count: Int ){
    surface.clearRect( 0, 0, 1024, 768 );
    for( i in 0...numberOfZebra ){ 
        zebras[i].animateAcross(    minus13 
                                ,   upAndDown

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

nanjizal · July 11, 2020, 2:53am

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.

github.com

nanjizal/htmlHelper/blob/master/src/htmlHelper/canvas/Leaf.hx

package htmlHelper.canvas;
import js.Lib;
import htmlHelper.canvas.Leaf;
import js.html.CanvasElement;
import js.html.CanvasRenderingContext2D;
import js.html.ImageElement;
import js.Browser;
using htmlHelper.canvas.Leaf;
typedef Point2D = { x: Int, y: Int } 
typedef Axis = { beta: Float, hyp: Float }
/**
 * Used to create IK bones using images, so handles offset Images, it uses two Canvas elements.
 * One element is used to help size images and the other collates the results.
 * Leaf should probably be more obviously name as tree branch, but like the name now. 
 */
class Leaf {
    public static var showBoxes:    Bool = false;
    public static var showCrosses:  Bool = false;
    static var canvas:              CanvasElement;
    static var surface:             CanvasRenderingContext2D;

This file has been truncated. show original

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 ).

nanjizal · July 11, 2020, 3:15am

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.