2017-07-27 7 views
0

Adob​​e Animate CC(HTML5)を使用して駐車するプロジェクトを行っています。 私はキャンバスに車とホイールを持っています。以下のコマンドを使って、キーボードの矢印を押してホイールを左右に回転させることができます。Createjsの最大ローテーション(adobe animate cc)

document.onkeydown = keyHandler.bind(this); 
function keyHandler(event) { 

var e = event||window.event; 
//left 
if(e.keyCode == 37) { 
    this.car.wheels3.rotation-=2; 

しかし、私は方法をしなければならないが、私はこの方法で回転プロパティを使用する方法を知ってはいけないと思いますrotates.I車の本当のホイールのように、それは一定の回転比で回転させるようにしたいです私は作成したいと思っています。

答えて

0

あなたが実際にホイールのアニメーションを必要とする:

createjs.Tween.get(car.wheel,{loop:true,override:true}).to({rotation:"360"}, 1000); 
//or 
createjs.Tween.get(car.wheel,{loop:true,override:true}).to({rotation:"-360"}, 1000); 

新しい状況に基づいて更新、:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Example</title> 
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 
<script> 
function init() 
{ 
    var stage = new createjs.Stage("canvas"); 
    createjs.Ticker.setFPS(24); //set some FPS 
    createjs.Ticker.addEventListener("tick", stage); //set autiomatic refresh 

    //let's draw something like wheels, with registration point somewhere in the middle :) 
    var wheels=new createjs.Shape(); 
    wheels.graphics.beginFill("#CCCCCC").drawRect(-100,0,20,50); 
    wheels.graphics.beginFill("#CCCCCC").drawRect(-100,15,200,20); 
    wheels.graphics.beginFill("#CCCCCC").drawRect(100,0,20,50); 
    stage.addChild(wheels); 


    wheels.x=200; 
    wheels.y=100; 


    document.addEventListener("keydown", onKeyDown); 

    var wheelsInitialRotation=wheels.rotation; //save whells initial rotation 
    var maximumAngleForRotation=20; //set maximum angle 

    function onKeyDown(e) 
    { 
     var amount; 
     e = e || window.event; 

     switch(e.keyCode) 
     { 
      //right 
      case 39: 
       amount=2; 
       break; 
      //left 
      case 37: 
       amount=-2; 
       break; 
      //all other 
      default: 
       amount=0; 

     } 

     //check is new angle is not more or less then allowed :) 
     if(!(wheels.rotation+amount>wheelsInitialRotation+maximumAngleForRotation || wheels.rotation+amount<wheelsInitialRotation-maximumAngleForRotation)) 
     { 
      wheels.rotation+=amount; 
     } 



    } 


} 
</script> 
</head> 
<body onload="init();"> 
    <canvas id="canvas" width="400" height="400"></canvas> 
</body> 
</html> 
+0

createjs.Tween.getは、クラスが作成されていることを意味? –

+0

TweenJSはCreateJSライブラリの一部です。アニメーションに使用されています。こちらをご覧ください:http://www.createjs.com/tweenjs – gMirian

+0

メソッド 'get'は、指定したプロパティを持つ新しいTweenインスタンスが返されることを意味します@gMirianコードの場合は、 'loop'と' override')。 – CrisMVP3200

関連する問題