[SOLVED]Dice ANimation.

[Rudolf]

Hell All,
Today, I've tried a dice dojo animation ... but it does not start, is someone able to tell me what 's wrong inside?
it turns the dice while changing the face of the dice (with backgroundposition).
in setup:

Code: Select all

dojo.forEach( ['transform', 'WebkitTransform', 'msTransform','MozTransform', 'OTransform'],
                function (name) {
                    if (typeof dojo.body().style[name] != 'undefined') {
                        this.transform = name;
                    }
                }
            );

Code: Select all

rollDice:function(node,dice)
        {
            var animation = new dojo.Animation({
                curve: [0, 720],
                onEnd: function(){
                    $val= dice*70;
                    node.style.backgroundPosition ='-'+$val+'px -70px';
                },
                onAnimate: function (v) {
                    node.style[this.transform] = 'rotate(' + v + 'deg)';
                    if (!(v%60)){
                        d=70*Math.floor((Math.random() * 6) + 1); 
                        node.style.backgroundPosition ='-'+d+'px -70px';
                    }

                }
            }).play();
        },
   

[pikiou]

In your onAnimate function, this.transform isn't what you would expect, as this is a reference to the onAnimate function.

[Quinarbre]

Also, you're mixing your PHP and Javascript again ; $val should just be val.

[Rudolf]

I donnot understand...
this.transform will contain for example 'moz-transform' if it's defined... how could I have to get a global instead?


NB:
$val works in javascript... no matter have $ or not... (sometimes I prefer add $ to have a better view)

[Rudolf]

On this example: I see a good message 'transform'...
but I don't have any other message! no 'here'...

Code: Select all

 rollDice:function(node,dice)
        {
            this.showMessage(this.transform,'info');
            var animation = new dojo.Animation({
                curve: [0, 720],
                onBegin: function(){
                    this.showMessage('here','info');
                },
                
                onEnd: function(){
                    $val= dice*70;
                    node.style.backgroundPosition ='-'+$val+'px -70px';
                },
                onAnimate: function (v) {
                    node.style[this.transform] = 'rotate(' + v + 'deg)';
                    if (!(v%60)){
                        d=70*Math.floor((Math.random() * 6) + 1); 
                        node.style.backgroundPosition ='-'+d+'px -70px';
                    }

                }
            }).play();
        },

[Quinarbre]

What Pikiou said explains it perfectly.

Two solutions :
- "quick and dirty"

Code: Select all

 rollDice:function(node,dice)
        {
            this.showMessage(this.transform,'info');
            var self = this;
            var animation = new dojo.Animation({
                curve: [0, 720],
                onBegin: function(){
                    self.showMessage('here','info');
                },
                ...
        },

- cleaner :

Code: Select all

 rollDice:function(node,dice)
        {
            this.showMessage(this.transform,'info');
            var animation = new dojo.Animation({
                curve: [0, 720],
                onBegin: dojo.hitch( this, function(){
                    this.showMessage('here','info');
                } ),
                ...
        },

(Actually I have no idea how dojo.hitch works, it may be exactly the same.)

[Rudolf]

In fact... it runs...
... thanks for having tried to help me

[Rudolf]

In case someone need this,
I've done also this other version without dojo (which runs also)

Code: Select all

 otherrollDice: function(node,dice)
        {
            var property = this.getTransformProperty(node);                          
            var pas = 1;
            var r=0;
            if (property) 
            {
                //var idtimer=this.maxtimer++; 
                //this.memtimer[idtimer]
                var idtimer=  setInterval(   
                    function () {   
                        r+=pas;
                        v=Math.floor(r);
                        node.style[property] ='rotateY('+v+'deg)';
                        
                        if (r==90){   
                            pas=-1;
                            d=70*Math.floor((Math.random() * 6) + 1); 
                            node.style.backgroundPosition ='-'+d+'px -70px';
                        } 
                        if (r==0) {
                            node.style.backgroundPosition ='-'+dice*70+'px -70px';
                            //this.maxtimer--;
                            clearInterval(idtimer);//this.memtimer[idtimer]);
                        }
                    },10
                );
            }   
        },

if launch several times, it's possible to add an array

[pikiou]

In fact... there is no pb [...] byt the way... thanks for having tried to help me

I checked your code, and your new dojo solution has no rotation, so no use for this.transform
No kidding our help was useless. Why did we even bother helping you in the first place...

Quinarbre, I looked into dojo.hitch and here is what it does more or less:

Code: Select all

function hitch(obj, callback) {
   return function () {
      obj[callback].apply(obj);
   };
}

It's like a candy wrapper ^^

[Rudolf]

thanks Pikiou, Yes, finaly, I simplify, it's engough with dojo.style ...
(You right for this.transform I forgot to delete it from setup )

But I will have to use rotate to put cards in future player boards (right now I made a template in the same direction, but it's not the case on final boards)
But for sure:
'this.transform' is working
and puting a $ at the beginning of a variable is also working, let's try it

And for "hitch", it solves the way of debugging (I use this.showMessage "here", to debug) ... so as I understand, It does not replace rotate?

(also it was not kiddings, just remember in this post, that pb was not what I thought first if I come back again on it, sorry for my english and quickness to write )...
it's good to have a post that synthesis this animation management...