Tween alpha in HTML5 (without actuate)?

Stephane · January 25, 2016, 11:34am

Hello !
I can’t find why my own MultiTween class don’t succeed to update alpha property.
Whatever the tween value of alpha, visually, alpha is 0 or 1 without smooth transitions.

function updateState(_s:String, _f:Float):Void
{
    #if MultiTween trace(this + ".updateState( " + _s + ", " + _f + " )"); #end
    if (Reflect.hasField(o, _s) == true)
    {
        trace("\tReflect.hasField( " + o + ", " + _s + " ) == true");
        #if flash
            untyped o[_s] = _f;
        #else
            Reflect.setField(o, _s, _f);
            trace("\tAFTER Reflect.field( " + o + ", " + _s + ") = " + Reflect.field(o, _s));
        #end
    }
    else
    {
        trace("\tReflect.hasField( " + o + ", " + _s + " ) == false");
        #if (haxe_209 || haxe3)
            Reflect.setProperty(o, _s, _f);
        #end
    }
}

However, I am retrieving the tweened good values in trace()…

[object MultiTween] = new MultiTween( [Y,ALPHA] ) Main.js:8884:1
[object MultiTween].start() Main.js:8952:1
[object MultiTween].updateState( y, 20 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == false Main.js:9060:1
[object MultiTween].initializeTimer() Main.js:9065:1
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 19.333333333333332 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.03333333333333333 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.03333333333333333 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 18.666666666666668 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.06666666666666667 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.06666666666666667 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 18 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.1 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.1 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 17.333333333333332 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.13333333333333333 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.13333333333333333 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 16.666666666666668 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.16666666666666666 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.16666666666666666 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 16 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.2 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.2 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 15.333333333333332 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.23333333333333334 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.23333333333333334 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 14.666666666666668 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.26666666666666666 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.26666666666666666 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 14 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.3 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.3 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 13.333333333333332 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.3333333333333333 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.3333333333333333 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 12.666666666666668 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.36666666666666664 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.36666666666666664 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 12 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.4 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.4 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 11.333333333333334 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.43333333333333335 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.43333333333333335 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 10.666666666666666 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.4666666666666667 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.4666666666666667 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 10 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.5 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.5 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 9.333333333333334 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.5333333333333333 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.5333333333333333 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 8.666666666666666 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.5666666666666667 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.5666666666666667 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 8 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.6 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.6 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 7.333333333333334 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.6333333333333333 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.6333333333333333 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 6.666666666666666 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.6666666666666666 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.6666666666666666 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 6 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.7 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.7 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 5.333333333333334 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.7333333333333333 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.7333333333333333 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 4.666666666666666 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.7666666666666667 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.7666666666666667 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 4 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.8 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.8 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 3.333333333333332 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.8333333333333334 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.8333333333333334 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 2.666666666666668 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.8666666666666667 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.8666666666666667 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 2 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.9 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.9 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 1.3333333333333321 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.9333333333333333 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.9333333333333333 Main.js:9058:4
[object MultiTween].onTimer() Main.js:9078:1
[object MultiTween].updateState( y, 0.6666666666666679 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 0.9666666666666667 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 0.9666666666666667 Main.js:9058:4
[object MultiTween].onTimerComplete() Main.js:9090:1
[object MultiTween].updateState( y, 0 ) Main.js:8987:1
[object MultiTween].updateState( alpha, 1 ) Main.js:8987:1
Reflect.hasField( [object Panel], alpha ) == true Main.js:9056:1
AFTER Reflect.field( [object Panel], alpha) = 1 Main.js:9058:4
[object MultiTween].deleteTimer() Main.js:9072:1

but whatever the easing equations, whatever its duration, visually, the alpha is 1 or 0…
Any hint ?
Stéphane

singmajesty · January 25, 2016, 5:20pm

You can look at the Actuate source, there’s a fair amount of working around Reflection to try and make sure it works on all platforms