Skip to main content
D
dingz54260271
Participant
January 6, 2019
Answered

How to get message of each frame updating (HTML5 canvas)

  • January 6, 2019
  • 1 reply
  • 636 views

Hi Guys,

   I've created a HTML5 canvas animation and export it to a HTML page (sub page). And I've embeded this animation page into a main page using HTML tag "iframe".

In main page, I've added play, stop, back, forward buttons and a slider bar to show the animation progress. Now, I can control this animation progress in main page, but I have one problem left. During animation, how to get the animation frame ID automatically in main page. In fact, I can get current frame manually by clicking a button in main page, main page will send a message to sub page, sub page will pass the current frame to main page. But my question is how to get the frame updating message (or event) during animation, so I can refresh slider bar automatically.

Thanks in advance.

Ding

This topic has been closed for replies.

1 reply

C
ClayUUIDCorrect answer
Legend
January 6, 2019

https://createjs.com/docs/easeljs/classes/Ticker.html

D
dingz54260271Author
Participant
January 7, 2019

Hi Clay,

Thank you so much for your information. Now, my code looks like this, and hope it can help other guys.

//Registers the "tick" event listener.

fnStartAnimation = function()

{

    createjs.Ticker.setFPS(lib.properties.fps);

    //createjs.Ticker.addEventListener("tick", stage);

    //DZH:

    createjs.Ticker.addEventListener("tick", handleTick);

    function handleTick(event)

    {

        stage.update();

        // Actions carried out each tick (aka frame)

        if (!event.paused)

        {

            // Actions carried out when the Ticker is not paused.

            window.parent.postMessage('currentFrame'+exportRoot.currentFrame,'*');

        }

    }

}

Regards.

Ding

C
ClayUUID
Legend
January 7, 2019

Why on earth are you setting the FPS, and updating the stage, and checking paused? All you have to do is listen for Tick events and post them back to the parent window.

Wait... you aren't hacking up the code that Animate generates when you publish... are you?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices