在easeljs中旋轉DOM元素

我在canvas.i中引入了一個簡單的div元素，它引入了一個setInterval函數，它在每隔300 m後會改變其不透明度。當不透明度等於1時，我想旋轉DOM對象但不透明度達到1時不會觸發旋轉效果。在easeljs中旋轉DOM元素

<html> 
<head> 
<script src="easeljs.js"></script> 
</head> 
<body> 
<div id="mydiv" style="width:500px;height:40px;border:1px solid black;text-align:center;color:blue;">MAD COW</div> 
<canvas id="mycanvas" width="1000" height="500"></canvas> 
<script> 
var stage; 
var domElement; 
function init(){ 
    newStage(); 
} 
function newStage(){ 
    stage=new createjs.Stage(document.getElementById('mycanvas')); 
    newDomElement(); 
} 
function newDomElement(){ 
    domElement=new createjs.DOMElement(mydiv); 
    domElement.nextX=250; 
    domElement.x=domElement.nextX; 
    domElement.y=stage.canvas.height/2; 
    domElement.alpha=0; 
    stage.addChild(domElement); 
    stage.update(); 
    var interval=setInterval(tickit,300); 

} 
function tickit(){ 


    if(domElement.alpha==1){ 
     clearInterval(interval); 
     domElement.alpha=1; 
     domElement.rotation=10; 
    }else{ 
     domElement.alpha+=0.1; 
    } 
    stage.update(); 
} 
window.onload=init; 
</script> 
</body> 
</html>

來源

2014-06-19 AL-zami

你可以創建一個小提琴？請注意，EaselJS DOMElements仍然是實驗性的，可能會出現問題 - 如果您是EaselJS的新手，則應避免使用它。另外，爲什麼你使用間隔而不是ticker？ –

我解決了它，我在這裏發佈解決方案作爲答案:) –

fiddle這是我如何使它工作

<html> 
<head> 
<script src="easeljs.js"></script> 
</head> 
<body> 
<div id="mydiv" style="width:500px;height:40px;border:1px solid black;text-align:center;color:blue;">MAD COW</div> 
<canvas id="mycanvas" width="1000" height="500"></canvas> 
<script> 
var stage; 
var interval; 
var domElement; 
function init(){ 
    newStage(); 
    createjs.Ticker.setFPS(60); 
    createjs.Ticker.on('tick',updateit); 
} 
function newStage(){ 
    stage=new createjs.Stage(document.getElementById('mycanvas')); 
    newDomElement(); 
} 
function newDomElement(){ 
    domElement=new createjs.DOMElement(mydiv); 
    domElement.nextX=500; 
    domElement.regX=250; 
    domElement.regY=20; 
    domElement.x=domElement.nextX; 
    domElement.y=stage.canvas.height/2; 
    domElement.alpha=0; 
    stage.addChild(domElement); 
    stage.update(); 
    interval=setInterval(tickit,10); 

} 
function tickit(){ 


    if(domElement.alpha<1){ 
    domElement.alpha+=0.1; 

    }else{ 

     domElement.alpha=1; 
     domElement.rotation+=10; 
     if(domElement.rotation==360){ 
     clearInterval(interval); 
     } 
    } 
    stage.update(); 
} 
function update(){ 

    stage.update(); 
} 
window.onload=init; 
</script> 
</body> 
</html>

來源

2014-06-25 15:44:16

在easeljs中旋轉DOM元素

回答

相關問題