HTML элементов с Материей. js - PullRequest
Новая
       56

HTML элементов с Материей. js

1 голос
/ 25 апреля 2020

Я бы хотел переместить HTML элементов с помощью Материи. js таким образом, как this .

Это мои объекты: 

div {
  color: white;
  font-size: 70px;
  padding: 20px;
  display: inline-block;
  font-family: Arial;
  background: azure;
}

.canvas {
  width: 500px;
  height: 500px;
}

.object-one {
  background: blue;
}

.object-two {
  background: red;
}

.object-three {
  background: green;
}
<script src="https://raw.githubusercontent.com/liabru/matter-js/master/build/matter.js"></script>

<div class="canvas">

  <div class="object-one">One</div>
  <div class="object-two">Two</div>
  <div class="object-three">Three</div>

</div>

Возможно ли это вообще? И может кто-нибудь помочь мне, пожалуйста? :)

1 Ответ

1 голос
/ 02 мая 2020

Мой сайт создан с использованием вещества. js. Я сделал так, чтобы преобразовать мои элементы DOM в соответствии с преобразованием материальных тел в функции update(). 

var bodiesDom = document.querySelectorAll('.matter-body');
var bodies = [];
for (var i = 0, l = bodiesDom.length; i < l; i++) {
  if (bodiesDom[i].classList.contains('hot')) {
    frA = 0.1;
    oY = -40;
  } else {
    frA = 0;
    oY = 0;
  }
  if (bodiesDom[i].classList.contains('strip')) {
    // Strip
    var body = Bodies.rectangle(
      VIEW.centerX + Math.floor(Math.random() * VIEW.width/2) - VIEW.width/4,
      oY,
      VIEW.width * bodiesDom[i].offsetWidth / window.innerWidth,
      VIEW.height * bodiesDom[i].offsetHeight / window.innerHeight, {
        restitution:      0.05,
        friction:         2,
        frictionAir:      frA,
        frictionStatic:   20,
        density:          100,
        chamfer:          { radius: 4 },
        angle:            (Math.random() * 2.000) - 1.000
      }
    );
  } else if (bodiesDom[i].classList.contains('page-nav')) {
    // Nav
    var body = Bodies.circle(
      VIEW.centerX + Math.floor(Math.random() * VIEW.width/2) - VIEW.width/4,
      0,
      24, {
        restitution:      0.3,
        friction:         2,
        frictionAir:      0,
        frictionStatic:   2,
        density:          100,
        angle:            (Math.random() * 2.000) - 1.000
      }
    );
  }
  bodiesDom[i].id = body.id;
  bodies.push(body);
}

function update() {

  // strips
  for (var i = 0, l = bodiesDom.length; i < l; i++) {
    var bodyDom = bodiesDom[i];
    var body = null;
    for (var j = 0, k = bodies.length; j < k; j++) {
      if (bodies[j].id == bodyDom.id) {
        body = bodies[j];
        break;
      }
    }

    if (body === null) continue;

    bodyDom.style.transform = "translate( " +
      (body.position.x - bodyDom.offsetWidth / 2) +
      "px, " +
      (body.position.y - bodyDom.offsetHeight / 2) +
      "px )";
    bodyDom.style.transform += "rotate( " + body.angle + "rad )";
  }

  window.requestAnimationFrame(update);
}

Код в https://github.com/aentan/aenism2/blob/master/static/src/js/main.js

...