Createjs 中的最大旋转(adobe animate cc)
Max Rotation in Createjs (adobe animate cc)
我正在使用 Adobe Animate CC (HTML5) 制作一个停车场项目。
我有我的 canvas 一辆汽车及其 Wheels.With 下面的命令我可以通过按键盘箭头向左或向右旋转车轮。
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想我必须做一个方法,但我不知道如何使用旋转属性 使用我想要的方法 create.Any 认为/帮助表示赞赏。
您实际上需要滚轮动画:
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>
我正在使用 Adobe Animate CC (HTML5) 制作一个停车场项目。 我有我的 canvas 一辆汽车及其 Wheels.With 下面的命令我可以通过按键盘箭头向左或向右旋转车轮。
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想我必须做一个方法,但我不知道如何使用旋转属性 使用我想要的方法 create.Any 认为/帮助表示赞赏。
您实际上需要滚轮动画:
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>