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.getAttrib.........完整代码请登录后点击上方下载按钮下载查看
网友评论0