作为业余爱好，我做了一些动画极客，主要是使用 Javascript(基于 DOM 和 Canvas )，同时也使用了一些 C# 和其他技术。然而，其中大部分都是基于 Sprite 、边界框、简单的像素移动等——现在我对使用矢量图形和实现一个具有由物理力驱动的逼真的移动关节的 Angular 色很感兴趣。我想在 Canvas 元素或 SVG 中进行一些操作。
这里有很多与逆向运动学相关的问题，但大多数问题的水平都比较低，并且需要先了解矢量、力和工程术语。我真正想感谢的是关于如何使具有髋关节、膝关节、踝关节等的基本火柴人半真实地移动背后的基本原则的一些指示。
我经常使用 Knockout.js 并且一直想知道我是否可以通过 Knockout 的计算函数实现每个关节的定位，例如膝关节的位置是根据髋关节和踝关节的位置以及力计算的对他们进行操作。但我很难找到一个起点:我一直在我的房子周围慢动作走，就像一个疯子试图隔离人体的哪些部分首先移动以及每个部分如何响应 body 的运动其他的。是否有通用的方法来说明人形 Angular 色在游戏和动画中的运动方式？
请记住，我习惯于使用像素坐标而不是矢量和力，我是否天真地试图孤立地解决这个问题？我会发现我还需要立即了解重心、动量和所有其他知识吗？
感谢任何帮助，包括新手教程的链接!
最佳答案
将近 3 年过去了，我可以对自己的问题提供某种答案。我发现了 JavaScript 库 Physics.js 和 p2.js，并深入研究了它们的演示和源代码以尝试学习“物理思维方式”。简而言之，仍然以物理学菜鸟的身份说话——你通常不会明确地移动物体，而是模拟一个简化的物理世界，在这个世界中物体具有基本的物理属性，比如质量，它们服从其他物体的约束，并对作用在它们身上的力，例如重力或明确的方向力，例如当脚踢球时。这使它们获得速度和 Angular 速度。该库根据物体组成的形状处理物体质心的分辨率(例如，复杂的多边形加矩形加圆形可能形成一个物理物体)。发挥作用的各种力量和约束会发生各种冲突，库会解决在物理世界的给定“时间步长”之后，一切都应该定位在何处以及如何定位的工作。这是通过各种“求解器函数”实现完成的，这些实现执行与计算允许的所需精度一样多的迭代。
这两个库都将其物理建模核心与视觉渲染方面分开，并允许不同的渲染实现。当我开始使用 p2.js 时，我看到它在其演示中使用 Pixi.js 进行渲染，所以我最终构建了我自己的基于该集成的简单 JavaScript 框架:https://github.com/TomWHall/p2Pixi我还没有构建一个行走的人形机器人，但我创建了一个“马戏团独轮车”演示，其中包含一个人形图形，为了简单起见，它被限制在它的独轮车上:http://booleanoperations.com/experiments/p2/unicycle/当骑手左右移动(箭头键或在 Canvas 的任一侧单击鼠标)时，负速度或正速度将应用于车轮和轴之间的机动旋转约束，并且校正力也将应用于车轮的各个部分独轮车和骑手模拟某种形式的平衡。旋转约束已到位，以将骑手的脚固定在独轮车的踏板上，并将他的腿段固定在一起，并对关节进行旋转限制。重力不断将轮子向下拉到地面上，并且轮子的运动导致连接的腿段随之移动。这显然与独轮车及其骑手一起工作的方式相反——实际上，腿部移动是由于肌腱在骨骼上产生类似活塞的作用，最终导致车轮旋转。但那是我的马戏团世界的一个不必要的复杂模型:-)
关于javascript - 基本 2D 人形火柴人的逆向运动学原理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11807538/