@arco-design/transformable

#Transformable - Powerful 2D Gesture Anim Solution

Preview

---
!Effect Preview

Installation

---

Available as an npm package

``bash
// with npm
npm install @arco-design/transformable

// with yarn
yarn add @arco-design/transformable
`

Quick Start

---

`javascript
import TransformAble from '@arco-design/transformable';

function MyComponent() {
const domRef = useRef(null);
const controllerRef = useRef(null);
useEffect(() => {
controllerRef.current = new TransformAble({
dom: this.dom,
onTransform: (state) => {
const { translateX, translateY, scale, transformOrigin } = state;
// DO SOMETHING IF NECESSARY
},
});
}, []);
function resetDom() {
controllerRef.current.zoomTo(1, {
fitEdge: true,
});
}
return (



)
}
`

Options

---
All this options can be dynamic changed by calling .config()

|Name|Type|Default|Decription|
|-----|-----|-----------|----------------------|
|active|boolean|true|interactive avaiable status flag|
|maxScale|number|2|max scale limit|
|minScale|number|0.5|min scale limit|
|preventScroll|boolean|true|triggle e.preventDefault since touch, in order to prevent scroll dom behavior|
|dom|HTMLElement|null|transform & interactive target|
|useDomBoundary|boolean|true| decide how to compute target boundary for collision detection (inside edge).
true: use dom.getBoundingClientRect when dom set;
false: manually set by .setBoundary()|
|bouncing|number|300|scale bouncing animation duration(ms)|
|damp|number|2|momentum-based scrolling option, speed decreasement per frame, default as 2px/frame|
|bounceRateX|number|0|drag damping [translate offset / touch offset] when drag(x-axis) out of viewport, set (0, 1] value to enable dragging out of edge with damping effect and rebound animation|
|bounceRateX|number|0|drag damping [translate offset / touch offset] when drag(y-axis) out of viewport, same to above|
|motionThreshold|number|10|min speed for genreate momentum-based scrollin effect, default as 10px/frame|
|fixedX|boolean|false|disable x-axis dragging|
|fixedY|boolean|false|disable y-axis dragging|
|dragMode|string|'hybrid'|drag effect mode.
'always': enable dragging without scaling;
'hybrid': enable drag only if scaled;
'none': no dragging|
|swipeMode|string|'animation'|decide how to implement momentum-based scrolling animation.
'animation': insert