#Transformable - Powerful 2D Gesture Anim Solution
Preview
Installation
Available as an npm package
// with npm
npm install @arco-design/transformable
// with yarn
yarn add @arco-design/transformable
Quick Start
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 (
<div className="transform-container"
style={{ overflow: 'hidden' }}
>
<div
className="transform-demo-object"
ref={domRef}
>
<Button onClick={resetDom}>reset</Button>
</div>
)
}
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 <style> css declaration when animation triggered;'transition': use transition ease function when animation triggered |
| transformMode | string | 'translate-first' | animation effect may be different when dragging & scaling both.'translate-first': set css property transform as translate()scale();'scale-first': set transform as scale()translate();'matrix': set transform as matrix() |
| cubic | object | { scroll: [.33, 1, .66, 1], bounce: [.17, 1, .17, 1], } | anim easing function (cubic-bezier) of scroll/bounce effect |
| viewport | object | { left: 0, right: screenWidth, top: 0, bottom: screenHeight } | viewport scope for collision detection, the edge is defined as viewport ∩ boundary |