Писала код анимации по кадрам картинкам, почему не работает?

Question

[Варвара Косарева]

Добрый вечер!
Писала скриптик для простецкой анимации покадровой у разных картинок.
Есть несколько картинок. Нужно реализовать их анимацию с периодом 0,5 секунд.
Я написала функцию с аргументами кадра и количества кадров всего и пыталась вызвать его внутри имени картинки, чтобы отображать меняющиеся цифры. А картинки назвать в соответствии с ними. Ничего не вышло. =(

<script type="text/javascript">
function animator(allcadr,cadr){

if(cadr==allcadr){ cadr=1; }
else{ setTimeout(cadr++, 500);  }
return document.write(allcadr,"-",cadr);
}
</script>
<script type="text/javascript">

document.write("<img src=\"111- ",let a = animator(2,1);,".jpg\">");
</script>

И так пыталась заменить:

function animator(allcadr,cadr){

for(let i=0;i < allcadr;i++){
cadr += i;
return document.write(allcadr,"-",cadr);
}
}

Простите за быдлокодерство, давно не писала, так ещё и учусь только...)

Answer 1

[coderisimo]

1) вместо setInterval или setTimeout нужно использовать requestAnimationFrame . Почему? Гуглите )))
2) Проще использовать что-то готовое , типа - blaiprat.github.io/jquery.animateSprite , тогда для простых вещей не придется писать много кода. Посмотрите, там все просто и наглядно.
3) Почитайте про спрайты в анимации. Предыдущий пункт , как раз их и юзает.
4) Ну и .. да.. учите JS ))))) . Самый лучший ресурс на русском, ИМХО - https://learn.javascript.ru/css-transitions

Удачи ))

Answer 2

[Ihor Bratukh]

Мне кажется лучший способ для такой покадровой анимации это одна большая горизонтальная картинка которая вставляется на background с помощью css, а js нужен только для того чтобы изменять background-position.

Answer 3

[sunblossom]

Хотел расписать все ошибки, но мне лениво. Напишу просто свой вариант это задачи.

<script>
var frames = ["", "", ""]; // перечисление ссылок на картинки для кадров
var currentframe = 0; // текущая картинка

function NextFrame()
{
    if (currentframe == frames.length - 1)
    {
        currentframe = 0;
    }
    else
    {
        currentframe++;
    }

    document.getElementById("anim").src = frames[currentframe];
}

window.onload = function () { setInterval(function () { NextFrame(); }, 500); }
</script>
<img src="" id="anim" />

Понятия не имею, сработает или нет, но должно.

Comments

[Павел Корнилов]

window.onload = function () { setInterval( NextFrame, 500); }