zdog实现一个三维可旋转小人走路效果代码-html代码-BFW代码库

zdog实现一个三维可旋转小人走路效果代码

代码语言：html

所属分类：动画

代码描述：zdog实现一个三维可旋转小人走路效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
.zdog-svg {
  background: #d7edff;
  cursor: move;
}
</style>



</head>

<body >
  <svg class="zdog-svg" width="300" height="200"></svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
      <script >
// Made with Zdog
const TAU = Zdog.TAU;
var isSpinning = true;
var delta = TAU * 2 / 32;
let illo = new Zdog.Illustration({
  element: '.zdog-svg' });


let p0 = new Zdog.Vector({ x: 0, y: 0 });
let cp0 = new Zdog.Vector({ x: 0, y: 10 });
let cp11 = new Zdog.Vector({ x: 0, y: 40 });
let cp12 = new Zdog.Vector({ x: 0, y: 40 });
let cp21 = new Zdog.Vector({ x: 0, y: 60 });
let cp22 = new Zdog.Vector({ x: 0, y: 60 });

let torso = new Zdog.Shape({
  addTo: illo,
  translate: { x: 0, y: -40 },
  stroke: 58,
  color: '#ffffff' });

let eye = new Zdog.Shape({
  addTo: torso,
  translate: { x: 32, y: 0, z: 10 },
  path: [
  { x: 0, y: -5 }, // start at 1st point
  { x: 0, y: 5 } // line to 2nd point
  ],
  stroke: 10,
  color: '#000000' });


eye.copy({
  addTo: torso,
  translate: { x: 32, y: 0, z: -10 },

  stroke: 10,
  color: '#000000' });

let leg = new Zdog.Shape({
  addTo: torso,
  translate: { x: 0, y: 32, z: 24 },
  path: [
  p0, // start
  { bezier: [
    cp0, // start control point
   .........完整代码请登录后点击上方下载按钮下载查看