новая спрайтовая анимация при каждом нажатии

Я пытаюсь создать на своей странице персонажа, который использует сценарий Spritely для анимации. Лист спрайтов, который я использую, содержит в общей сложности 92 кадра. Я хотел бы, чтобы анимация была кликабельной.

При первом нажатии я хочу, чтобы он воспроизводился до 70 кадра и останавливался. Затем, в следующий раз, когда вы щелкнете по нему, я бы хотел, чтобы анимация воспроизводилась с 70 по 92 кадры и останавливалась.

Как мне написать код?

Пока что я могу заставить анимацию воспроизводиться до 70 кадра и останавливаться. Даже будучи начинающим веб-разработчиком, это было довольно легко.

Вот что у меня есть до сих пор:

$('#stacheguy2').click(function() {
    $(this)
    .sprite({fps: 30, no_of_frames: 92, play_frames: 70,})

});

С этим кодом, когда вы нажимаете на символ, он воспроизводит кадры 1-70 и останавливается. Это хорошо. Однако в следующий раз, когда вы щелкнете по нему, он начнется с 70-го кадра и продолжится еще на 70 кадров. Как я могу изменить это так, чтобы анимация воспроизводила только кадры с 70 по 92 при втором щелчке?

PS: я бы хотел, чтобы в конечном итоге персонаж выполнял другую последовательность кадров для каждого клика.

Если бы вы могли помочь мне с этим, я был бы так благодарен! Спасибо!


person James Barracca    schedule 05.12.2012    source источник


Ответы (1)


Мне было трудно найти PNG-файл из 92 изображений для тестирования, поэтому мне пришлось обойтись более коротким. Вот рабочий пример: http://jsfiddle.net/Yhrbb/

Код в примере такой:

(function() {
    var total = 92;
    var play_on_click = 72;
    var played = 0;

    $('#fly').click(function() {
        if (played >= total) {
            return;
        }

        var current_play;

        if (play_on_click > (total - played)) {
            current_play = total - played;
        }
        else {
            current_play = play_on_click;
        }

        played += current_play;
        $('#bird').sprite({fps: 12, no_of_frames: 3, play_frames: current_play});
    });
})();

Мы можем адаптировать его для работы для вас следующим образом:

​(function() {
    var total = 92;
    var play_on_click = 72;
    var played = 0;

    $('#stacheguy2').click(function() {
        if (played >= total) {
            return;
        }

        var current_play;

        if (play_on_click > (total - played)) {
            current_play = total - played;
        }
        else {
            current_play = play_on_click;
        }

        played += current_play;
        $(this).sprite({fps: 30, no_of_frames: 92, play_frames: current_play});
    });
})();

Обратите внимание, что как только мы достигаем общего количества кадров, мы просто игнорируем дополнительные клики с return на if (played >= total). Вы можете сбросить played в этот момент или сделать что угодно еще. Если это не сработает, не могли бы вы опубликовать свой файл PNG или аналогичный длинный файл для использования в jsfiddle.

Настройка количества кадров с массивом

Если вы хотите воспроизводить настроенное количество кадров при каждом нажатии, вы можете сделать это: http://jsfiddle.net/dNYks/

(function() {
    var play_on_click = [32, 21, 10, 20];
    var play_index = 0;

    $('#fly').click(function() {
        var current_play = play_on_click[play_index];

        play_index++;
        if (play_index > play_on_click.length-1) {
            play_index = 0;
        }

        $('#bird').sprite({fps: 12, no_of_frames: 3, play_frames: current_play});
    });
})();

Мы можем адаптировать этот код в соответствии с вашей разметкой следующим образом:

(function() {
    var play_on_click = [32, 21, 10, 20];
    var play_index = 0;

    $('#stacheguy2').click(function() {
        var current_play = play_on_click[play_index];

        play_index++;
        if (play_index > play_on_click.length-1) {
            play_index = 0;
        }

        $(this).sprite(fps: 30, no_of_frames: 92, play_frames: current_play});
    });
})();

person Cymen    schedule 05.12.2012
comment
Спасибо! Да, это определенно сработало. Извините, что я новичок в этом, но я должен задать еще один вопрос. Что мне нужно написать (и как мне добавить это в этот существующий код), чтобы объект снова стал кликабельным? И, что еще более конкретно, я ищу, чтобы он мог делать больше анимаций, если это возможно, при каждом новом клике. - person James Barracca; 06.12.2012
comment
Что вы хотите, чтобы произошло, когда он нажимается в третий раз (то есть в первый раз воспроизводится 72 кадра, во второй раз воспроизводится отдых)? Вы хотите просто повторить последовательность 72, отдых, 72, отдых, 72 отдых и т. д.? - person Cymen; 06.12.2012
comment
Я хотел бы иметь возможность добавить еще несколько кадров в мой лист спрайтов, чтобы при следующем щелчке выполнялись следующие кадры моего листа спрайтов. Например... первый щелчок = кадры 1-70, второй щелчок = кадры 71-92, третий щелчок = кадры 93-103 и т.д.. - person James Barracca; 06.12.2012
comment
Хорошо, это хорошая степень контроля, но мы можем это сделать. Нам нужен массив, сколько кадров нужно воспроизвести, и для каждого клика мы будем переходить к следующему значению в массиве и воспроизводить это количество кадров. Если бы всегда воспроизводилось 50 кадров, нам бы не понадобился массив. Через минуту я дам ссылку на другой jsfiddle. - person Cymen; 06.12.2012
comment
Вот пример массива для настройки количества кадров, воспроизводимых при каждом нажатии: jsfiddle.net/dNYks - person Cymen; 06.12.2012
comment
Похоже, это должно работать просто чудесно. Как только я сделаю остальную часть своей анимации, я буду знать наверняка, но я просто хочу поблагодарить вас за ту помощь, которую вы мне оказали! - person James Barracca; 06.12.2012
comment
Без проблем. Я обновил свой ответ кодом для воспроизведения предопределенного количества кадров, сконфигурированных с помощью массива, при каждом щелчке. - person Cymen; 06.12.2012
comment
Спасибо, и это полностью помогло. Можно ли тогда назначить направленное движение для определенного щелчка или, возможно, когда анимация достигает определенного кадра? (т. е. когда анимация достигает кадра 92, что происходит при третьем щелчке, объект переместится на 500 пикселей по экрану вправо.) - person James Barracca; 06.12.2012
comment
Я бы рекомендовал опубликовать еще один вопрос. Я не могу ответить на этот вопрос в данный момент. Если возможно, я поищу его, когда у меня будет время, и отвечу, если ни у кого нет. - person Cymen; 06.12.2012