Search code examples
javascriptcreatejsanimate-cc

Max Rotation in Createjs (adobe animate cc)


Im making a car parking project with Adobe Animate CC (HTML5). I have into my canvas a Car and its Wheels.With the command below i can rotate the wheels left or right by pressing keyboard arrows.

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

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

But i want to make it to rotate in a certain rotation ratio , like a real wheel of a car rotates.I think i have to make a method but i dont know how to use rotate property with the method i want to create.Any thought/ help appreciated.


Solution

  • You need wheel animation actually:

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

    Update, based on new circumstances:

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