Matter引擎实现香蕉动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } </style> </head> <body translate="no"> <script src='http://repo.bfw.wiki/bfwrepo/js/decomp.js'></script> <script src='http://repo.bfw.wiki/bfwrepo/js/matter.min.js'></script> <script> // Set window height and width variables let width = window.innerWidth, height = window.innerHeight; // This project uses Matter so load in the modules as necessary var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, World = Matter.World, Mouse = Matter.Mouse, Body = Matter.Body, Bodies = Matter.Bodies, Vertices = Matter.Vertices, Composite = Matter.Composite; // Create an engine var engine = Engine.create(); // Create a renderer var render = Render.create({ element: document.body, engine: engine, options: { showAngleIndicator: false, wireframes: false, background: "#f7f7f8", width: width, height: height, showAngleIndicator: false, showCollisions: false, showInternalEdges: false, showVelocity: false } }); // Set the global gravity variables to be slower than normal engine.world.gravity.y = 0.05; engine.world.gravity.x = 0; engine.world.gravity.scale = 0.001; // Create runner const runner = Runner.create(); Runner.run(runner, engine); // Add container walls World.add(engine.world, [ Bodies.rectangle(width / 2, height + 150, width * 2, 60, { label: "ground", isStatic: true, render: { visible: false } }), Bodies.rectangle(-30, height / 2, 60, height * 2, { label: "left-wall", isStatic: true, render: { visible: false } }), Bodies.rectangle(width + 30, height / 2, 60, height * 2, { label: "right-wall", isStatic: true, render: { visible: false } })]); // Define the banana shape with a set of coordinates const bananaSet = Vertices.fromPath( "0 47.6 1.6 41.2 14.4 38.6 36.8 39.2 55.2 33.6 71.2 20.2 74.8 14.2 72.6 3.2 79.8 0 77.2 4.2 78.........完整代码请登录后点击上方下载按钮下载查看
网友评论0