easeljs에서 DOM 요소를 회전

내 canvas.i에 간단한 div 요소가 있습니다. 300ms마다 불투명도가 변경되는 setInterval 함수가 도입되었습니다. 불투명도가 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를 처음 사용하는 경우에는 사용하지 말아야합니다. 또한 티커 대신 간격을 사용하는 이유는 무엇입니까? –

해결책 : .i 답을 여기에 게시하고 있습니다. :) –

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 요소를 회전

답변

관련 문제