Canvas 图像动画（淡入淡出）

Question

使用 HTML5 canvas 我正在尝试加载图像并创建 'crossfade' 效果，其中第一个图像淡入视野，然后在短暂的延迟后，第二个图像淡出在第一张图片的上方等

借助此论坛上类似问题的答案，我得到了 2 个独立的代码位......一个加载图像数组，另一个为 'fade in' 效果设置动画。我的问题是我不知道如何组合这 2 个脚本来加载图像数组以及如何让数组中的每个图像在加载时淡入。

这是我正在使用的 2 个独立脚本：

将图像数组加载到 CANVAS:

HTML

<canvas id="canvas" width=600 height=350></canvas>

JS

window.onload = function() {

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var delay=2000;
var nextTime=0;
var nextImage=0;

var imageURLs=[];  
imageURLs.push("img/sunflower0.jpg");
imageURLs.push("img/sunflower1.jpg");
imageURLs.push("img/sunflower2.jpg");

var imgs=[];
var imagesOK=0;
loadAllImages(start);

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 ) {
                callback();
            }
        };
        img.src = imageURLs[i];
   }      
}

function start(){
    requestAnimationFrame(animate);
}

function animate(currentTime){
    requestAnimationFrame(animate);

    if(currentTime<nextTime){return;}
        ctx.clearRect(0,0,cw,ch);
        ctx.drawImage(imgs[nextImage],0,0);
        nextTime=currentTime+delay;
        nextImage++;
       if(nextImage>imgs.length-1){nextImage=0;}

}
} // close window.onload

图像加载到 CANVAS 时淡入淡出：

我设法使用 Canvas 和 Greensock TweenMax:

获得了一段单独的代码来执行此操作

<script     src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js">     </script>

<script>

var ctx, img;

function init() {
    ctx = document.getElementById("canvas").getContext("2d");

    img = new Image();
    img.src = "img/sunflower0.jpg";
    img.xpos = 0;
    img.ypos = 0;
    img.globalAlpha = 0;

    img.onload = function() {
        TweenMax.ticker.addEventListener("tick",loop);
    }

    TweenMax.to(img, 5 ,{globalAlpha:1});
}

function loop(){
   ctx.clearRect(0,0,500,336);
   ctx.globalAlpha = img.globalAlpha;
   ctx.drawImage(img, img.xpos, img.ypos);
}

init();

谁能告诉我如何结合这两个脚本来获得交叉淡入淡出效果？

非常感谢！

Answer 1

我会为此使用三幅画布：

var imgs = [];

var rand = Math.random;
var common = "http://lorempixel.com/500/300?";
var imageURLs = [common + rand(), common + rand(), common + rand(), common + rand(), common + rand()];

var imagesOK = 0;
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) {
        callback();
      }
    };
    img.src = imageURLs[i];
  }
}
var ctx = main.getContext('2d');
var last = main.cloneNode(true).getContext('2d');
var next = main.cloneNode(true).getContext('2d');

var current = 0;
var op = 1;

function nextImage() {
  if (current++ >= imgs.length - 1) current = 0;
  op = 1;
  fade();
}

function fade() {
  op -= .01;
  
  last.clearRect(0, 0, main.width, main.height);
  last.globalAlpha = op;
  last.drawImage(imgs[current], 0, 0);

  next.clearRect(0, 0, main.width, main.height);
  next.globalAlpha = 1 - op;
  next.drawImage(imgs[(current + 1) % (imgs.length)], 0, 0);

  ctx.clearRect(0, 0, main.width, main.height);
  ctx.drawImage(last.canvas, 0, 0);
  ctx.drawImage(next.canvas, 0, 0);

  if (op <= 0) setTimeout(nextImage, 1500);
  else requestAnimationFrame(fade);
}
loadAllImages(fade);

<canvas id="main" width="500" height="300"></canvas>

Canvas 图像动画（淡入淡出）

Canvas Image Animation (Crossfade)

javascript

canvas

gsap