Page 1 of 1
[SOLVED]Dice ANimation.
Posted: 16 September 2015, 21:36
by 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();
},
Re: Dice ANimation.
Posted: 17 September 2015, 02:05
by pikiou
In your onAnimate function, this.transform isn't what you would expect, as this is a reference to the onAnimate function.
Re: Dice ANimation.
Posted: 17 September 2015, 08:25
by Quinarbre
Also, you're mixing your PHP and Javascript again ; $val should just be val.
Re: Dice ANimation.
Posted: 17 September 2015, 15:57
by 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)
Re: Dice ANimation.
Posted: 17 September 2015, 20:06
by 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();
},
Re: Dice ANimation.
Posted: 17 September 2015, 21:18
by 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.)
Re: Dice ANimation.
Posted: 17 September 2015, 21:51
by Rudolf
In fact... it runs...
... thanks for having tried to help me
Re: Dice ANimation.
Posted: 17 September 2015, 22:15
by 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
Re: Dice ANimation.
Posted: 18 September 2015, 00:16
by 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 ^^
Re: Dice ANimation.
Posted: 18 September 2015, 08:09
by 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...