使用 jQuery 变形图像 [关闭]

Question

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

Answer 1

如果您想要一个纯画布解决方案，您可以使用不透明度 (alpha) 来实现您的效果：

• 从 2 张相互重叠的图片开始，
• 从图像#1 完全不透明和图像#2 完全透明开始，
• 在动画循环中，慢慢降低图像#1 的不透明度并增加图像#2 的不透明度，
• 您可以使用 context.globalAlpha 设置在画布中绘制的图像的不透明度 (alpha)。

这是示例代码和演示：

$("#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>

Answer 2

我在很多项目中都使用过这个插件，我认为你应该看看它：http://jquery.malsup.com/cycle/

你会看到淡入淡出选项

这里是图书馆：

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

这是一个例子：

$('#fade').cycle();

还有html

<div class="pics" id="fade">
        <img width="200" height="200" src="http://malsup.github.com/images/beach1.jpg" >
        <img width="200" height="200" src="http://malsup.github.com/images/beach2.jpg" >
        <img width="200" height="200" src="http://malsup.github.com/images/beach3.jpg">
    </div>