Question

我正在使用Adobe Animate CC（HTML5）制作停车场项目。我的画布上有一辆Car和它的Wheels。通过下面的命令，我可以通过按键盘箭头左右旋转车轮。

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

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

但是我想让它以一定的旋转比率旋转，就像汽车的真实轮子一样旋转。我想我必须制作一个方法，但我不知道如何使用我希望创建的方法的旋转属性。任何想法/帮助赞赏。

Answer 1

你实际上需要轮子动画：

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>

Createjs中的最大旋转（adobe animate cc）

1 个答案: