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

Question

我试图为一个缩放的图像拖动添加一个动量/惯性效果(就像在这个例子中或者就像iO一样)并且我很难用它.

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

我正在制作一个HTML5/CSS3缩放图像代码,具有所有标准功能:双击缩放,捏缩放,拖动,平移等等.一切都是使用CSS3的变换转换,结合缩放.防爆.

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

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

我尝试使用翻译来重新创建它,使用一种递归函数(你可以在这里看到一个小提琴(与webkit浏览器一起使用),请忽略编码风格,它不是最佳实践,只是演示).在这种情况下,动画并不是流畅的,连续的翻译不会连接.

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

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

Answer 1

我设法找到了一些有用的东西,它仍在进行中,但结果看起来很有希望.

起点是由Aryia Hidayat撰写的这篇文章,特别是他的Kinetic Sc​​roll,以及Joe Hewitt撰写的一篇文章.此外,他的代码的旧版本似乎更容易理解并掌握基本概念,即使最新版本应该更好.

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

Answer 2

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