Максимальное вращение в Createjs (adobe animate cc)

Я делаю проект автостоянки с помощью Adobe Animate CC (HTML5). У меня есть на холсте автомобиль и его колеса. С помощью приведенной ниже команды я могу вращать колеса влево или вправо, нажимая стрелки на клавиатуре.

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

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

Но я хочу заставить его вращаться с определенным коэффициентом вращения, как вращается настоящее колесо автомобиля. Я думаю, что мне нужно создать метод, но я не знаю, как использовать свойство поворота с методом, который я хочу создать. Любая мысль / помощь приветствуется.


javascript createjs animate-cc
person Community    schedule 27.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

На самом деле вам нужна анимация колеса:

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>
person gMirian    schedule 27.07.2017
comment
createjs.Tween.get означает, что создается класс?? - person ; 30.07.2017
comment
TweenJS является частью библиотеки CreateJS, она используется для анимации, проверьте здесь: createjs.com/tweenjs - person gMirian; 30.07.2017
comment
Метод get означает, что возвращается новый экземпляр анимации движения с указанными вами свойствами (в случае кода @gMirian — loop и override). - person cristiancajiaos; 30.07.2017
comment
@gMirian Может быть, вы не совсем поняли, что я хочу сделать. Посмотрите на эту картинку, чтобы увидеть, что я хочу сделать: imgur. com/a/PdmvZ - person ; 04.08.2017
comment
@Β_origin, пожалуйста, проверьте новый пример, я отредактировал пост, просто скопируйте/вставьте этот код и проверьте. :) - person gMirian; 05.08.2017
comment
@gMirian Я хочу тебя обнять! Большое спасибо. У меня есть несколько вопросов. Почему, если в утверждении две скобки? И второй вопрос: почему в wheelsInitialRotation-maximumAngleForRotation есть (-) вместо (+)? Между прочим, я использую сумму -=2 или сумму +=2, это дает больше уверенности в управлении колесами, чем сумма =-2 . - person ; 06.08.2017
comment
@Β_origin, если тестирует максимальный и минимальный угол, не превышая в нашем случае 20 влево или вправо, это просто быстрый код, только для примера, вы можете установить там свою логику :), то же самое с += или -=, это предпочтения разработчиков, как писать код, в какой манере или логике, я рад, что этот пример помог вам двигаться вперед :) - person gMirian; 06.08.2017
comment
@gMirian Я не могу понять, почему вы использовали 2 скобки для оператора IF, я видел это только с одним, например: if (that › this) { code here - person ; 07.08.2017
comment
@gMirian, кстати, как я могу заставить его двигаться в направлении колес? atan2, math.pi или ? - person ; 09.08.2017