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

How can I add momentum / inertia to a drag using CSS transform?

本文关键字：添加拖动 CSS 何使用变换更新时间：2023-09-26

我试图在缩放图像拖动中添加动量/惯性效果（就像本例中或iOs一样），但我遇到了困难。

我已经为此挣扎了一段时间，并找到了一些有用的资源（比如这个），但大多数解决方案都涉及jQuery，我更喜欢使用简单的javascript，不涉及框架。

我正在编写HTML5/CSS3缩放图像代码，具有所有标准功能：双击缩放、捏缩放、拖动、平移等。所有操作都使用CSS3的转换转换和缩放来完成。示例

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

我观察了其他人是如何做到这一点的，它涉及到左/右属性的连续动画，持续时间/距离不断减少，以创造一种轻松的效果。

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

我对这个原理有一些基本的理解，我确实看了一些网上可用的算法，但我不知道如何使用css翻译来实现这一点。

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

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

起点是Arya Hidayat的这篇帖子，尤其是他的《动力卷轴》，以及Joe Hewitt的一篇帖子。此外，他的代码的旧版本似乎更容易理解和掌握基本概念，尽管最近的版本应该更好。

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

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