Question

我的canvas上有一个简单的div元素。我引入了一个setInterval函数，它会在每隔300 ms后改变其不透明度。当不透明度等于1时，我想旋转DOM对象。但是旋转效果是不透明度达到1时不会触发。

<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>

Answer 1

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>

在easeljs中旋转DOM元素

1 个答案: