jquery - 使用 jQuery 变形图像

Question

已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。

---

我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便用事实和引文来回答。

已关闭 8 年前。

Improve this question

是否有任何 jQuery 或 Canvas 代码可用于从一张图像到另一张图像的变形动画。我正需要这个。我搜索了很多，但结果为空。

Answer 1

如果您想要纯 Canvas 解决方案，您可以使用不透明度(alpha)来实现您的效果:

• 从 2 张图像开始，
• 开始时图像#1 完全不透明，图像#2 完全透明，
• 在动画循环中，慢慢降低 image#1 的不透明度并增加 image#2 的不透明度，
• 您可以使用以下命令设置在 Canvas 中绘制的图像的不透明度(alpha):context.globalAlpha。

这里是示例代码和演示:

$("#fade").hide();

var imageURLs=[];  // put the paths to your images here
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");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg");
loadAllImages();
//
function loadAllImages(){
  for (var i=0; i<imageURLs.length; i++) {
    var img = new Image();
    imgs.push(img);
    img.onload = function(){ 
      imagesOK++; 
      if (imagesOK>=imageURLs.length ) {
        $("#fade").show();
        ctx.drawImage(imgs[0],0,0);
      }
    };
    img.onerror=function(){alert("image load failed");} 
    img.crossOrigin="anonymous";
    img.src = imageURLs[i];
  }      
}


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var fadeOutIndex=imgs.length-1;
var fadeInIndex=0;
var fadePct=0;

function animateFade(){
  if(fadePct>100){return;}
  requestAnimationFrame(animateFade);
  draw(imgs[fadeInIndex],fadePct/100);
  draw(imgs[fadeOutIndex],(1-fadePct/100));
  fadePct++;
}

function draw(img,opacity){
  ctx.save();
  ctx.globalAlpha=opacity;
  ctx.drawImage(img,0,0);
  ctx.restore();
}

$("#fade").click(function(){
  fadePct=0;
  if(++fadeOutIndex == imgs.length){fadeOutIndex=0;}
  if(++fadeInIndex == imgs.length){fadeInIndex=0;}
  animateFade();
});

body{ background-color: ivory; }
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="fade">Fade to next Image</button><br>
<canvas id="canvas" width=204 height=204></canvas><br>