使用 @use-gesture 库的教程
项目介绍
@use-gesture 是一个强大的库,允许你将更丰富的鼠标和触摸事件绑定到任何组件或视图。通过接收到的数据,设置手势变得非常简单,通常只需几行代码。你可以单独使用它,但为了充分发挥其功能,建议与动画库(如 react-spring)结合使用。
项目快速启动
安装
React
使用 Yarn 安装:
yarn add @use-gesture/react
使用 NPM 安装:
npm install @use-gesture/react
Vanilla JavaScript
使用 Yarn 安装:
yarn add @use-gesture/vanilla
使用 NPM 安装:
npm install @use-gesture/vanilla
示例代码
React
import { useSpring, animated } from '@react-spring/web'
import { useDrag } from '@use-gesture/react'
function Example() {
const [[x, y], api] = useSpring(() => ({ x: 0, y: 0 }))
// Set the drag hook and define component movement based on gesture data
const bind = useDrag(({ down, movement: [mx, my] }) => {
api.start({ x: down ? mx : 0, y: down ? my : 0 })
})
// Bind it to a component
return <animated.div {...bind()} style={{ x, y, touchAction: 'none' }} />
}
Vanilla JavaScript
<!-- index.html -->
<div id="drag"></div>
<!-- script.js -->
const el = document.getElementById('drag')
const gesture = new DragGesture(el, ({ active, movement: [mx, my] }) => {
setActive(active)
anime({
targets: el,
translateX: active ? mx : 0,
translateY: active ? my : 0,
duration: active ? 0 : 1000
})
})
// when you want to remove the listener
gesture.destroy()
应用案例和最佳实践
拖拽组件
使用 useDrag
钩子可以轻松实现组件的拖拽功能。以下是一个简单的示例:
import { useSpring, animated } from '@react-spring/web'
import { useDrag } from '@use-gesture/react'
function DraggableComponent() {
const [[x, y], api] = useSpring(() => ({ x: 0, y: 0 }))
const bind = useDrag(({ down, movement: [mx, my] }) => {
api.start({ x: down ? mx : 0, y: down ? my : 0 })
})
return <animated.div {...bind()} style={{ x, y, touchAction: 'none' }} />
}
缩放手势
使用 usePinch
钩子可以实现缩放手势:
import { useSpring, animated } from '@react-spring/web'
import { usePinch } from '@use-gesture/react'
function PinchableComponent() {
const [scale, api] = useSpring(() => ({ scale: 1 }))
const bind = usePinch(({ offset: [d] }) => {
api.start({ scale: d })
})
return <animated.div {...bind()} style={{ scale, touchAction: 'none' }} />
}
典型生态项目
React-Spring
@use-gesture 通常与 react-spring 结合使用,以实现平滑的动画效果。react-spring 是一个基于弹簧物理的动画库,可以与 @use-gesture 无缝集成。
Anime.js
对于 Vanilla JavaScript 项目,可以与 Anime.js 结合使用,实现复杂的动画效果。Anime.js 是一个轻量级的 JavaScript 动画库,具有简单而强大的 API。
通过这些生态项目的结合使用,可以大大增强 @use-gesture 的功能和表现力。