web-dev-qa-db-fra.com

Animation de chargement simple dans la toile HTML5

Je cherche une animation simple de chargement d'image. Je voudrais trouver une solution courte et simple qui utilise uniquement le dessin sur la toile et le Javascript simple. 

S'il vous plaît aider

javascripthtml5-canvas
10
Jacob

Cet article: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations m'a aidé à créer ma propre animation. 

4
Jacob

J'utiliserais un fichier GIF de chargement généré par un outil en ligne tel que Ajaxload.info ou Preloaders.net et le placerais dans une balise div que vous pouvez basculer devant l'élément canvas.

Pour plus de scripts de générateur de spinner, voir 5 Chargement en ligne AJAX Outils de générateur de spinner . 

J'espère que cela t'aides! 

9
Zorayr
 drawProgressIndicator: function(){

    var can = this.imgCanvas;
    var ctx = this.imgCtx;

    ctx.save();
    ctx.clearRect(0, 0, can.width, can.height);
    ctx.translate(can.width / 2, can.height / 2);
    ctx.scale(0.4, 0.4);
    ctx.rotate(-Math.PI / 2);
    ctx.strokeStyle = "black";
    ctx.fillStyle = "white";
    ctx.lineWidth = 8;
    ctx.lineCap = "round";
    var step = this.animationStep;
    ctx.fillStyle = "black";
    ctx.save();
    ctx.rotate(step * Math.PI / 30);
    ctx.strokeStyle = "#33ccff";
    ctx.fillStyle = "#33ccff";
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(68, 0);
    ctx.stroke();
    ctx.fill();
    ctx.restore();
    ctx.beginPath();
    ctx.lineWidth = 14;
    ctx.strokeStyle = 'gray';
    ctx.arc(0, 0, 80, 0, Math.PI * 2, true);
    ctx.stroke();
    ctx.restore();
    this.animationStep += 1;
},
5
Jacob

essayez celui-ci .. http://jsfiddle.net/swarnendu/Ky25d/ 

<html>
<head>
<style type="text/css">

#layer6,#layer7,#layer8{position: absolute;left: 0px;top: 0px;}
.anim_8{-webkit-animation-duration: 1.5s;-webkit-animation-iteration-count:infinite;-webkit-transform-Origin:25px 25px;-webkit-animation-name:animation_6;-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear; -moz-animation-duration: 1.5s; -moz-animation-name: animation_6;  -moz-transform-Origin:25px 25px; -moz-animation-iteration-count:infinite ; 
-o-animation-timing-function: linear; -o-animation-duration: 1.5s; -o-animation-name: animation_6;  -o-transform-Origin:25px 25px; -o-animation-iteration-count:infinite ;}
@-webkit-keyframes animation_6{
0%{ -webkit-transform:  rotate(0deg)  ;}     
100%{ -webkit-transform:  rotate(360deg)  ;} 
}
@-o-keyframes animation_6{
0%{ -o-transform:  rotate(0deg)  ;}     
100%{ -o-transform:  rotate(360deg)  ;} 
}

@-moz-keyframes animation_6{
0%{ -moz-transform:  rotate(0deg)  ;}     
100%{ -moz-transform:  rotate(360deg)  ;} 
}       

</style> 

<script type="text/javascript">
window.addEventListener("load",draw_canvas,false) ;
function draw_canvas()
{
var c6=document.getElementById("layer6");var ctx6=c6.getContext("2d");  ctx6.fillStyle="#FF000
4
Swarnendu Paul

Voici une animation qui utilise uniquement javascript et canvas - animation Elle a été créée à l’aide de l’application canvimation . Les fichiers d’aide correspondants sont ici .

Cependant, comme il n’utilise pas d’images et que ce n’est pas simple, ce n’est peut-être pas ce que vous recherchez.

Le seul autre moyen que je puisse envisager serait d'utiliser context.drawImage avec setTimeout pour charger une série d'images l'une après l'autre.

OU vraiment, utilisez simplement une image gif dans le canevas comme dans le code ci-dessous

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript">
            function main() {
               img=document.getElementById("anigif");
               Ani=$("ani");
               Ani.width=500;
               Ani.height400;
               Ani.ctx=Ani.getContext('2d');
               Ani.ctx.drawImage(img,0,0)
            }
        </script>
    </head>
    <body onload="main()">
        <img id="anigif" src="http://www.mathworks.com/matlabcentral/fx_files/21944/2/DancingPeaks.gif">
        <canvas id="ani"></canvas>
    </body>
</html>
3
jing3142

Si vous recherchez une animation de chargement simple avec la toile html5, la voici .. http://jsfiddle.net/swarnendu/urV4p/

<html>
<head>
    <style type="text/css">
        #d1,#ci1,#ci2,#ci3{position:absolute;top:0px;left:0px}            

        .cc2{   -webkit-animation-duration: 1s; -webkit-animation-name: loading2w; -webkit-animation-iteration-count:infinite;  -moz-animation-duration: 1s; -moz-animation-name: loading2m; -moz-animation-iteration-count:infinite;   -o-animation-duration: 1s; -o-animation-name: loading2o; -o-animation-iteration-count:infinite;}
        .cc3{   -webkit-animation-duration: 1s; -webkit-animation-name: loading3w; -webkit-animation-iteration-count:infinite;  -moz-animation-duration: 1s; -moz-animation-name: loading3m; -moz-animation-iteration-count:infinite;   -o-animation-duration: 1s; -o-animation-name: loading3o; -o-animation-iteration-count:infinite;}            
        @-webkit-keyframes loading2w{
            0%{visibility:hidden;} 
            33%{visibility:hidden;} 
            33.33%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
        @-moz-keyframes loading2m{
            0%{visibility:hidden;} 
            33%{visibility:hidden;} 
            33.33%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
        @-o-keyframes loading2o{
            0%{visibility:hidden;} 
            33%{visibility:hidden;} 
            33.33%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
        @-webkit-keyframes loading3w
        {
            0%{visibility:hidden;} 
            66.33%{visibility:hidden;} 
            66.67%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
        @-moz-keyframes loading3m
        {
            0%{visibility:hidden;} 
            66.33%{visibility:hidden;} 
            66.67%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
        @-o-keyframes loading3o
        {
            0%{visibility:hidden;} 
            66.33%{visibility:hidden;} 
            66.67%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
    </style>
    <script type="text/javascript">
        window.addEventListener("load",win_load,false);
        function win_load()
        {                
            var c10=document.getElementById("ci1");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText("Loading .",5,15);      
            var c10=document.getElementById("ci2");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText("               .",5,15);   
            var c10=document.getElementById("ci3");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText("                .",5,15);      
        }
    </script>
</head>
<body>
    <div id="d1">
        <canvas id="ci1" class="cc1" width="100" height="100"></canvas>
        <canvas id="ci2" class="cc2" width="100" height="100"></canvas>
        <canvas id="ci3" class="cc3" width="100" height="100"></canvas>
    </div>
</body>

0
Swarnendu Paul