javascript - 如何使用 CSS 变换为拖动添加动量/惯性？

Question

我正在尝试为缩放图像拖动添加动量/惯性效果(如 this example 或就像 iOs 所做的那样)，但我遇到了困难。

我已经为此苦苦挣扎了一段时间，并找到了一些有用的资源(例如 this one )，但大多数解决方案都涉及 jQuery，我更愿意坚持使用纯 javascript，不涉及任何框架。

我正在编写一个 HTML5/CSS3 缩放图像代码，具有所有标准功能:双击缩放、双指缩放、拖动、平移等，一切都是使用 CSS3 的变换转换并结合缩放来完成的。例如。

transform: translate(100px, 100px);
transition: 100ms;

我研究了其他人的做法，它涉及左/右属性的连续动画，持续时间/距离递减，以创建一种缓入效果。

我尝试使用翻译重新创建它，使用一种递归函数(你可以看到一个 fiddle here(适用于 webkit 浏览器)，请忽略编码风格，这并不是最佳实践，只是一个演示)。在这种情况下，动画并不流畅，连续翻译不连接。

我对这个原理有一些基本的了解，我确实看过一些在线可用的算法，但我无法弄清楚如何使用 css 翻译来实现这一点。

拖动的第一部分，在 mousemove/touchmove 上完成，用光标/手指移动图像，但结束后的继续平移不是......连续的，它就像第一个动画之后的单独动画，但不是类似于自然动量/惯性效应。

Answer 1

我最终找到了一些有用的东西，它仍在进行中，但结果看起来很有希望。

起点是this post由 Aryia Hidayat 制作，特别是他的 Kinetic Scroll , 以及 post made by Joe Hewitt .另外，this older version他的代码似乎更容易理解和掌握基本概念，尽管最近的代码应该更好。

基本上，此方法不是连接具有非空持续时间的各种翻译并同步它们的时间和加速度，而是使用大量的 0 持续时间翻译，调用非常频繁。