1

所以这是一些简单的physicsjs，我有一个css动画，由我的索引文件中的div调用。所以这个项目的主要目标是让墙壁进来并在周围反弹球，墙壁不能与任何其他墙壁发生碰撞，否则它会吓坏。这是索引 http://www.fast-files.com/getfile.aspx?file=162310 

require([
    full
  ],

  function(Physics) {
    Physics(function(world) {

      // bounds of the window
      var viewportBounds = Physics.aabb(0, 0, window.innerWidth, window.innerHeight),
        edgeBounce, renderer;

      // create a renderer
      renderer = Physics.renderer('canvas', {
        el: 'viewport'
      });

      // add the renderer
      world.add(renderer);
      // render on each step
      world.on('step', function() {
        world.render();
      });

      // constrain objects to these bounds
      edgeBounce = Physics.behavior('edge-collision-detection', {
        aabb: viewportBounds,
        restitution: 0.99,
        cof: 0.8
      });

      // resize events
      window.addEventListener('resize', function() {

        // as of 0.7.0 the renderer will auto resize... so we just take the values from the renderer
        viewportBounds = Physics.aabb(0, 0, renderer.width, renderer.height);
        // update the boundaries
        edgeBounce.setAABB(viewportBounds);

      }, true);

      var viewWidth = window.innerWidth,
        viewHeight = window.innerHeight,
        viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight),
        edgeBounce, renderer;

      var hsquare = [];
      for (var i = 0, l = 1; i < l; ++i) {
        Physics.noConflict = function() {

          if (window.Physics === Physics) {
            window.Physics = _Physics;
          }

          return Physics;
        };
        hsquare.push(Physics.body('rectangle', {
          width: 1920,
          height: 100,
          x: 0 + viewWidth - 0,
          y: 0 + viewHeight - 50,
          vx: 0,
          cof: 10000000,
          restitution: 0,
          label: 'box',
          styles: {

            width: 40,
            height: 40
          }
        }));
      }
      var vsquare = [];
      for (var i = 0, l = 1; i < l; ++i) {

        vsquare.push(Physics.body('rectangle', {
          width: 100,
          height: 975,
          x: 0 + viewWidth - 50,
          y: 0 + viewHeight - 0,
          vx: 0,
          cof: 10000000,
          restitution: 0,
          label: 'box',
          styles: {

            width: 40,
            height: 40
          }
        }));

      }



      function leftArrowPressed() {
        world.add(vsquare)

      }

      function rightArrowPressed() {
        world.add(hsquare)

      }

      document.onkeydown = function(evt) {
        evt = evt || window.event;
        switch (evt.keyCode) {
          case 37:
            leftArrowPressed();
            break;
          case 39:
            rightArrowPressed();
            break;
        }
      };

      var attractor = Physics.behavior('attractor', {
        order: 0,
        strength: 0.002
      });
      world.on({
        'interact:poke': function(pos) {
          world.wakeUpAll();
          attractor.position(pos);
          world.add(attractor);
        },
        'interact:move': function(pos) {
          attractor.position(pos);
        },
        'interact:release': function() {
          world.wakeUpAll();
          world.remove(attractor);
        }
      });


      world.add([
        Physics.behavior('interactive', {
          el: renderer.container
        }), Physics.behavior('constant-acceleration'), Physics.behavior('body-impulse-response'), edgeBounce
      ]);
      world.add([
        Physics.behavior('constant-acceleration'), Physics.behavior('body-collision-detection'), Physics.behavior('sweep-prune'), edgeBounce
      ]);

      world.add(Physics.body('circle', {
        x: renderer.width * 0.5,
        y: renderer.height * 0.5,
        vx: 0,
        radius: 40,
        styles: {

        }
      }));

      Physics.util.ticker.on(function(time) {
        world.step(time);

      });
    });
  });
<!-- begin snippet: js hide: false console: true babel: false -->

    <!DOCTYPE html>
<html>
<head>
<style>
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
.right {
    z-index: 1;
    position:absolute;
      right: 0px;
    width: 100px;
    height: 1200px;
    background-color: black;
    animation-name: right;
    animation-duration: 1s;
}



@keyframes right {
    0%   {right:0px;}
    25%  {right:400px;}
    50%  {right:0px;}
}
.left {
    z-index: 1;
    position:absolute;
      left: 0px;
    width: 100px;
    height: 1200px;
    background-color: black;
    animation-name: left;
    animation-duration: 1s;
}



@keyframes left {
    0%   {left:0px;}
    25%  {left:400px;}
    50%  {left:0px;}
}
.up {
    z-index: 1;
    position:absolute;
      top: 0px;
    width: 1900px;
    height: 100px;
    background-color: black;
    animation-name: up;
    animation-duration: 1s;
}



@keyframes up {
    0%   {top:0px;}
    25%  {top:400px;}
    50%  {top:0px;}
}
.down {
    z-index: 1;
    position:absolute;
      bottom: 0px;
    width: 1900px;
    height: 100px;
    background-color: black;
    animation-name: down;
    animation-duration: 1s;
}



@keyframes down {
    0%   {bottom:0px;}
    25%  {bottom:400px;}
    50%  {bottom:0px;}
}
html, body, #viewport { margin: 0; z-index: 1; background: #ffffff; height: 100%; } .pjs-meta { color: #fff; } canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }</style>
<script data-main="scripts/config.js" src="scripts/require.js"></script>
</head>
 <body>
<canvas id="viewport" width="1082" height="974"></canvas>

</script>
</body>
 </html>

所以在这里你有所有 4 个面的向内动画，我想要对这些 div 做的是将它们转换为physicsjs 并将物理添加到动画中。

4

0 回答 0