Question

我看到了一个JQuery Shuffle Example和
我试图使用带有图像的HTML5和Canvas + CSS + JS来实现相同的功能。

但使用Canvas查找动画/绘图有点困难。

我只想创建与图像一样多的画布，然后尝试移动画布用于随机动画。

是否有任何库可以实现相同的目标。

任何人都可以帮助我。

修改：
这是我如何使用Jquery获得效果..（几个错误thr）我已经使用Jquery和一些实现了这种效果库......但它基本上是操纵CSS值...
我试图用基于画布的绘图apis做一些事情。

<!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>

全部谢谢。

Answer 1

如果你要为每个图像制作一个画布，那么它与CSS方法没有什么不同，这使它变得多余。但如果您要在非常大的画布上绘制它，并且如果您了解z-index和动画，那么这并不是很难实现。阅读this primer on canvas animation。

步骤如下：

使用new Image对象准备要绘制的所有图像并设置其src。
最多你要绘制的是一次两张图片。首先说，图像前面有图像1.首先绘制图像2，然后在图像上绘制图像1。（在第一帧中，您可能只需绘制图像1）
为图像1添加动画，使其远离图像2，绘图顺序与步骤2相同。
一旦足够远，请更改绘图顺序，以便先绘制图像1，然后绘制图像2.为图像1添加动画，使其靠近图像2，直到它位于图像2下方。
图像1位于图像2之下后，您可以将其与图像3交换并重复。

使用Html5的JQuery Shuffle效果[Canvas + CSS + JS]

1 个答案: