You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

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

关键修改说明:

  1. 把Tween的目标属性从left改成了rotation,并且每次基于当前角度累加20度,完美匹配你“双击一次转20度”的需求。
  2. 使用createjs.Tween(EaselJS官方配套的Tween工具)创建动画,语法更简洁,和EaselJS对象的适配性更强。
  3. 添加了createjs.Ticker来持续更新舞台,这样动画过程中每一帧都会刷新,你才能看到平滑的旋转效果。
  4. 移除了无效的dataset参数和错误的onUpdate逻辑,简化了代码结构。

这样修改后,双击三角形就能看到它每次平滑旋转20度的效果了。

内容的提问来源于stack exchange,提问作者Aoife McNeill

火山引擎 最新活动