У меня есть папка, полная изображений. Каждое изображение сопровождается лошадью. Я хочу дать пользователю намек на то, что лошадь работает, отображая изображения последовательно и быстро.Сделать лошадь похожей на ее работу - JQuery
Может ли один предложить хорошую библиотеку или подход для достижения выше
Я знаю, что вы задали этот вопрос, и помечать его Javascript и JQuery, но так как вы спросили, что лучший подход:
Лучший подход должен заключаться в том, чтобы сделать изображения в лист спрайта (то есть одно комбинированное изображение) и использовать этот лист с соответствующим фоном для элемента. С помощью анимации CSS3 вы можете изменить положение фона, создавая иллюзию движения изображения.
Итак, не используйте n количество изображений, используйте одно изображение, в котором вы собрали все кадры.
Скажите, что каждый кадр равен 100x100 px, и у вас есть 10 кадров. Это даст вам лист спрайтов 100 * 1000 px. Установите эти изображения в качестве фона на элемент:
.running-horse {
width: 100px;
height: 100px;
background: url(sprite.jpg) top left;
animation: runningHorse 1s steps(10) infinite;
}
@keyframes runningHorse {
to {
background-position: -1000px;
}
}
steps(10) в свойстве анимации, что делает его прыгать к следующему изображению, вместо того, чтобы скольжение спрайтов листа.
Вы можете создать анимированный gif. Serverside: http://stackoverflow.com/questions/9417762/make-an-animated-gif-with-phps-imagemagick-api – Steve
Для этого вам нужно просто google. Этот сайт предназначен для помощи в конкретных проблемах с кодом, а не для написания его или создания библиотек. – Archer