Canvas图像动画（Crossfade）

Question

使用HTML5画布我想加载图像并创建一个“淡入淡出”效果，第一个图像淡入视图，然后在短暂延迟后，第二个图像淡入第一个图像的顶部等

在这个论坛上的类似问题的答案的帮助下，我有2个单独的代码工作位......一个加载图像数组和第二个动画“淡入”效果。我的问题是，我不知道如何结合这两个脚本来加载一个图像数组，并且还有阵列中的每个图像在加载时都会淡入。

这里有2个独立的脚本我有工作：

负荷的形象数组帆布：

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和使用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>