#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|