Зробіть сценарій кращим. Дим недостатньо згладжується

Я створив сценарій для анімації диму. Я анімував три PNG-файли. Ці файли PNG є файлами з зображеннями диму.

Але іноді сценарій трохи переривчастий, а анімація диму не є рівною. Іноді при перезавантаженні диму анімація не є рівною.

Як вирішити проблему так, щоб анімація диму працювала плавно.

Ви можете побачити сценарій і демонстрацію на jsfiddle (можна редагувати):

Сценарій на jsfiddle

8
Ви бачите переривчастість у всіх браузерах або, зокрема, у веб-переглядачі? Я не бачу чіткості у Firefox 7, Linux.
додано Автор stivlo, джерело
дивовижний пан супер !!!
додано Автор abhijit, джерело
@rkw: gif дозволить лише двійкову прозорість, яка, безумовно, буде виглядати гірше.
додано Автор Joachim Sauer, джерело
Ви можете: 0. це виглядає чудово :) 1. Створіть всі ваші divs тільки один раз на початку і повторно використовуйте їх; 2. від'єднати поточний div замість його видалення; 3. кешувати димовий елемент;
додано Автор Irishka, джерело
Мені подобається ефект. Я бачив тільки один раз, але це було дуже коротко. Чи є причина, по якій ви не просто накладаєте анімований gif?
додано Автор rkw, джерело
Я тільки побачив деяку choppiness коли дим sprites вантажу.
додано Автор Leonardo Herrera, джерело
@Irishka: Я намагався кешувати свій димовий елемент; це не вирішує випадкову ікоту анімації.
додано Автор weir, джерело

1 Відповіді

Дуже круто.

Використання transform ( -webkit-transform , -moz-transform і -o-transform ) для анімації Рух замість абсолютного позиціонування за допомогою bottom дозволить більшості браузерів ударити в апаратне прискорення, що повинно подбати про мерехтіння.

Про IE я не знаю, хоча ...

1
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram