我正在做一些动画，我想在网络上实现类似this 的东西。我在想 HTML 画布可以做这种工作。因为我可以缩放图像的一部分。我只需要让算法真正发挥作用。
效果是弹性的，如果窗口小，恢复时窗口的弹性越大。我在想我可以在网络图像中进行这项工作。如果用户单击图像，它将以这种效果进行缩放，而不是无聊的缩放方式。
这是ubuntu，我知道我们可以看看源代码，看看它实际上是如何实现动画的。但我不知道在哪里可以找到它。或者我什至不了解用 linux 编写的代码，因为我只了解 php、javascript。基本上我不是软件开发人员，我的核心专长是网络开发。
【问题讨论】：
标签： javascript jquery linux animation ubuntu
我相信您最好的选择是查看 John Resig 的 Processing.js。
Processing 是 Java 的一种动画语言； John 已使用画布将其移植到浏览器中。
【讨论】：
您不会找到可以为您执行此操作的基于 Web 的解决方案。如果您需要完成类似的操作，则必须在 Flash 或其他一些应用程序（Lenni 提到 Java）中运行，这些应用程序在嵌入网页的单独媒体框中运行。
人们不想要大而华丽的动画，如果它变得更有用，看到一些“无聊”的东西会更好。
【讨论】：
首先 - 我不知道他们在这里使用的实际算法。
但是，我会通过创建一个点网格（比如 10x10）来解决这个问题，每个点通过阻尼弹簧连接到它的邻居。也可能值得用弹簧将边缘/角点锚定到屏幕上。
通过变形网格（拉伸和压缩弹簧），然后对弹簧响应进行建模，您会得到一些如图所示的有趣效果。如果您的动画是可预测的，那么您也许可以记录这些模式，以便这些点可以遵循预先计算的路径以获得更快的动画效果。
然后你需要弄清楚如何分割图像并将其映射到网格上。拆分可能最好在服务器上一次完成，但如果你使用画布，客户端可以做到。
svg & vml 是可能的——它们可以在没有插件的情况下工作，并且与代码足够相似，但我认为你不会得到足够正确的图像变形。但是，您可以不受惩罚地缩放和旋转（并且快速），因此如果您只是将 2 个单元图像点锚定到网格而不是全部 4 个，您将获得一个有趣的动画 - 不太像视频，但非常好。
至于如何模拟阻尼弹簧，您需要跟踪每个点的质量（它的重量）、弹簧对每个点施加的力（压缩/拉伸程度的标量）它是矢量）和点上的阻尼力（阻力与点速度的平方）。
这是物理建模，这是肯定的，但很有可能。
响应可能很慢。尤其是在 IE 上。 Canvas 在 IE 上需要一个插件，所以如果你使用 canvas，IE 人不会看到它。 SVG 几乎适用于除 IE 之外的所有东西，但它确实具有类似的 VML。 http://raphaeljs.com/ 是一个使用任何可用资源的库。这将是一个调整的挑战:)
不管你怎么做，它总是在 chrome 中看起来最好，V8 javascript 引擎在这种工作上胜过其他一切。 IE 拥有最慢的 javascript 引擎。
【讨论】：