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