html5 coding: start creatjs.tween at a special time (automatically)

[henrycramer50858]

Hi there!

The image „Mov_Image_Inst“  should be visible, scale and rotate between minute 30 to 31 (and this every new hour again).

This is my coding:

var _this = this;

var d = new Date ();

var M = d.getMinutes();

var S = d.getSeconds();

this.Mov_ImageTween_Inst.visible = false;

if (

    M >= 30 && M<31  && S >= 0 && S <59

) {

   this.Mov_ImageTween_Inst.visible = true;

   this.Mov_AffiTween_Inst.alpha = 0;

   createjs.Tween.get(this.Mov_ImageTween_Inst)

   .to({alpha:1, scaleX: 2, scaleY: 2}, 1000)

   .to({rotation: 360}, 5000)

   .to({alpha:0, scaleX: 1, scaleY: 1}, 1000);

};

The code is almost correct, but the tweening doesn´t start automatically between minute 30 to 31, a website refresh is needed.  How can I get the tween to start at the right time automatically? Visiblity scaling and rotation between minute 30 to 31 works after website refresh only but not automatically.

Any help is appreciated.

Thank you in advance.

Cheers. Henry

[ClayUUID]

Put that code inside a function. Make that function be called once a minute by using setInterval().

WindowOrWorkerGlobalScope.setInterval() - Web APIs | MDN

If you need the animation to happen precisely at a certain time, it would probably be okay to set the interval to once a second even.

[henrycramer50858]

Thanks. It shouldn´t be an interval, it shoud be a special time in minutes and seconds. Cheers.

[ClayUUID]

Well, there's no specialTimeInMinutesAndSeconds() function in JavaScript, so you're going to have to use an interval to monitor the current time.

[albertd9194959]

A more optimal way is using ClayUUID suggestion. Just convert your 30 minutes into 1.8e+6 milliseconds.

A less optimal way would be to create a ticker event listener that runs through your check, you can probably change the rate to every 5 seconds or something....

Regards,

[ClayUUID]

I'm assuming he means every 30 minutes/hour of wall time, not run time, in which case he's have to adjust the initial delay based on time remaining to the next "special" time.

[albertd9194959]

Ah, yes i get you..

So we would need a new set of variables that record/set the initial time based on launch/initiation.....

[henrycramer50858]

Hi, thank you for your help so far. I ´ve tried the setInterval() method.

This works:

function runTheClock()

{

alert("hello");

}

var interval = setInterval(runTheClock, 1000);

And this works:

createjs.Tween.get(this.Mov_Symbol_Inst).to({rotation: 360}, 2000);  

But the combination doesn't work:

function runTheClock()

{

createjs.Tween.get(this.Mov_Symbol_Inst).to({rotation: 360}, 2000);  

}

var interval = setInterval(runTheClock, 1000);

Thank you in advance!

[ClayUUID · Accepted solution]

Explanation and solutions here:

Re: HTML 5 Mouseover button targeting