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 cp11, // end control point cp21 // end point ] }], closed: false, stroke: 12, color: '#aaaaaa' }); let arm = new Zdog.Shape({ addTo: torso, translate: { x: 0, y: 0, z: 40 }, path: [ p0, // start { bezier: [ cp0, // start control point cp12, // end control point cp22 // end point ] }], closed: false, stroke: 12, color: '#424242' }); let arm2 = new Zdog.Shape({ addTo: torso, translate: { x: 0, y: 0, z: -40 }, path: [ p0, // start { bezier: [ cp0, // start control point cp11, // end control point cp21 // end point ] }], closed: false, stroke: 12, color: '#424242' }); let leg2 = new Zdog.Shape({ addTo: torso, translate: { x: 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0