Question

i am developing a live wallpaper, i am new and stuck at this problem, can anyone tell me How to draw images on canvas one by one like a slideshow with fadein and fadeout animation.
i am able to perform this animations on views and layouts but i have no idea to run them on canvas. please help!

Answer 1

Not sure if you mean java or javascript

Some clues about fade-in solution:

var delta = 0;
var interval = 0;
var duration = 2000;

setInterval(function() {
  ctx.globalAlpha = 1.0;
  ctx.drawImage(oldImage);

  ctx.globalAlpha = delta / duration;
  ctx.drawImage(nextImage);

  delta += interval;
}, interval);

• Consider using requestAnimationFrame instead of timers

• Calculate real delta using (new Date).getTime()

• Play with some easing equations – for example:

alpha = Math.sin(0.5 * Math.PI * delta / duration)