如何使用CSS变换将动量/惯性添加到拖动中？

Question

我试图在缩放的图像拖拽中添加动量/惯性效果(就像在this example中，或者就像iOs一样)，但我很难做到这一点。

我已经在这个问题上挣扎了一段时间，找到了一些有用的资源(如this one)，但大多数解决方案都涉及jQuery，我更喜欢坚持使用普通的javascript，而不涉及框架。

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

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

我看了看其他人是怎么做的，它涉及到左/右属性的连续动画，并减少了持续时间/距离，以创建一种缓入效果。

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

我对这一原理有一些基本的理解，我确实看过一些在线可用的算法，但我就是不知道如何使用css翻译来实现这一点。

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

Answer 1

一种方法是使用animation-timing-function:，我认为它目前需要供应商前缀。您可以选择使用ease-in、ease-out、ease-in-out或cubic-bezier。后者使用2D空间中函数的可视化；使用生成器更容易配置该函数。我个人最喜欢的是Ceaser。

Answer 2

我最终找到了一些有用的东西，这仍然是一项正在进行的工作，但结果看起来很有希望。

起始点是Aryia Hidayat制造的this post，特别是他的Kinetic Scroll，以及一台post made by Joe Hewitt。此外，他的代码的this older version似乎更容易理解和掌握基本概念，即使最近的代码应该更好。

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