在 easeljs/tweenjs 中手动旋转
Manual rotation in easeljs/tweenjs
我一直在手动旋转对象时遇到问题。我想要的是当一个人双击该对象时,它会旋转 20(任一侧,我不挑剔)一次。如果他们再次单击,它会再次旋转 20。但是,它此时根本不会旋转(双击或不旋转)。我在这里做错了什么?
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 tween2 = new TWEEN.Tween(draggerTri2,dataset)
.to({left: "-20"}, 2000)
.repeat(0)
.onUpdate(function(draggerTri2){
draggerTri2.left = Math.round(draggerTri2.left);
})
.start()
stage.update();
});
stage.update();
Codepen link: https://codepen.io/AoifeMcNeill/pen/XqyWej?editors=0010
您的补间代码不是 TweenJS 代码。如果双击,您会收到一个控制台错误,提示未定义 TWEEN。
TweenJS 代码如下所示:
draggerTri2.on("dblclick", function rotate(evt) {
var tween2 = createjs.Tween.get(draggerTri2, {override:true})
.to({rotation:draggerTri2.rotation+20}, 2000)
.on("change", function(event){
var tween = event.target,
draggerTri2 = tween.target;
draggerTri2.rotation = Math.round(draggerTri2.rotation);
stage.update(); // Only do this if nothing else is updating your stage
});
});
您还可以使用 RelativePlugin 相对于当前旋转而不是绝对数字旋转:
RelativePlugin.install();
var tween2 = createjs.Tween.get(draggerTri2, {override:true})
.to({rotation:"+20"}, 2000);
我一直在手动旋转对象时遇到问题。我想要的是当一个人双击该对象时,它会旋转 20(任一侧,我不挑剔)一次。如果他们再次单击,它会再次旋转 20。但是,它此时根本不会旋转(双击或不旋转)。我在这里做错了什么?
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 tween2 = new TWEEN.Tween(draggerTri2,dataset)
.to({left: "-20"}, 2000)
.repeat(0)
.onUpdate(function(draggerTri2){
draggerTri2.left = Math.round(draggerTri2.left);
})
.start()
stage.update();
});
stage.update();
Codepen link: https://codepen.io/AoifeMcNeill/pen/XqyWej?editors=0010
您的补间代码不是 TweenJS 代码。如果双击,您会收到一个控制台错误,提示未定义 TWEEN。
TweenJS 代码如下所示:
draggerTri2.on("dblclick", function rotate(evt) {
var tween2 = createjs.Tween.get(draggerTri2, {override:true})
.to({rotation:draggerTri2.rotation+20}, 2000)
.on("change", function(event){
var tween = event.target,
draggerTri2 = tween.target;
draggerTri2.rotation = Math.round(draggerTri2.rotation);
stage.update(); // Only do this if nothing else is updating your stage
});
});
您还可以使用 RelativePlugin 相对于当前旋转而不是绝对数字旋转:
RelativePlugin.install();
var tween2 = createjs.Tween.get(draggerTri2, {override:true})
.to({rotation:"+20"}, 2000);