matterjs实现重力模拟摇摆画线动画效果代码-html代码-BFW代码库

matterjs实现重力模拟摇摆画线动画效果代码

代码语言：html

所属分类：动画

代码描述：matterjs实现重力模拟摇摆画线动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">



    <style>
        canvas {display: block}
    </style>


</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.17.1.js"></script>
    <script id="rendered-js">
        var render;
        
        function start() {
          // create engine
          const engine = Matter.Engine.create();
        
          // create renderer
          render = Matter.Render.create({
            element: document.body,
            engine: engine,
            options: {
              width: innerWidth,
              height: innerHeight,
              wireframes: false } });
        
        
        
          Matter.Render.run(render);
        
          // create runner
          runner = Matter.Runner.create();
          Matter.Runner.run(runner, engine);
        
          // add bodies
          const length = 200;
          const width = 25;
          const gap = 0.43;
        
          const group = Matter.Body.nextGroup(true);
        
          const rectangle = function (x, y) {
            return Matter.Bodies.rectangle(x, y, length, width, {
              collisionFilter: { group: group },
              friction: 0,
              frictionAir: -0.002,
              chamfer: 5,
              render: {
                strokeStyle: '#fffb',
                fillStyle: 'transparent',
                lineWidth: 2 } });
        
        
          };
        
          const pendulum = Matter.Composites.stack(innerWidth / 2, innerHeight / 4, 2, 1, -width, 0, rectangle);
        
          const constraintColor = {
            strokeStyle: '#778' };
        
        
          Matter.Composites.chain(pendulum, gap, 0, -gap, 0, {
            length: 0,
            render: constraintColor });
        
        
          const upperArm = pendulum.bodies[0];
        
          Matter.Composite.add(pendulum, Matter.Constraint.create({
            bodyB: upperArm,
            pointB: {
              x: -length * gap,
              y: 0 },
        
            pointA: {
              x: pendulum.bodies[0].position.x - length * gap,
              y: pendulum.bodies[0].position.y },
        
            length: 0,
            render: constraintColor }));
        
        
 .........完整代码请登录后点击上方下载按钮下载查看