Question

我必须开发一个我必须移动图像的游戏。如需参考，请参阅以下YouTube链接中的视频：

https://www.youtube.com/watch?v=CQAMCuqMHpA

我的游戏与它不一样，但必须使用相同的物体移动功能，如在Lumosity的Train of Thoughts游戏中。为此我用google搜索了很多用于使用JavaScript在画布上的特定路径上移动图像，但是没有找到任何完美的解决方案。我找到了TweenJS，它可以帮助我在路径上移动对象。我从以下链接引用它：

http://createjs.com/docs/tweenjs/classes/MotionGuidePlugin.html

通过使用TweenJS，我可以移动圆形，矩形等形状，但无法在路径上移动图像。当我尝试通过将图像转换为位图，然后使用TweenJS移动位图时，它显示异常。

请建议我可以在JavaScript中执行此功能。

Answer 1

您使用Animate CC导出代码吗？ MotionGuidePlugin旨在从Animate导出，但可以手动处理。如果您使用的是Animate，那么如何更改为位图？您只是使用代码，或者交换到Animate内部的Bitmap实例吗？

我在Animate中进行了快速测试，使用位图工作正常。我使用和没有本地服务器测试它，并且没有问题（只要图像在同一台服务器上。

如果您使用普通代码，我怀疑它可能存在问题。你有机会在这里贴出来吗？

Here is a quick sample using an image（从Animate CC导出）。

代码：

this.instance = new lib.chrisk();
this.instance.parent = this;
this.instance.setTransform(49,183.9,1,1,0,0,0,5.8,5.9);

this.timeline.addTween(cjs.Tween.get(this.instance).to({guide:{path:[49.2,183.8,44.7,191.3,41.3,202.7,37.2,216.5,37.2,228.8,37.2,247.3,40.1,254.9,43.4,263.8,54.5,270.9,62.4,275.9,89.3,288.6,126.6,306.1,153.2,319.8,153.3,325.2,155.4,327.6,157.5,330.2,163,331.1,167.6,331.9,178.3,331.9,184.8,331.9,203.2,331.8,203.5,331.8,227.2,330.6,252.3,329.1,259,327.8,264.4,326.7,269.5,324.5,275.3,322,279,318.8,281.2,315.8,280.3,308.1,279,301,279,300.8,279.6,287.9,279.6,284.8,279.6,280.7,277,277.8,274.4,274.8,271.8,270.9,269.1,267,267.9,265.7,263.6,260.7,251,255.8,229.2,247.2,209.9,244.7,203.4,243.8,196,243.6,188.8,243.4,185.9,243.3,177.4,242.8,174.9,238.5,172.2,233.8,172.2,217.3,172.2,207.4,174.8,195.4,177.8,181.3,183.2,169.8,197.4,140,222,140,233,140,242.3,150.4,254.8,164.7,259,194.8,260.6,207,271.4,218.3,281.4,228.7,297.8,237,313.4,244.9,331.8,249.3,350.3,253.8,367.5,253.8,396.5,253.8,417,243.8,440,232.6,440,213.8,440,206.9,437.3,198.1,434,187.7,428.1,178.8,412.1,155.6,384,153,343.4,149.3,322.1,144.6,306.5,141.2,298.7,137,291,132.7,291,127.5,291,122.3,294.9,112.9,299.2,102.3,306,93,324.2,68,347,68,351.1,68,381.9,69.5,412.6,71,420,71]}},59).wait(1));

Answer 2

如果您没有使用任何本地服务器或inbuild服务器，它是否会提供有关异常的更多详细信息，它将引发错误。请尝试使用webtrom / bracket中的xampp或inbuild服务器等本地服务器

想要使用javascript在画布上的路径上移动图像

2 个答案: