Я ищу простую анимацию загрузки изображений. Я хотел бы найти короткое и простое решение, которое использует только рисование на холсте и простой Javascript.

Пожалуйста помоги

14
Jacob 30 Янв 2013 в 11:30

7 ответов

Лучший ответ

Эта статья: https://developer.mozilla.org/ ru-ru / docs / Web / Guide / HTML / Canvas_tutorial / Basic_animations помогли мне нарисовать собственную анимацию.

4
markgz 16 Сен 2013 в 23:12

Вот анимация, которая использует только javascript и canvas - анимация была создана с помощью приложения < a href = "http://canvimation.github.com/" rel = "nofollow"> canvimation , файлы помощи для этого являются здесь.

Однако, поскольку он не использует изображения и это не просто, это может быть не то, что вы ищете.

Единственный другой способ, которым я мог бы подумать, - это использовать context.drawImage вместе с setTimeout для загрузки серии изображений за другой

ИЛИ на самом деле просто используйте изображение GIF на холсте, как в коде ниже

<!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
Lukasz Koziara 1 Апр 2014 в 14:34
 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;
},
6
Jacob 13 Фев 2013 в 07:43

Попробуй это .. 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 1 Фев 2013 в 14:44

Если вы ищете простую анимацию загрузки с помощью html5 canvas, то вот она ... 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 1 Фев 2013 в 20:41

Вот моя загрузка, у которой есть 2 круга, используя холст

var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
canvas.style.backgroundColor = "black";
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");

var bigCircle = {
    center: {
        x: 100,
        y: 100
    },
    radius: 50,
    speed: 4
}

var smallCirlce = {
    center: {
        x: 100,
        y: 100
    },
    radius: 30,
    speed: 2
}

var progress = 0;

function loading() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    progress += 0.01;
    if (progress > 1) {
        progress = 0;
    }

    drawCircle(bigCircle, progress);
    drawCircle(smallCirlce, progress);

    requestAnimationFrame(loading);
}
loading();

function drawCircle(circle, progress) {
    ctx.beginPath();
    var start = accelerateInterpolator(progress) * circle.speed;
    var end = decelerateInterpolator(progress) * circle.speed;
    ctx.arc(circle.center.x, circle.center.y, circle.radius, (start - 0.5) * Math.PI, (end - 0.5) * Math.PI);
    ctx.lineWidth = 3;
    ctx.strokeStyle = "white";
    ctx.fill();
    ctx.stroke();
}

function accelerateInterpolator(x) {
    return x * x;
}

function decelerateInterpolator(x) {
    return 1 - ((1 - x) * (1 - x));
}

Надеюсь, это поможет

1
Phan Van Linh 25 Ноя 2019 в 09:43

Я бы использовал загрузочный GIF, сгенерированный онлайн-инструментом, таким как Ajaxload.info или Preloaders.net и поместите его в тег div, который вы можете переключать перед элементом canvas.

Дополнительные сценарии генератора блесны см. В 5 онлайн-загрузке AJAX Spinner Generator Tools .

Надеюсь это поможет!

10
Zorayr 12 Фев 2015 в 18:53