使用jQuery变形图像

Question

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

Answer 1

如果你想要一个纯粹的帆布解决方案，您可以使用不透明度（阿尔法）来实现你的效果：对彼此顶部2个图像

• 开始，
• 开始图像＃1完全不透明且图像＃2完全透明，
• 在动画循环中，缓慢减少图像＃1的不透明度并增加图像＃2的不透明度，
• 您可以使用以下代码设置在画布中绘制的图像的不透明度（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>

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>