在easeljs/tweenjs 中手动旋转
Posted
技术标签:
【中文标题】在easeljs/tweenjs 中手动旋转【英文标题】:Manual rotation in easeljs/tweenjs 【发布时间】:2018-10-27 17:16:59 【问题描述】:我在手动旋转对象时遇到了问题。我想要的是当一个人双击该对象时,它会旋转 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 链接:https://codepen.io/AoifeMcNeill/pen/XqyWej?editors=0010
【问题讨论】:
【参考方案1】:您的补间代码不是 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);
【讨论】:
谢谢!在过去的 3 个月里,我刚刚开始学习 createjs [及其'easeljs 子库],并且最近才开始使用 Tweenjs 一个,并且没有大量的文档,所以有点迷失了。我把这个作为答案。 我们试图在网站(和 Github)上包含大量文档,以及示例,甚至一些教程。有兴趣知道什么样的材料会更有帮助 - 让我们知道github.com/CreateJS/EaselJS/issues 或reddit.com/r/createjs以上是关于在easeljs/tweenjs 中手动旋转的主要内容,如果未能解决你的问题,请参考以下文章