Вращать DOM-элемент в easeljs

Question

Вращать DOM-элемент в easeljs

У меня есть простой элемент div на холсте. Я представил функцию setInterval, которая будет изменять свою непрозрачность после каждых 300 мс. Когда непрозрачность будет равна 1, я хочу вращать объект 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>

0

javascript canvas easeljs

Источник

user3138436 19 июн '14 в 13:24

1 ответ

Другие вопросы по тегам javascript canvas easeljs

user3138436 25 июн '14 в 15:44 2014-06-25 15:44 · Answer 1 · 2014-06-25 15:44

скрипка это как я заставил это работать

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