EaselJS/TweenJS中手动旋转对象失效问题排查
解决EaselJS/TweenJS双击旋转对象无效果的问题
我帮你排查了代码里的几个核心问题,这就是双击后对象没旋转的原因:
- 错误操作了EaselJS对象不存在的属性:你在Tween里试图修改
left属性,但EaselJS的Container类根本没有这个属性!要实现旋转,你需要操作的是rotation属性,这个属性控制对象的旋转角度(单位是度)。 - Tween动画的更新逻辑缺失:你只在双击事件里调用了一次
stage.update(),但Tween动画是逐帧执行的,需要持续更新舞台才能看到动画过程。另外,和EaselJS配套使用时,推荐用createjs.Tween而非直接调用TWEEN.Tween,适配性更好。 - 旋转逻辑不符合需求:你当前代码试图修改
left到-20,这和“每次双击旋转20度”的需求完全不匹配,应该在当前旋转角度的基础上累加20度。
下面是修正后的完整代码,关键修改点我都标注清楚了:
var stage = new createjs.Stage("canvas"); // 创建三角形和容器(保留你的原有逻辑) var tri2 = new createjs.Shape(); tri2.graphics.beginStroke("#000").beginFill('#000').drawPolyStar(0, 0, 50, 3, 0, 270); var draggerTri2 = new createjs.Container(); draggerTri2.x = Math.random()*100; draggerTri2.y = Math.random()*100; draggerTri2.addChild(tri2); stage.addChild(draggerTri2); // 拖拽逻辑(保留你的原有逻辑) draggerTri2.on("pressmove",function move(evt) { evt.currentTarget.x = evt.stageX; evt.currentTarget.y = evt.stageY; stage.update(); }); // 修正后的双击旋转逻辑 draggerTri2.on("dblclick", function rotate(evt) { var target = evt.currentTarget; // 每次在当前旋转角度基础上加20度 var targetRotation = target.rotation + 20; // 使用createjs.Tween实现平滑旋转动画 createjs.Tween.get(target) .to({rotation: targetRotation}, 500) // 500ms完成旋转,可根据需求调整速度 .call(function() { stage.update(); // 动画结束后确保舞台更新 }); }); // 添加Ticker驱动舞台持续更新,这是动画能正常显示的关键! createjs.Ticker.addEventListener("tick", stage); createjs.Ticker.setFPS(60); // 设置帧率,保证动画流畅度 stage.update();
关键修改说明:
- 把Tween的目标属性从
left改成了rotation,并且每次基于当前角度累加20度,完美匹配你“双击一次转20度”的需求。 - 使用
createjs.Tween(EaselJS官方配套的Tween工具)创建动画,语法更简洁,和EaselJS对象的适配性更强。 - 添加了
createjs.Ticker来持续更新舞台,这样动画过程中每一帧都会刷新,你才能看到平滑的旋转效果。 - 移除了无效的
dataset参数和错误的onUpdate逻辑,简化了代码结构。
这样修改后,双击三角形就能看到它每次平滑旋转20度的效果了。
内容的提问来源于stack exchange,提问作者Aoife McNeill




