帆船动画：用鼠标将舵柄向左转动，船向右转动&反之亦然
我正在尝试创建一个动画来展示驾驶帆船的基础知识。这个想法是船的俯视图，舵柄和舵非常明显。我希望学习者能够向一个方向或另一个方向单击并拖动舵柄，而舵柄拖动时我希望舵和船旋转到正确的方向。例如，我想让船向左行驶，我会将舵柄推到右舷，舵将顺时针旋转，船将向左转。我脑子里的船不需要向前运动，我想只要船转动就可以了。任何帮助或资源将不胜感激。
I am trying to create an animation that will show the basics of steering a sailboat. The idea is that there will be a top view of the boat with the tiller and rudder very pronounced. I want the learner to be able to click and drag the tiller one direction or the other, while the tiller is dragging I want the rudder and the boat to rotate the proper direction. Example, I want the boat to go left I will push the tiller to starboard and the rudder will rotate clockwise and the boat will turn left. There doesn't need to be forward motion by the boat in my head, I think that as long as the boat rotates it would be fine. Any help or resources would be appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为你真正需要考虑的是建模。创建帆船的非 UI 表示。构建您的代码，以便移动舵柄（无需鼠标...只需通过模型的界面）会导致您的船模型移动。模型的参与者和属性可能包括：
当然，模型的因素越深入，它的行为就越精细。我建议添加单元测试来驱动这种行为。在对模型保真度最有意义的任何细化级别上停止。
一旦你有了一个好的模型，将其连接到图形资产就会变得更加简单和直接。例如，您可以使用旋转变换根据模型中暴露的角度旋转船或舵柄图形。航行角度或水上动画的移动速度也是如此。
这种方法允许您独立于船的行为来设计动画。
祝你好运！
I think what you really need to think about is modeling. Create a non-UI representation of a sailboat. Build your code such that moving the tiller (without the mouse... just through the interface of your model) causes the model of your boat to move. Actors and attributes of the model might include:
Of course, the the further you go in the factors of your model refine its behavior more and more. I recommend adding unit tests to drive this behavior. Stop at whatever level of refinement makes most sense for the fidelity of your model.
Once you have a good model in place, it becomes much more simple and straight-fowrward to hook it up to graphical assets. For instance, you can rotate the boat or tiller graphic based on the angles you have exposed in your model using a rotation transform. The same would be true of the angle of sail, or the speed that you move your water animation.
This approach allows you to design the animations separate from the behavior of the boat.
Good luck!
好吧 - 只要您了解以编程方式转换显示对象的基础知识，这应该不会太难，
我可能会这样进行：
为您的不同元素创建图形。您本质上将控制这些对象的旋转属性，因此需要在旋转点正确设置平移点。
设置完成后，只需向耕耘机添加鼠标按下事件侦听器，并测试 mouseX 中的增量变化，直到注册鼠标按下即可。
在动画周期期间（当鼠标按下时），只需对三个对象应用不同程度的旋转（基于 mouseX 增量变化）。 IE：如果鼠标向左拖动，则旋转舵柄以匹配，舵向相反方向，父级（船）也向左。
这显然是非常基本的，但应该创建一个合理的类比你的意图......
希望有帮助
Well - as long as you know the basics of programmatically transforming displayObjects, this shouldn't be too tough to do
I might go about it like this:
Create the graphics for your different elements. You are essentially going to be controlling the rotation property of these objects, so your translation points need to be set correctly at the point of rotation.
Once that is set up, its as simple as adding a mouse down event listener to the tiller, and testing for the delta change in mouseX until mouse up is registered.
During the animation cycle (while the mouse is down), just apply varying degrees of rotation (based on mouseX delta change) on your three objects. IE: If the mouse is dragged left, rotate the tiller to match, the rudder in the opposite direction, and the parent (the boat) also to the left.
This, obviously is very rudimentary, but should create a reasonable analogue of your intent...
Hope that helps