使用 Html5 的 JQuery 随机播放效果 [Canvas +CSS +JS]
Posted
技术标签:
【中文标题】使用 Html5 的 JQuery 随机播放效果 [Canvas +CSS +JS]【英文标题】：JQuery Shuffle Effect using Html5 [Canvas +CSS +JS] 【发布时间】：2011-03-30 23:21:46 【问题描述】：我看到了一个 JQuery Shuffle Example 和 我试图使用 html5 和 Canvas + CSS + JS 来实现相同的图像。
但是使用 Canvas 找到动画/绘图有点困难。
我刚刚想到创建与图像一样多的画布，然后尝试移动画布 用于随机播放动画。
是否有任何库可以实现相同的目标。
任何人都可以帮助我。
编辑： 这是我使用 Jquery 获得效果的方法 ..（很少有错误） 我已经使用 Jquery 和一些实现了效果 库..但它基本上是通过操纵 CSS 值... 我试图用基于画布的绘图 api 做一些事情。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
canvas
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height:600px;
.easing_example
border:1px solid #777777;
padding:0.5em;
position:relative;
width:4em;
img display:none;
.landscape #ps_container width: 1000px; height: 600px;
#ecard-wrapper margin: 20px auto; width: 980px;
#ps_container border: 1px solid #c2c2c2; margin: 25px 20px 0 0; overflow: hidden; position: relative; float: left;
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript">
</script>
<script src="js/jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="js/jquery-css-transform.js" type="text/javascript">
</script>
<script src="js/jquery-animate-css-rotate-scale.js" type="text/javascript">
</script>
<script type="text/javascript">
var viewport = obj: null, width: 0, height: 0 ;
var timerId=null;
var timeInterval=10;
var factor=5;
var topZIndex=0;
var currentCanvasCount=0;
function CVImage()
this.ImageSource = null;//string
this.size = x: 0, y: 0 ;
this.position = x: 0, y: 0;
this.Rotate = 0;
this.Canvas = null;
this.Context = null;
this.Image =null;
CVImage.prototype.draw = function()
var img = new Image();
img.src = this.ImageSource;
this.Image=img;
var context = this.Context;
context.drawImage(img,this.position.x - this.size.x /2,this.position.y - this.size.y /2,
this.size.x, this.size.y);
CVImage.prototype.update =function()
var context = this.Context;
context.save();
context.clearRect(0,0, this.Canvas.width, this.Canvas.height);
context.translate(this.size.x/2,this.size.y/2);
context.rotate(this.Rotate * Math.PI/180);
this.draw();
context.restore();
CVImage.prototype.slideOut =function()
var context = this.Context;
var canvas = this.Canvas;
$(canvas)
.animate(
left: 10,top: -20,
duration: 700,
easing: 'easeOutBack'
)
.animate(
rotate: '20deg',top:-250,left:375,
duration: 1000,
easing: 'easeOutBack',
complete : function()topZIndex--;$(this).css("z-index", topZIndex);
)
.animate(
top:0,left: 0,rotate: '0deg',
duration: 1000,
easing: 'easeOutBack',
complete:continueAnimation
);
function continueAnimation()
if( currentCanvasCount >0)
var canvasObj = CanvasArr[currentCanvasCount-1];
if(canvasObj!=null)
canvasObj.slideOut();
currentCanvasCount--;
else if(currentCanvasCount == 0)
startShuffle();
$(document).ready(function()
init();
$("#start_flip").click( function()
startShuffle();
);
);
var CanvasArr = new Array();
function startShuffle()
var i =0;
currentCanvasCount=CanvasArr.length;
continueAnimation();
function init()
var i = 0;
viewport.obj = $('#ps_container');
viewport.width = viewport.obj[0].clientWidth;
viewport.height = viewport.obj[0].clientHeight;
var images = $(".images_collection img");
for (i = 0; i < images.length ; i++)
var cid = "canvas_" + ""+i;
var canvas = document.getElementById(cid);
canvas.width = viewport.width;
canvas.height = viewport.height;
var ctx = canvas.getContext('2d');
var cvimg = new CVImage();
cvimg.ImageSource = images[i].src;
cvimg.size.x = parseInt(images[i].width);
cvimg.size.y = parseInt(images[i].height);
cvimg.position.x = 350;
cvimg.position.y = 250;
cvimg.Canvas = canvas;
cvimg.Context = ctx;
CanvasArr.push(cvimg);
DrawCanvas();
//timerId = setInterval(DrawCanvas,timeInterval);
function DrawCanvas()
var i =0;
var canv =null;
for(i=0;i<CanvasArr.length;i++)
canv = CanvasArr[i];
canv.update();
</script>
</head>
<body>
<a href="#" id="start_flip">START SHUFFLE</a>
<a href="#" id="stop_flip">STOPP SHUFFLE</a>
<div class="easing_example" id="easing_example_3" style="left: 0px;">Click Me</div>
<div id="images_collection" class="images_collection" style="display: none">
<a href="#">
<img src="images/Chichen Itza.jpg" /></a> <a href="#">
<img src="images/Great Wall of China.jpg" /></a> <a href="#">
<img src="images/Machu Picchu.jpg" /></a>
</div>
<div id="ecard-wrapper" class="landscape">
<div id="ps_container" style="display: block; position: fixed; top: 150px; left: 80px">
<canvas id="canvas_0" ></canvas>
<canvas id="canvas_1" ></canvas>
<canvas id="canvas_2" ></canvas>
<canvas id="canvas_3" ></canvas>
</div>
</div>
</body>
</html>
谢谢大家。
【问题讨论】：
您有什么理由尝试重新实现？如果您正在寻找实现此效果的库，为什么不直接使用您链接到的 JQuery 实现？ 好吧，我已经使用 Jquery 和一些库实现了效果.. 但它基本上是通过操纵 CSS 值......我试图用基于画布的绘图 api 做一些事情。 【参考方案1】：如果您要为每张图片制作一个画布，那么它与 CSS 方法没有什么不同，因此它是多余的。但是，如果您要在一个非常大的画布上绘制它，并且如果您了解 z-index 和动画，那么实现这一点并不难。阅读this primer on canvas animation。
步骤如下：
-
准备所有要使用
new Image 对象绘制的图像并设置其src。
一次最多只能绘制两个图像。一开始说，你在图像 2 前面有图像 1。首先绘制图像 2，然后在其顶部绘制图像 1。 （在第一帧，可能你只需要画图1）
动画图像 1 使其远离图像 2，绘制顺序与步骤 2 相同。
一旦足够远，更改绘制顺序，先绘制图像 1，然后绘制图像 2。为图像 1 设置动画，使其更靠近图像 2，直到它位于其下方。
一旦图像 1 在图像 2 之下，您可以将其与图像 3 交换并重复。
【讨论】：
"一次最多只能画两个图像。" - 不正确，请尝试快速连续多次单击示例页面中的方块。 如果你理解了机制，实现两个以上的图像是很简单的。您只需要添加更多层。以上是关于使用 Html5 的 JQuery 随机播放效果 [Canvas +CSS +JS]的主要内容，如果未能解决你的问题，请参考以下文章