zdog实现一个面包拳击手三维动画效果代码
代码语言:html
所属分类:动画
代码描述:zdog实现一个面包拳击手三维动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { height: 100%; width: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; justify-content: center; background-color: #4d3d3d; min-height: 100vh; overflow: hidden; } svg { width: 100%; height: 100%; cursor: move; } </style> </head> <body > <svg id="burger" width="200" height="200"></svg> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script > const svg = document.getElementById('burger'); const COLORS = { arm: '#181818', bun: '#FAAB3E', cheese: '#FFDA01', eye: '#181818', glove: '#E81802', patty: '#892C0E', seed: '#FAD6A2', tomato: '#E81802' } const DIAMETER = 200; const LENGTH = 24; const STROKE = LENGTH / 2; const HALFSTROKE = STROKE / 2; const TAU = Zdog.TAU; const ZOOM = 3; let sceneWidth = DIAMETER; let sceneHeight = DIAMETER; let viewWidth = sceneWidth * ZOOM; let viewHeight = sceneHeight * ZOOM; let svgWidth = svg.getAttribute('width'); let svgHeight = svg.getAttribute('height'); svg.setAttribute('viewBox', `${-viewWidth/2} ${-viewHeight/2} ` + `${viewWidth} ${viewHeight}`); let animObj = { browRotateZ: -0.1, browTranslateY: STROKE, burgerRotateX: 0, burgerRotateZ: 0, burgerTranslateX: 0, burgerTranslateZ: 0, leftArmRotateX: 3.75, leftArmTranslateY: 0, leftForeArmRotateX: 1.5, rightArmRotateX: -3, rightArmTranslateY: 0, rightForeArmRotateX: 1.5, } let scene = new Zdog.Anchor({ rotate: { x: 1.5, z: -0.5 } }); // ----- burger ----- // let burger = new Zdog.Anchor({ addTo: scene, }) let patty = new Zdog.Cylinder({ addTo: burger, color: COLORS.patty, diameter: DIAMETER + HALFSTROKE, fill: true, length: LENGTH, stroke: STROKE, }); let cheese = new Zdog.Rect({ addTo: patty, color: COLORS.cheese, fill: true, height: DIAMETER - STROKE, stroke: STROKE, width: DIAMETER - STROKE, rotate: { z: TAU / 3 }, translate: { z: LENGTH } }); let tomato = new Zdog.Cylinder({ addTo: cheese, color: COLORS.tomato, diameter: DIAMETER - HALFSTROKE, fill: true, length: LENGTH / 2, stroke: false, translate: { z: STROKE } }); let bun = new Zdog.Hemisphere({ addTo: burger, color: COLORS.bun, diameter: DIAMETER, stroke: STROKE, translate: { z: (STROKE * 4) } }); let bottom = new Zdog.Cylinder({ addTo: burger, color: COLORS.bun, diameter: bun.diameter, length: LENGTH, stroke: bun.stroke, translate: { z: -LENGTH + -STROKE }, }); // ----- bun seeds ----- // let seedAnchor = new Zdog.Anchor({ addTo: bun }); let seed = new Zdog.Shape({ addTo: seedAnchor, color: COLORS.seed, stroke: 8, path: [{ x: -HALFSTROKE }, { x: HALFSTROKE }], translate: { z: (bun.diameter + bun.stroke) / 2 + 1 } }); seedAnchor.copyGraph({ rotate: { x: 0.6, y: 0.35, z: 1 }, }); seedAnchor.copyGraph({ rotate: { x: -0.6, y: 0.35, z: -1 }, }); seedAnchor.copyGraph({ rotate: { x: 0.6, y: -0.35, z: -1 }, }); seedAnchor.copyGraph({ rotate: { x: -0.6, y: -0.35, z: 1 }, }); seedAnchor.copyGraph({ rotate: { y: -0.75 }, }); seedAnchor.copyGraph({ rotate: { y: 0.75 }, }); // ----- face ----- // let faceAnchor = new Zdog.Anchor({ addTo: bun, rotate: { x: TAU / 4 }, translate: { y: bun.diameter / 2, z: bun.diameter / 6, } }); let eye = new Zdog.Ellipse({ addTo: faceAnchor, closed: true, color: COLORS.eye, diameter: STROKE, fill: true, stroke: HALFSTROKE, rotate: { z: TAU / -4 }, translate: { x: STROKE * -3 }, }); eye.copy({ translate: { x: STROKE * 3 }, }); let brow = new Zdog.Shape({ addTo: faceAnchor, color: COLORS.patty, stroke: STROKE, path: [{ x: -STROKE }, { x: STROKE }], rotate: { z: -animObj.browRotateZ }, translate: { x: STROKE * -3, y: animObj.browTranslateY } }); brow.c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0