Почему спрайтная анимация jQuery воспроизводит дополнительный кадр на втором указателе мыши? - PullRequest
Новая
       13

Почему спрайтная анимация jQuery воспроизводит дополнительный кадр на втором указателе мыши?

2 голосов
/ 22 июня 2011

Я работаю со спрайтами CSS и плагином jQuery спрайт .

У меня есть изображение Super Mario, и когда я его переверну, я бы хотел, чтобы анимация воспроизводилась. Когда вы убираете мышь от Super Mario (который является элементом <div>), я бы хотел, чтобы анимация воспроизводилась в обратном направлении по сравнению с первоначальным местом, где она была запущена.

Вот что у меня есть: 

<!DOCTYPE html>
<html>
<head>
    <title>Mario Planet Spritely Nav</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="jquery.spritely-0.5.js"></script>
    <script>
        $(document).ready(function() {
            $('#mario').hover(
                function() {
                    $('#mario').sprite({
                        fps: 2,
                        no_of_frames: 6,
                        play_frames: 6
                    });
                },
                function() {
                    $('#mario').sprite({
                        fps: 2,
                        no_of_frames: 6,
                        play_frames: 5,
                        rewind: true
                    });
                }
            );
        });
    </script>
    <style>
        #mario {
            position: absolute;
            width: 40px;
            height: 52px;
            background: transparent url(mh.png);
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="mario"></div>
</body>
</html>

У меня намеренно медленный fps, поэтому я могу попытаться выяснить, что здесь происходит. По некоторым причинам, первое наведение и мышка работают отлично. Но затем, во время второго зависания, происходит нечто странное. Похоже, для воспроизведения дополнительного кадра. Я не понимаю почему.

Вот мое mh.png изображение (у меня нет текущего веб-сервера, чтобы показать живое демо):

mh.png

Ребята, вы понимаете, почему это происходит?

Спасибо.

Ответы [ 2 ]

5 голосов
/ 22 июня 2011

Я являюсь одним из разработчиков Sprite - возможно, я могу помочь!

Это происходит из-за различных значений play_frames при запуске Sprite.По общему признанию это довольно смущает.Я попытаюсь объяснить.

Когда вы первоначально вызываете спрайт, он будет воспроизводить первые 6 кадров.Когда вы снова наведите курсор мыши, он вернется на 5 кадров.Пока все хорошо.Но вещи не синхронизируются, и поэтому, когда вы играете в следующие 6, вы на один кадр дальше, чем ожидалось.

Следующее решение должно исправить это для вас, 

var play_frames = 6;

$('#mario').hover(
    function() {
        $('#mario').sprite({
            fps: 2,
            no_of_frames: 6,
            play_frames: play_frames
        });
        play_frames = 5;
    },
    function() {
        $('#mario').sprite({
            fps: 2,
            no_of_frames: 6,
            play_frames: 5,
            rewind: true
        });
    }
);

Редактировать: Я только что понял, что опубликованное ранее решение более или менее одинаково!Не уверен, почему это не сработает для вас.Это работает для меня.

3 голосов
/ 22 июня 2011

Короткий ответ на эту конкретную проблему заключается в том, что вам нужно установить 5 кадров для события mouseover и mouseout после первого наведения мыши. 

var frms = 6;

$('#mario').hover(
    function() {
        $('#mario').sprite({
            fps: 2,
            no_of_frames: 6,
            play_frames: frms
        });
        frms  = 5;
    }, function() {
        $('#mario').sprite({
            fps: 2,
            no_of_frames: 6,
            play_frames: frms,
            rewind: true
        });
    }
);

Это избавит от «лишнего кадра». Однако у вас есть более глубокая проблема в том, что быстрое зависание приводит к тому, что кадры не синхронизируются. Было бы хорошо, если бы вы могли как-то «сбросить» первый кадр при наведении курсора, а затем анимировать оттуда.

...