JQuery анимация не гладкая - PullRequest
Новая
       20

JQuery анимация не гладкая

1 голос
/ 03 декабря 2011

Я новичок в JS и JQuery.я пытаюсь создать тип игры GuitarHero в JQuery, но заметки не падают плавно, то, что я делаю, в основном вызывает setTimeout() в цикле - каждый с разным таймаутом (заданным в массиве - "Песня Скипта "если хочешь".код выглядит следующим образом: 

while(counter < curSong.numNotes){
                // set the parameters sent to runCreateNote
        runCreateNote(counter, margin, entity, interval, name);
        counter++;
}

когда runCreateNote вызывает setTimeout() (для целей области видимости)

это код анимации: 

    noteBall.animate({
            top: (noteBall.parent().height() - noteBall.height()*2) + 'px'
        }, {
            duration: fallingtime,
            queue: false,
            easing: "linear",
            step: function() {
                checkStep(id);  
            },
            complete: function() {
                reachBottom(id);    
            }
    });

    function checkStep(id){

        var noteBall = $("#" + id);
        var name = id.substring(0,1);
        if (name == "R"){
            if (isInRange(noteBall)){
                isRedIn = true;
            } else {
                isRedIn = false;
            }
        }
        if (name == "B"){
            if (isInRange(noteBall)){
                isBlueIn = true;
            } else {
                isBlueIn = false;
            }
        }
        if (name == "G"){
            if (isInRange(noteBall)){
                isGreenIn = true;
            } else {
                isGreenIn = false;
            }
        }
        if (name = "O"){
            if (isInRange(noteBall)){
                isOrangeIn = true;
            } else {
                isOrangeIn = false;
            }
        }

}

iНе знаю, является ли какой-либо код релевантным, но я просто хотел показать, что анимация не выглядит слишком тяжелой (я думаю, что она будет работать гладко)

Я пропустил какой-то ключевой принцип?

1 Ответ

0 голосов
/ 04 декабря 2011

Ну, не видя остальной части вашего кода или демо-версии приложения, я думаю, что эта строка создает вам проблемы: 

top: (noteBall.parent().height() - noteBall.height()*2) + 'px'

Если бы вы могли рассчитать эти значения заранее и кэшировать их, вам, вероятно, было бы лучше.

Вам также следует подумать о том, чтобы взять все эти операторы if в checkStep и переместить их в оператор switch (или, по крайней мере, если / иначе) - предполагая, что случаи взаимоисключающие.

...