Я пытаюсь создать героя (Reptile from MK) для перемещения назад, вперед, утки и т.д. По ключевым событиям. Но когда я пытаюсь перебрать определенное количество фотографий, чтобы сделать движение, это своего рода ошибки: S есть ли другой хороший подход? или что я делаю неправильно?
Все движение любопытно прослушивается:/есть ли способ заставить его двигаться плавно? Картинки тоже не работают так хорошо, иногда пропускают несколько снимков или прогулки с той же картиной в течение нескольких секунд.
Здесь мой код, я добавлю все в один и тот же HTML:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
#reptile_wrapper {
position:relative;
}
</style>
</head>
<body>
<div id="reptile_wrapper">
<img src="img/0.png"/>
</div>
<script>
/* Preload all the images and gifs */
var img_list, img_count, base_str, img_obj, i, prefix_str, suffix_img_str, suffix_gif_str;
img_list = [ 'd01', 'd02'];
gif_list = ['reptile_walk_forward', 'reptile_walk_backward', 'reptile_idle'];
prefix_str = 'img/';
suffix_img_str = '.png';
suffix_gif_str = '.gif';
img_count = img_list.length;
for ( i = 0; i < img_count; i++ ) {
base_str = img_list[ i ];
img_obj = new Image();
img_obj.src = prefix_str + base_str + suffix_img_str;
}
gif_count = gif_list.length;
for ( i = 0; i < gif_count; i++ ) {
base_str = gif_list[ i ];
img_obj = new Image();
img_obj.src = prefix_str + base_str + suffix_gif_str;
}
/* End of preloading images and gifs */
var duckImages = ["d01", "d02"];
var posx = 10;
reptileIdleAnimation();
$('body').keydown(function(event) {
switch(event.which) {
// D
case 68:
posx += 5;
$("#reptile_wrapper img").attr('src', 'img/reptile_walk_forward.gif')
.parent().css({left: posx+'px'});
break;
// A
case 65:
posx -= 5;
$("#reptile_wrapper img").attr('src', 'img/reptile_walk_backward.gif')
.parent().css({left: posx+'px'});
break;
// S
case 83:
$.each(duckImages, function( index, value ) {
var myAnim = setInterval(function(){
$("#reptile_wrapper img").attr('src', 'img/' + value + '.png')
.parent().css({"top": "40px"});
clearInterval(myAnim);
}, 200);
});
break;
default:
reptileIdleAnimation();
break;
}
})
.keyup(function() {
reptileIdleAnimation();
});
function reptileIdleAnimation() {
$("#reptile_wrapper img").attr('src', 'img/reptile_idle.gif');
}
</script>
</body>
</html>
Благодарю.
Первое, что я рекомендую, - предварительно загрузить все ваши изображения.
var img_list, img_count, base_str, img_obj, i, prefix_str, suffix_str;
img_list = [ 'one', 'two', 'three' ];
prefix_str = 'http://myserver.com/images/';
suffix_str = '.png';
img_count = img_list.length;
for ( i = 0; i < img_count; i++ ) {
base_str = img_list[ i ];
img_obj = new Image();
img_obj.src = prefix_str + base_str + suffix_str;
}
Конечно, вам нужно будет заменить img_list, prefix_str и suffix_str своими собственными значениями. Как только изображения будут предварительно загружены, любая латентность сети будет удалена, а ваша анимация должна быть более гладкой. Дайте мне знать, если этого недостаточно!