zdog.js 是一个圆形、扁平、设计师友好的伪3D引擎-BFW插件库

zdog.js 是一个圆形、扁平、设计师友好的伪3D引擎

zdog.js 是一个圆形、扁平、设计师友好的伪3D引擎。

Zdog 灵感来自 Dogz ，Zdog 使用相同的原理。它使用<canvas>或<svg>中的2D绘图API渲染所有形状。球体实际上是点。 Toruses实际上是圆圈。胶囊实际上是粗线。这是一个简单而有效的技巧。

Zdog在美国用语中被称为“Zee-dog”，在英国被称为“Zed-dog”。

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">

        bready(function() {
            use(["zdog.dist"], function() {
                const yellow = '#F4E90C';
                const darkyellow = '#EAB306';

                const illo = new Zdog.Illustration({
                    element: '.zdog-canvas',
                    dragRotate: true
                });


                let triforces = [new Zdog.Polygon({
                    addTo: illo,
                    radius: 30,
                    sides: 3,
                    translate: {
                        y: -38
                    },
                    stroke: 10,
                    fill: true,
                    color: yellow
                })];

                triforces.push(triforces[0].copy({
                    translate: {
                        x: -34, y: 20
                    }
                }));

                triforces.push(triforces[0].copy({
                    translate: {
                        x: 34, y: 20
                    }
                }));

                let ticker = 0;
                let cycleCount = 150;
                let animate = () => {
                    let progress = ticker / cycleCount;
                    let tween = Zdog.easeInOut(progress % 1, 3);
                    triforces[0].rotate.y = tween * Zdog.TAU;
                    triforces[0].rotate.z = tween * Zdog.TAU;
                    triforces[1].rotate.y = tween * Zdog.TAU;
                    triforces[1].rotate.z = tween * Zdog.TAU;
                    triforces[2].rotate.y = tween * Zdog.TAU;
                    triforces[2].rotate.z = tween * Zdog.TAU;
                    ticker++;
                    illo.updateRenderGraph();
                    requestAnimationFrame(animate);
                };
                animate();
            });
        });
    </script>
    <style>
      body {
  background: #211B3D;
  font-family: 'Goblin One', cursive;
  color: #54A1B2;
}

.zdog-canvas {
  width: 400px;
  height: 200px;
  cursor: move;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -75%);
          transform: translate(-50%, -75%);
}

.texts {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -75%);
          transform: translate(-50%, -75%);
  margin-top: 140px;
  text-align: center;
}
.texts h1 {
  margin: 0;
  padding: 0;
  font-size: 32px;
  letter-spacing: 0.1em;
}
.texts p {
  margin: 10px 0 0;
  padding: 0;
  font-size: 12px;
}

    </style>

</head>
<body>
    <canvas class="zdog-canvas"></canvas>
</body>
</html>

zdog.js 是一个圆形、扁平、设计师友好的伪3D引擎

网友评论0

pixi.min.js

jquery.gif.js

gif.js

jquery.fliptimer.js

gifshot.js

libgif.js

particleground.js

pts.js

bubbly-bg.js

PixelWave.js