Hello everyone,
I used a code that I found here: https://greensock.com/forums/topic/20404-flickering-png-sequence/
Thanks to @OSUblake. My problem: I have a jpg sequence animation (240 frames) and I would like to navigate between the different frames. Go from 0 to 100 or from 150 to 20. I can go forwards but not backwards. On the first click the animation works but when I click again nothing happens Here is my code:
HTML
<button class="btn btn1">BOUTON1</button>
<button class="btn btn2">BOUTON2</button>
<button class="btn btn3">BOUTON3</button>
<canvas id="canvas"></canvas>
JAVASCRIPT
var baseURL = "anim3/";
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
var sprite = {
frame: 1,
lastFrame: 240,
totalFrames: 240,
textures: []
};
var animation = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite})
.to(sprite, 2, {
frame: 100,
roundProps: "frame",
ease: Linear.easeNone
});
var animation2 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite})
.to(sprite, 2, {
frame: 150,
roundProps: "frame",
ease: Linear.easeNone
});
var animation3 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite})
.to(sprite, 2, {
frame: 2,
roundProps: "frame",
ease: Linear.easeNone
});
loadTextures(sprite.totalFrames)
.then(resizeCanvas)
.catch(function(reason) {
console.log(reason)
});
function drawSprite() {
// No changes
if (sprite.frame === sprite.lastFrame) {
return;
}
context.drawImage(sprite.textures[sprite.frame], 0, 0);
sprite.lastFrame = sprite.frame;
}
function resizeCanvas(textures) {
var texture = textures[0];
sprite.textures = textures;
canvas.width = texture.naturalWidth || texture.width;
canvas.height = texture.naturalHeight || texture.height;
canvas.classList.add("is-loaded");
var aspectRatio = canvas.height / canvas.width;
// BASE
base_image = new Image();
base_image.src = 'anim3/animhead_01.jpg';
base_image.onload = function(){
context.drawImage(base_image, 0, 0);
}
}
function loadTextures(numTextures) {
var promises = [];
for (var i = 1; i <= numTextures; i++) {
var index = i < 100 ? "0" + i : i;
promises.push(loadTexture(baseURL + "animhead_" + index + ".jpg"));
}
return Promise.all(promises);
}
function loadTexture(path) {
return new Promise(function(resolve, reject) {
var img = new Image();
img.onload = function() {
resolve(img);
}
img.onerror = function() {
reject("Error loading " + path);
};
img.src = path;
});
}
$( ".btn1" ).click(function() {
animation.play();
});
$( ".btn2" ).click(function() {
animation2.play();
});
$( ".btn3" ).click(function() {
animation3.play();
});
Someone can help me ?
Thank you.
