Не работает анимация героя на основе кадров в jQuery

0

Я пытаюсь создать героя (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>

Благодарю.

Теги:

1 ответ

1
Лучший ответ

Первое, что я рекомендую, - предварительно загрузить все ваши изображения.

 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 своими собственными значениями. Как только изображения будут предварительно загружены, любая латентность сети будет удалена, а ваша анимация должна быть более гладкой. Дайте мне знать, если этого недостаточно!

Поделиться
  • 0
    Решил сделать это напрямую с анимированными GIF-файлами, дело в том, что да, он отлично работает, но анимация прерывистая, почему это происходит? из-за этого? я имею в виду, мне нужно предварительно загрузить анимированные GIF-файлы? Спасибо за ответ тоже :)
  • 0
    обновил мой код, чтобы вы могли видеть, как он работает ... но анимация все еще становится прерывистой, потому что я не использую img_obj.src? : /
Показать ещё 11 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню