matterjs模拟挂满文字卡片的绳子重力感应动画效果代码
代码语言:html
所属分类:动画
代码描述:matterjs模拟挂满文字卡片的绳子重力感应动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap"); body { height: 100vh; margin: 0; padding: 0; overflow-x: hidden; width: 100vw; } .link { position: absolute; top: 0; left: 0; width: 80px; height: 10px; background-color: black; z-index: 1; } .flag { display: grid; place-items: center; position: absolute; top: 0; left: 0; width: 60px; height: 60px; background-color: red; background-size: cover; background-position: center; z-index: 2; color: white; font-size: 3rem; font-family: "Inter", sans-serif; border-radius: 0 0 10px 10px; } .flag:nth-child(4n) { background-color: coral; } .flag:nth-child(4n+1) { background-color: lime; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.17.1.js"></script> <script> const { Engine, Render, Runner, World, Bodies, Events, Composites, Composite, Constraint, Body } = Matter; function createRope(line, pos, world, group, linkWidth, flagWidth) { let links = 0; const drop = 150; line.split("").forEach((letter) => { const d = document.createElement("div"); d.classList.add("link"); document.body.appendChild(d); const l = document.createElement("div"); l.classList.add("flag"); l.innerText = letter; document.body.appendChild(l); links += 2; }); const d = document.createElement("div"); d.classList.add("link"); document.body.appendChild(d); links++; const ropeA = Composites.stack( 100, 100 + pos * drop, links, 1, 0, 0, function (x, y, index) { return index % 2 === 0 ? Bodies.rectangle( 100 + index * ((linkWidth + flagWidth) * 0.5), y, linkWidth, linkWidth * 0.2, { collisionFilter: { group: group } } ) : Bodies.rectangle( 100 + index * ((linkWidth + flagWidth) * 0.5), y, flagWidth, 60, { collisionFilter: { group: group } } ); } ); Composites.chain(ropeA, 0.5, -0.25, -0.5, -0.25, { length: 5, render: { type: "line" } }); Composite.add( rope.........完整代码请登录后点击上方下载按钮下载查看
网友评论0