HTML5 Canvas - Transitions between frames

[jrameriz]

Is there a way to make HTML5 Cavas Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, Zoom, Random..... between frames?

One of the adobe animate cc advance templates has a good example but they don't have that same template for HTML5. is that an option or is there something similar to the below code in HTML5 Canvas?

TransitionManager.start(slides_mc, {type:Wipe, direction:Transition.IN, duration:0.25});

[kglad]

yes, easeljs has a tween class, TweenJS v0.6.2 API Documentation : Tween

[jrameriz]

kglad I'll give it a try, thank you for the fast response! Your awesome!

[kglad]

you're welcome.

[ClayUUID]

I doubt the Tween class would be very useful for these sort of effects. They're generally implemented with masking, and programmatically tweening masks doesn't work in Canvas mode. You have to either pre-draw the mask animation as a sequence of frames, or redraw the mask from scratch every frame.

For example something like this: Canvas Element and masks

[jrameriz]

You are right, it created a problem with interactivity inside the movie clip object.

[kglad]

for frame-to-frame transitions you cannot simultaneously tween-out the initial frame and tween-in the next frame.

for frame-to-frame transitions you have to completely 'tween-out' the initial frame, change frames and then completely 'tween-in' the next frame.  almost all of those transitions are reproducible* with that understanding.  some are easier to implement than others.

you should probably start with an easy one (eg, fly).

*by reproducible i mean you may not be performing a true transition of the objects currently on-stage but instead using something that plays the role of a mask. eg, for the transitions that use a mask, you can use a background colored object that overlays the frame contents and tween that overlay to reveal the frame contents.

[jrameriz]

Can you help me out with an example? My code looks like this so far i basically want to add sort of a swipe transition between frames.

//slidesTrans is the main movie clip

this.slidesTrans.stop();

var pageNumberOn = true; // true, false

//this.pageNumbers.text = "";

createjs.Touch.enable(stage);

var thisShit = this; //hold on to stage

/* Tween Vars didn't work

*/

//var slideMain = this.slidesTrans;

////target initial position

//createjs.Tween.get(slideMain, {

// //loop: true,

// override:true

//}).to({

// x: -slideMain.x,

// //y: canvas.height - 55,

// //rotation: -360

// }, 250, createjs.Ease.none);

//

//slideMain.x = this.stage.canvas.width;

$("#pageNumbers").text("");

Hammer(document.getElementById("canvas")).on("swipeleft", function () {

$("#goToLeft").show();

$("#goToRight").show();

$("#pageNumbers").show();

//animate from the left

var frameNumber = thisShit.slidesTrans.currentFrame;

var checkFrameCount = thisShit.slidesTrans.totalFrames - 1;

if (checkFrameCount === frameNumber) {

//do nothing

} else {

thisShit.slidesTrans.gotoAndStop(frameNumber + 1);

}

if (pageNumberOn === false) {

$("#pageNumbers").text("");

} else {

$("#pageNumbers").text(thisShit.slidesTrans.currentFrame);

//thisShit.pageNumbers.text = thisShit.currentFrame;

}

});

Hammer(document.getElementById("canvas")).on("swiperight", function () {

$("#goToLeft").show();

$("#goToRight").show();

$("#pageNumbers").show();

var frameNumber = thisShit.slidesTrans.currentFrame;

if (frameNumber > 1) {

thisShit.slidesTrans.gotoAndStop(frameNumber - 1);

}

if (pageNumberOn === false) {

$("#pageNumbers").text("");

} else {

$("#pageNumbers").text(thisShit.slidesTrans.currentFrame);

//thisShit.pageNumbers.text = thisShit.currentFrame;

}

});

//start event listeners

this.slidesTrans.turnOnHeater.addEventListener("click", tryturnOnHeater.bind(this));

this.slidesTrans.turnOnHeater.addEventListener("touchstart", tryturnOnHeater.bind(this));

function tryturnOnHeater() {

$("#goToLeft").show();

$("#goToRight").show();

$("#pageNumbers").show();

this.slidesTrans.gotoAndStop(1);

if (pageNumberOn === false) {

$("#pageNumbers").text('');

} else {

$("#pageNumbers").text(this.slidesTrans.currentFrame);

}

}

//document.getElementById("homeButton").addEventListener("click", fl_ClickToGoToWebPage);

//document.getElementById("homeButton").addEventListener("touchstart", fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage() {

window.open("../index.html", "_self");

}

document.getElementById("goToLeft").addEventListener("click", goBackToLabel.bind(this));

document.getElementById("goToLeft").addEventListener("touchstart", goBackToLabel.bind(this));

function goBackToLabel() {

var frameNumber = this.slidesTrans.currentFrame;

if (frameNumber > 1) {

this.slidesTrans.gotoAndStop(frameNumber - 1);

}

if (pageNumberOn === false) {

$("#pageNumbers").text("");

} else {

$("#pageNumbers").text(this.slidesTrans.currentFrame);

//this.pageNumbers.text = this.currentFrame;

}

}

//forward button NEEDED

document.getElementById("goToRight").addEventListener("click", goforwardToLabel.bind(this));

document.getElementById("goToRight").addEventListener("touchstart", goforwardToLabel.bind(this));

function goforwardToLabel() {

$("#goToLeft").show();

$("#goToRight").show();

$("#pageNumbers").show();

var frameNumber = this.slidesTrans.currentFrame;

var checkFrameCount = this.slidesTrans.totalFrames - 1;

//console.log(checkFrameCount);

//console.log(frameNumber);

if (checkFrameCount === frameNumber) {

//do nothing

} else {

this.slidesTrans.gotoAndStop(frameNumber + 1);

}

if (pageNumberOn === false) {

$("#pageNumbers").text("");

} else {

$("#pageNumbers").text(this.slidesTrans.currentFrame);

}

}

[kglad · Accepted solution]

that's more code than i'm willing to debug in a forum.

i recommend you create a test project that's easy to code (and debug via a forum) so you can learn the basics (and get help via this forum with your code).

here's a 'slide' transition with a two frame project:

var tl = this;

var nextframe = 1;

this.stop();

this.b.addEventListener('click',f.bind(this));

function f(){

    createjs.Tween.get(tl).to({x:stage.canvas.width},500).call(completeF);

}

function completeF(){

    tl.gotoAndStop(nextframe);

    tl.x = -stage.canvas.width

    createjs.Tween.get(tl).to({x:0},500);

    nextframe = (tl.currentFrame+1)%2;

}

[jrameriz]

ok, how about just a simple button that tweens the html5 frame-by-frame movie clip

//start event listeners

this.slidesTrans.turnOnHeater.addEventListener("click", tryturnOnHeater.bind(this));

function tryturnOnHeater() {

//this is where i would like to tween slidesTrans movie clip

this.slidesTrans.gotoAndStop(1);

}

[kglad]

the code's above.