如何在不滚动页面的情况下在 iOS 上使用 HammerJS 捏合手势?
How can I use a HammerJS pinch gesture on iOS without scrolling a page?
我正在使用 Ember-Gestures 在 Cordova 应用程序中实现 Hammer.js 来实现一些简单的手势控制。
我 运行 遇到了一个主要问题,即任何触发动画的手势(过渡、变换、SVG 动画),如果屏幕滚动任何量,该动画将冻结并结束滚动完成时的状态。特别是,我在垂直滚动页面上有一个元素,应该(理想情况下)能够收缩和收缩以将其展开为多个元素或返回到一个元素。
我很熟悉,作为优化 iOS 会在滚动期间冻结所有动画。然而,由于捏合和滑动手势都可以轻微滚动屏幕,这对用户体验来说很糟糕,因为如果用户滑动,例如,稍微向上和向左滑动,而不是直接向左滑动,精心制作的过渡可能会完全冻结。
我已经尝试了一些解决方案来在滚动期间启用渲染,例如 here,但这些解决方案似乎不适用于现代版本的 iOS。我还尝试了 hammerJS e.preventDefault() 方法来冻结通过 Ember-gestures 扩展调用的手势期间的滚动,所以我的方法看起来像:
swipeLeft(e) {
e.originalEvent.gesture.srcEvent.preventDefault()
// Do stuff
},
...但这没有任何明显的效果。 (也许这里有问题?gesture
本身没有 preventDefault()
方法,ember-gestures 似乎试图抽象出其中的一些。
有什么方法可以在滚动期间保持动画呈现(这似乎不太可能),或者在执行动画之前停止页面滚动(并防止在执行时滚动)?
或者有什么方法可以对被解释为 "pinch" 或 "swipe" 手势的内容添加约束,以便排除那些也被解释为滚动手势的内容。
我的解决方案最终是添加事件处理程序,这样当用多个手指触摸屏幕时,主体被设置为固定位置,这样它在触摸期间不可滚动(当固定位置被移除时触摸结束)。我将处理程序添加到 pinchStart
和 pinchEnd
事件
我怀疑可能有更优雅的解决方案,但为了在捏合时禁用意外滚动以便 D3.js 动画不会中途冻结,这是一个快速有效的修复。
我正在使用 Ember-Gestures 在 Cordova 应用程序中实现 Hammer.js 来实现一些简单的手势控制。
我 运行 遇到了一个主要问题,即任何触发动画的手势(过渡、变换、SVG 动画),如果屏幕滚动任何量,该动画将冻结并结束滚动完成时的状态。特别是,我在垂直滚动页面上有一个元素,应该(理想情况下)能够收缩和收缩以将其展开为多个元素或返回到一个元素。
我很熟悉,作为优化 iOS 会在滚动期间冻结所有动画。然而,由于捏合和滑动手势都可以轻微滚动屏幕,这对用户体验来说很糟糕,因为如果用户滑动,例如,稍微向上和向左滑动,而不是直接向左滑动,精心制作的过渡可能会完全冻结。
我已经尝试了一些解决方案来在滚动期间启用渲染,例如 here,但这些解决方案似乎不适用于现代版本的 iOS。我还尝试了 hammerJS e.preventDefault() 方法来冻结通过 Ember-gestures 扩展调用的手势期间的滚动,所以我的方法看起来像:
swipeLeft(e) {
e.originalEvent.gesture.srcEvent.preventDefault()
// Do stuff
},
...但这没有任何明显的效果。 (也许这里有问题?gesture
本身没有 preventDefault()
方法,ember-gestures 似乎试图抽象出其中的一些。
有什么方法可以在滚动期间保持动画呈现(这似乎不太可能),或者在执行动画之前停止页面滚动(并防止在执行时滚动)?
或者有什么方法可以对被解释为 "pinch" 或 "swipe" 手势的内容添加约束,以便排除那些也被解释为滚动手势的内容。
我的解决方案最终是添加事件处理程序,这样当用多个手指触摸屏幕时,主体被设置为固定位置,这样它在触摸期间不可滚动(当固定位置被移除时触摸结束)。我将处理程序添加到 pinchStart
和 pinchEnd
事件
我怀疑可能有更优雅的解决方案,但为了在捏合时禁用意外滚动以便 D3.js 动画不会中途冻结,这是一个快速有效的修复。