使用Matter.js构建带引力的网格化图片

图片切分成多个格子，在鼠标拖拉时，模拟出彼此之间的一种物理引力（拉伸力）。

h5, canvas, matter.js, 图片效果

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2731
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();
const app = {}
const WORLD_WIDTH = 1000;
const WORLD_HEIGHT = 1000;

app.engine = Matter.Engine.create();
app.render = Matter.Render.create({
    element: elRender,
    engine: app.engine,
    options: {
        width: WORLD_WIDTH,
        height: WORLD_HEIGHT
    }
});

app.engine.world.gravity.x = 0;
app.engine.world.gravity.y = 0;

const RATIO = 700 / 933;
const TOP = 10;
const LEFT = 10;
const COLS = 4;
const ROWS = Math.floor(COLS / RATIO);
const WIDTH = Math.min(innerWidth) / 4 / COLS;
const HEIGHT = WIDTH;
const COLGAP = 0;
const ROWGAP = 0;
const STIFFNESS = 0.2;
const DAMPING = 0.9;

const bodies = Matter.Composite.allBodies(composite);

for (const [i, body] of bodies.entries()) {
    const row = (i / COLS | 0);
    const col = (i % COLS);
    if (row > 0) {
        const bodyA = bodies[(row - 1) * COLS + col];
        const pointA = {
            x: 0,
            y: 0.5 * HEIGHT
        };
        const bodyB = body;
        const pointB = {
            x: 0,
            y: -0.5 * HEIGHT
        };
        const c = Matter.Constraint.create({
            bodyA, pointA, bodyB, pointB, stiffness: STIFFNESS, damping: DAMPING
        });
        Matter.World.add(app.engine.world, c);
    }
    if (col > 0) {
        const bodyA = bodies[row * COLS + col - 1];
        const pointA = {
            x: 0.5 * WIDTH,
            y: 0
        };
        const bodyB = body;
        const pointB = {
            x: -0.5 * WIDTH,
            y: 0
        };
        const c = Matter.Constraint.create({
            bodyA, pointA, bodyB, pointB, stiffness: STIFFNESS
        });
        Matter.World.add(app.engine.world, c);
    }
}

Matter.Engine.run(app.engine);
//Matter.Render.run(app.render);

// prepare dom elms
const elms = [];
const cachedData = new WeakMap();

for (const [i, body] of bodies.entries()) {
    const elm = document.createElement('div');
    elm.classList.add('tile');
    elm.style.backgroundSize = `${COLS*100}% ${ROWS*100}%`
    elm.style.width = `${WIDTH}px`;
    elm.style.height = `${HEIGHT}px`;
    const row = i / COLS | 0;
    const col = i % COLS;
    const data = {
        bgOffsetX: col * 100,
        bgOffsetY: row * 100,
        body: body
    };
    cachedData.set(elm, data);
    elm.style.top = `${body.position.y}px`;
    elm.style.left = `${body.position.x}px`;
    elm.style.backgroundPosition = `${-data.bgOffsetX}% ${-data.bgOffsetY}%`;
    elm.style.transform = `translate(-50%,-50%)`;
    elm.ondragstart = () => false;
    elm.ondrop = () => false;
    elms.push(elm);
    elDOM.appendChild(elm);
}

// set elLayer
//elLayer.style.width = `${WIDTH * COLS}px`;
//elLayer.style.height = `${HEIGHT * 1}px`;
//elLayer.style.transformOrigin = `${WIDTH/2}px ${HEIGHT/2}px`

// update tiles position and elLayer
Matter.Events.on(app.engine, `tick`, e => {
    for (const [i, body] of bodies.entries()) {
        const elm = elms[i];
        const data = cachedData.get(elm);
        elm.style.top = `${data.body.position.y}px`;
        elm.style.left = `${data.body.position.x}px`;
        elm.style.transform = `translate(-50%,-50%)rotate(${data.body.angle}rad)`;
    }

// 
    //const body = bodies[0];
    //elLayer.style.top = `${body.position.y}px`;
    //elLayer.style.left = `${body.position.x}px`;
    //elLayer.style.transform = `translate(${-WIDTH/2}px, ${-HEIGHT/2}px)rotate(${body.angle}rad)`;
});

// drag to right at the beginning
const targetBody = bodies[COLS - 1];
app.engine.timing.timeScale = 0.1;
Matter.Body.setVelocity(targetBody, {
    x: innerWidth,
    y: innerHeight / 2
});

// add moust control
const mouseConstraint = Matter.MouseConstraint.create(app.engine, {
    mouse: Matter.Mouse.create(elWrap)
});
Matter.World.add(app.engine.world, mouseConstraint);

编译

CSS

HTML

图片切分成多个格子，在鼠标拖拉时，模拟出彼此之间的一种物理引力（拉伸力）。

h5, canvas, matter.js, 图片效果

编辑器支持Emmet

快捷键

图片切分成多个格子，在鼠标拖拉时，模拟出彼此之间的一种物理引力（拉伸力）。

h5, canvas, matter.js, 图片效果

使用svg filter和canvas实现的图像碎片化特效

基于Mansory构建的一款带运动效果的网格布局照片墙网页模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：