Форум

Баян · #1 (**permalink**) 27.09.2013, 15:29

Добрый день!

Я делаю анимацию, меняя у Image src.
Есть 24 кадра - png-файла, каждый весит порядка 40Кб.
Каждые ~(1/24 секунды) я выставляю src на очередной кадр.

В FireFox изображение "моргает" (в других браузерах работает более-менее нормально).
На 3-х компах пробовал: 7-ка и XP.
Обновление версии, включение/выключение аппаратного ускорения не помогает...

Я скачал кадры на свой компьютер, сделал загрузку оттуда - ситуация не улучшилась.

Даже когда поставил задержку между кадрами в секунду, всё равно какое-то белое мерцание есть ...

Что здесь может быть?
Куда копать?

P.S. Наверняка, анимация сменой src у Image не лучший вариант.
Но я сильно ограничен выбором средств.
Есть фреймы в виде png, есть js, в который я "внедряю" свой объект.

Спасибо.

Яростный Меч · #2 (**permalink**) 27.09.2013, 15:35

Сообщение от Баян

Есть 24 кадра - png-файла, каждый весит порядка 40Кб.

думаю, можно упаковать в одну "длинную" картинку (css спрайт), поместить ее в background-image и менять background-position

Баян · #3 (**permalink**) 27.09.2013, 15:53

Сообщение от Яростный Меч

думаю, можно упаковать в одну "длинную" картинку (css спрайт), поместить ее в background-image и менять background-position

Спасибо, попробую запрототипировать - вдруг получится.

Такая идея с самого начала была.
Надеялись, что один большой png будет весить существенно меньше чем 24 похожих друг на друга кадра в сумме.
Поэкспериментировал - где-то меньше, но не кардинально.
Зато ждать надо пока всё это загрузится, прежде чем первый кадр показать. Поэтому тогда идею отклонили...

Баян · #4 (**permalink**) 27.09.2013, 18:12

Написал проигрывание анимации изменением backgroundPositionY.
В IE, Opera работает, а в том самом FireFox - нет.
Судя по alert'у, backgroundPositionY устанавливается, но картинка не меняется.
Такое ощущение, что я какую-то галочку в этом FF не включил...

<html>
<head><title>Roll div 300</title></head>
<body width = 100 height = 100>
<div id="above_body" style="width:1600px; height:600px; background-image: url(roll_24.png); background-position: 0px 0px;"/>
<script type="text/javascript" >
    var node = document.getElementById("above_body");
    node.style.backgroundPositionY = 300;
    alert("backgroundPositionY = " + node.style.backgroundPositionY);
   //alert выдаёт 300, а картинка - не сдвинута. Только в FF
</script>
</body>
</html>

Яростный Меч · #5 (**permalink**) 27.09.2013, 19:00

node.style.backgroundPosition = '0px 300px';

Баян · #6 (**permalink**) 27.09.2013, 23:47

Спасибо!
Так работает и мерцания вроде нет, кажется.
Пока на прототипе, надеюсь и по-настоящему тоже нормально будет.

Форум

Справочник

Discord чат

Курсы javascript