Как показать изображение с анимацией из изображения PNG с помощью JavaScript? [как Gmail]

Question

Как показать изображение с анимацией из изображения PNG с помощью JavaScript? [как Gmail]

, Что Вам нравится использовать в качестве работы вокруг? Контейнерные объекты или Макросы? Вы чувствуете стоящий того?

канонический путь состоит в том, чтобы использовать метафункцию как таким образом:
template 
struct my_string_map {
    typedef std::map type;
};

// Invoke:

my_string_map::type my_str_int_map;
Это также используется в STL (allocator::rebind) и во многих библиотеках включая Повышение. Мы используем его экстенсивно в биоинформатическая библиотека .
Это чрезмерно увеличено в размере, но это - лучшие альтернативные 99% времени. Используя макросы здесь не стоит многих оборотных сторон.
(РЕДАКТИРОВАНИЕ: я исправил код для отражения соглашений Повышения/STL, как указано Daniel в его комментарии.)

26

javascript image animation png

задан Community 8 February 2017 в 14:17

4 ответа

Ответ CMS хорош, но есть также формат APNG (анимированный PNG), который вы можете использовать вместо него. Конечно, первый кадр (тот, который отображается даже в браузерах, не поддерживающих APNG) должен быть «конечным» кадром и просто указать, чтобы пропустить первый кадр в файле.

3

ответ дан 28 November 2019 в 06:21

Взгляните на это:
http://www.otanistudio.com/swt/sprite_explosions/ и http://www.alistapart.com/articles/sprites Ответ кроется внутри.

3

ответ дан 28 November 2019 в 06:21

Установите в качестве фонового изображения элемента первое изображение, затем используйте JavaScript для изменения изображения, изменяя стиль каждые x миллисекунд.

1

ответ дан 28 November 2019 в 06:21

Другие вопросы по тегам:

javascript image animation png

Похожие вопросы:

score 69 · Accepted Answer

Я оставляю вам примерный пример , чтобы вы могли получить начальную точку:

Я буду использовать простой элемент div с шириной и высота анимированного изображения, спрайт png как background-image и background-repeat установлен на no-repeat

CSS Требуется:

#anim {
  width: 14px; height: 14px;
  background-image: url(https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png);
  background-repeat: no-repeat; 
}

Требуется разметка:

<div id="anim"></div>

Уловка заключается в том, чтобы прокрутить спрайт фонового изображения вверх, используя свойство CSS background-position .

Нам нужно знать height анимированного изображения (чтобы знать, сколько мы будем прокручивать вверх каждый раз) и сколько раз прокручивать (сколько кадров будет иметь анимацию).

Реализация JavaScript:

var scrollUp = (function () {
  var timerId; // stored timer in case you want to use clearInterval later

  return function (height, times, element) {
    var i = 0; // a simple counter
    timerId = setInterval(function () {
      if (i > times) // if the last frame is reached, set counter to zero
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
      i++;
    }, 100); // every 100 milliseconds
  };
})();

// start animation:
scrollUp(14, 42, document.getElementById('anim'))

EDIT : Вы также можете установить свойства CSS программно, чтобы неНеобходимо определить любой стиль на вашей странице и создать функцию конструктора из приведенного выше примера, которая позволит вам одновременно отображать несколько анимаций спрайтов:

Использование:

var wink = new SpriteAnim({
  width: 14,
  height: 14,
  frames: 42,
  sprite: "https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png",
  elementId : "anim1"
});

var monkey = new SpriteAnim({
  width: 18,
  height: 14,
  frames: 90,
  sprite: "https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/monkey1.png",
  elementId : "anim4"
});

Реализация:

function SpriteAnim (options) {
  var timerId, i = 0,
      element = document.getElementById(options.elementId);

  element.style.width = options.width + "px";
  element.style.height = options.height + "px";
  element.style.backgroundRepeat = "no-repeat";
  element.style.backgroundImage = "url(" + options.sprite + ")";

  timerId = setInterval(function () {
    if (i >= options.frames) {
      i = 0;
    }
    element.style.backgroundPosition = "0px -" + i * options.height + "px";
     i++;
  }, 100);

  this.stopAnimation = function () {
    clearInterval(timerId);
  };
}

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

monkey.stopAnimation();

Посмотрите приведенный выше пример здесь .