11

我正在尝试为缩放的图像拖动添加动量/惯性效果（就像在这个例子中或者就像 iOs 那样），我很难用它。

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

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

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

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

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

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

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

4

2 回答 2

11

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

起点是Aryia Hidayat 的这篇文章，特别是他的Kinetic Sc​​roll ，以及Joe Hewitt 的一篇文章。此外，他的代码的这个旧版本似乎更容易理解和掌握基本概念，尽管最新版本应该更好。

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

于 2012-08-21T13:49:23.667 回答
2

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

于 2012-08-20T13:42:42.193 回答