Зацикливание анимации с помощью jsanim - PullRequest
0 голосов
/ 06 марта 2012

Я использовал jsanim для создания серии анимаций, которые должны быть зациклены по прошествии определенного времени и анимировать два свойства только одного элемента одновременно.

Код выглядит так:

<script type="text/javascript">


var manager = new jsAnimManager(40);

var bhosmokemov = manager.createAnimObject("bho_smoke");
var bhosmokefade = manager.createAnimObject("bho_smoke");

bhosmoke = document.getElementById("bho_smoke");

manager.registerPosition("bho_smoke");
bhosmoke.setPosition(-1003,305);

function smokeLoop() {
    bhosmokemov.add({property: Prop.position, to: new Pos(2000,303), duration: 25000,ease: jsAnimEase.parabolicNeg});
    bhosmokefade.add({property: Prop.opacity, from: 0, to: 1, duration: 2500});
    bhosmokefade.add({property: Prop.wait, duration: 1600});
    bhosmokefade.add({property: Prop.opacity, from:1, to: 0, duration: 2500,    onComplete:smokeLoop});
}
</script>

То, чего я пытался достичь, это зациклить smokeLoop () , чтобы вся цепочка анимаций свойств, содержащаяся в нем, повторялась вечно. Этот подход не работает. Конечно, я мог бы просто использовать что-то вроде:

 function smokeLoop() {
    bhosmokemov.add({property: Prop.position, to: new Pos(2000,303), duration: 25000,ease: jsAnimEase.parabolicNeg, loop: 2;});
    bhosmokefade.add({property: Prop.opacity, from: 0, to: 1, duration: 2500});
    bhosmokefade.add({property: Prop.wait, duration: 1600});
    bhosmokefade.add({property: Prop.opacity, from:1, to: 0, duration: 2500,    onComplete:smokeLoop});
}

Но я бы только зацикливал одну из анимаций свойств. Как я могу сделать, чтобы зациклить их всех? Большое спасибо за вашу помощь!

1 Ответ

0 голосов
/ 07 марта 2012

Я сам нашел решение проблемы. Вот как это работает:

var manager = new jsAnimManager(40);


    var bhosmokemov = manager.createAnimObject("bho_smoke");
    var bhosmokefade = manager.createAnimObject("bho_smoke");

    var bhosmoke = document.getElementById("bho_smoke");

    manager.registerPosition("bho_smoke");


    var startbholoops = function () {
        bhosmoke.setPosition(-1103,305);
        bhosmokemov.add({property: Prop.position, to: new Pos(1000,305), duration: 10000,ease: jsAnimEase.parabolicNeg,  onComplete:startbholoops});
        bhosmokefade.add({property: Prop.opacity, from: 0, to: 1, duration: 3500});
        bhosmokefade.add({property: Prop.wait, duration:1600});
        bhosmokefade.add({property: Prop.opacity, from:1, to: 0, duration: 3500});
    }


        startbholoops();

Спасибо за вашу помощь, jsanim на самом деле очень хорошая библиотека анимации и предлагает некоторые функции, которых нет в jquery. Это также меньше, если вы хотите только пару анимаций.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...