Menu
The following code makes different pics appear on my canvas. how do I make them change with nice transitions like fade and slide?
setInterval(function () {
if (i >= carInfo.length) {
i = 0;
}
imageObj.onload = function () {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillText(textVar, 10, 10);
context.drawImage(imageObj, 69, 50);
};
imageObj.src = '' + carInfo[i].Picture + '';
var textVar = "" + carInfo[i].carType + ": " + carInfo[i].Description;
// alert(textVar);
i++
},2000);
503
Fade in/out
Can be done by gradually changing your images opacity using context.setGlobalAlpha
Slides
Can be done by gradually changing the x,y coordinate of context.drawimage(imageObj,x,y)
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/5sAS9/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var imageIndex=0;
var animPctComplete=0;
var fps = 60;
// image loader
var imageURLs=[];
var imagesOK=0;
var imgs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg");
loadAllImages();
function loadAllImages(callback){
for (var i = 0; i < imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK==imageURLs.length ) {
animate();
}
};
img.src = imageURLs[i];
}
}
function animate() {
setTimeout(function() {
requestAnimFrame(animate);
// get the current image
// get the xy where the image will be drawn
var img=imgs[imageIndex];
var imgX=(canvas.width/2-img.width/2)*animPctComplete;
var imgY=(canvas.height/2)-img.height/2;
// set the current opacity
ctx.globalAlpha=animPctComplete;
// draw the image
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,imgX,imgY);
// increment the animationPctComplete for next frame
animPctComplete+=.01; //100/fps;
// if the current animation is complete
// reset the animation with the next image
if(animPctComplete>=1.00){
animPctComplete=0.00;
imageIndex++;
if(imageIndex>=imgs.length){imageIndex=0;}
}
}, 1000 / fps);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=600 height=400></canvas>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
