Question

我一直在使用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});
}

但我只会循环其中一个属性动画。我怎么能循环它们呢？非常感谢你的帮助！

Answer 1

我自己找到了解决问题的方法。这就是它的工作原理：

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没有的功能。如果你只想要几个动画，它也会更小。

使用jsanim循环播放动画

1 个答案: