Skip to content

Latest commit

 

History

History
79 lines (70 loc) · 3.59 KB

README.md

File metadata and controls

79 lines (70 loc) · 3.59 KB

#Transformable - Powerful 2D Gesture Anim Solution

Preview


Effect 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