3
Я видел JQuery Перемешать Example и
Я пытался реализовать то же самое с помощью HTML5 и Canvas + CSS + JS с изображениями.JQuery Перемешать Эффект использования html5 [Canvas + CSS + JS]
но поиск анимация/рисунок используя Canvas бит сложно.
У меня появилась идея создать столько изображений, сколько изображений, а затем попытаться переместить холст для анимации в случайном порядке.
Есть ли библиотеки для достижения того же.
Любой может помочь мне с тем же.
Edit:
Вот как я получил эффект, используя Jquery .. (несколько ошибок THR) я достиг эффекта с помощью Jquery и некоторые libraries..but это в основном Чет манипулируя значения CSS ...
Я пытался сделать что-то только с рисованием на основе холста.
<!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" alt="" /></a> <a href="#">
<img src="images/Great Wall of China.jpg" alt="" /></a> <a href="#">
<img src="images/Machu Picchu.jpg" alt="" /></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" height="800" width="600" ></canvas>
<canvas id="canvas_1" height="800" width="600" ></canvas>
<canvas id="canvas_2" height="800" width="600" ></canvas>
<canvas id="canvas_3" height="800" width="600" ></canvas>
</div>
</div>
</body>
</html>
Спасибо всем.
Есть ли причина, по которой вы пытаетесь выполнить повторную реализацию? Если вы ищете библиотеки для достижения этого эффекта, почему бы просто не использовать реализацию JQuery, на которую вы ссылаетесь? – Ben
Ну, я достиг эффекта с помощью JQuery и некоторых библиотек. , но это в основном управляет значениями CSS ... Я пытался что-то сделать, используя только рисование на основе холста. – Amitd