使用jsanim循環動畫

我一直在使用jsanim來渲染一系列動畫，這些動畫在特定時間之後應該是循環的，並且同時只動畫一個元素的兩個屬性。使用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}); 
}

但我只會循環一個屬性動畫。我怎樣才能將它們全部循環？非常感謝您的幫助！

來源

2012-03-06 freese

我不確定爲什麼你的第一種方法不起作用。也許你應該調用一些方法在'smokeLoop'開始時清除'bhoosmokemov'和'bhosmodefade'的動畫隊列。 – toto2 2012-03-06 15:45:51

我不知道你是否應該使用jsanim：它似乎比jQuery中的動畫系統更復雜，我不知道它是否做了更多。 – toto2 2012-03-06 15:46:14

我發現了一個解決問題的辦法。這是它如何工作：

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();

感謝您的幫助TOTO，jsanim其實是一個很不錯的動畫庫，並提供jQuery不會的某些功能。如果你只想要幾個動畫，它也會更小。

來源

2012-03-07 13:14:40 freese

使用jsanim循環動畫

回答

相關問題