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

Question

我正在尝试为缩放的图像拖动添加动量/惯性效果（例如在this example或就像iOs那样）并且我很难用它。

我一直在努力解决这个问题，并找到了一些有用的资源（比如this one），但大多数解决方案都涉及jQuery，我宁愿坚持使用简单的javascript，也不涉及框架。

我正在开发HTML5 / CSS3缩放图像代码，具有所有标准功能：双击缩放，缩放缩放，拖动，平移等等。一切都是使用CSS3的变换转换，结合缩放。实施例

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

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

我试图使用翻译来重新创建它，使用一种递归函数（你可以看到一个小提琴here（适用于webkit浏览器），请忽略编码风格，它不是最好的做法，只是一个演示）。在这种情况下，动画并不是流畅的，连续的翻译不会连接。

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

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

Answer 1

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

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

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

Answer 2

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