Анимации с ваниль с JS


Я использовал jQuery в течение длительного времени, и теперь я собираюсь сделать некоторые анимации с ваниль с JS. Вот мой код до сих пор:

var box = document.getElementById('box'),
    a1end,
    a2end,
    cdend,
    a3end,
    a4end,
    animate1 = setInterval(function() {
        if (box.style.top === (window.innerHeight - 120) + 'px') {
            clearInterval(animate1);
            a1end = true;
        }
        box.style.top = (
            +box.style.top.replace('px', '') + 1
        ) + 'px';
    }, 1),
    animate2 = setInterval(function() {
        if (box.style.left === (window.innerWidth - 120) + 'px') {
            clearInterval(animate2);
            a2end = true;
        }
        box.style.left = (
            +box.style.left.replace('px', '') + 1
        ) + 'px';
    }, 1);

checkEnd1(function() {
    box.style.background = 'greenyellow';
    box.innerText = 'Next stage starts in 5 seconds';
    var i = 4,
        cd = setInterval(function() {
            if (!i) {
                clearInterval(cd);
                cdend = true;
            }
            box.innerText = 'Next stage starts in ' + i + ' seconds';
            i--;
        }, 1000);

});
checkEnd2(function() {
    box.style.background = 'white';
    box.innerText = '';
    var animate3 = setInterval(function() {
        if (box.style.left === '20px') {
            clearInterval(animate3);
            a3end = true;
        }
        box.style.left = (
            +box.style.left.replace('px', '') - 1
        ) + 'px';
    }, 1);
});
checkEnd3(function() {
    var animate4 = setInterval(function() {
        if (box.style.top === '20px') {
            clearInterval(animate4);
            a4end = true;
        }
        box.style.top = (
            +box.style.top.replace('px', '') - 1
        ) + 'px';
    }, 1);
});
checkEnd4(function() {
    box.style.background = 'lightcyan';
    box.innerText = 'Animation complete';
});

function checkEnd1(fn) {
    (a1end && a2end) ? fn() : setTimeout(function() {
        checkEnd1(fn);
    }, 200);
}
function checkEnd2(fn) {
    (cdend) ? fn() : setTimeout(function() {
        checkEnd2(fn);
    }, 200);
}
function checkEnd3(fn) {
    (a3end) ? fn() : setTimeout(function() {
        checkEnd3(fn);
    }, 200);
}
function checkEnd4(fn) {
    (a4end) ? fn() : setTimeout(function() {
        checkEnd4(fn);
    }, 200);
}

jsFiddle демо

Я также заметил, что первая анимация не работает в качестве освобожденных. Из любопытства, я попытался с помощью jQuery это .анимировать() и он работал в качестве освобожденных:

$('#box').animate({
    top: window.innerHeight - 120,
    left: window.innerWidth - 120
});

Примечание: пожалуйста, не говорите мне использовать jQuery или других библиотек, я хочу использовать ваниль.


Баунти Редактировать

В настоящее время, анимация идет по диагонали, а потом, когда она достигнет дна, он продолжает идти вбок. Если вы скажите мне, как заставить ее идти по диагонали все время, я дам тебе награду.



4866
8
задан 5 марта 2011 в 06:03 Источник Поделиться
Комментарии