Question

是否存在从一个图像到另一个图像的变形动画的jQuery或Canvas代码。我需要这个。我搜索了很多但是没有结果。

Answer 1

我在很多项目中都使用过此插件，我认为你应该看看它：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>

Answer 2

如果您需要纯画布解决方案，可以使用不透明度（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>

使用jQuery变形图像

2 个答案: