3
JQuery Shuffle을 보았습니다 Example 및
HTML5와 Canvas + CSS + JS를 사용하여 이미지를 구현하려고했습니다.Html5 [Canvas + CSS + JS]를 사용한 JQuery 셔플 효과
하지만 Canvas 비트를 사용하여 애니메이션/그림 찾기가 어려움.
나는 캔버스를 이미지만큼 캔버스를 생성 한 다음 셔플 애니메이션을 위해 캔버스 을 움직이려고했습니다.
동일한 기능을 수행 할 라이브러리가 있습니까?
누구나 나를 도울 수 있습니다.
편집 : 여기
내가 JQuery와 .. (몇 가지 버그 THR) 내가 jQuery를 사용하여 효과를 달성하고 libraries..but 일부 는 기본적으로 THR 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" 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 값을 조작하는 것입니다 ... 나는 단지 캔버스 기반 드로잉 apis로 무언가를하려했습니다. – Amitd