js模拟重力拖拽动画效果代码
代码语言:html
所属分类:拖放
代码描述:js模拟重力拖拽动画效果代码,按住1实现慢镜头、按住2实现零重力,按住3实现反重力。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="UTF-8"> <style> * { margin: 0; } body { font-family: Helvetica, sans-serif; background:#1f1f1f; } #info { font-size: 22px; color: #ccc; position: absolute; z-index: -1; display: flex; flex-direction: column; width: 100vw; height: 100vh; justify-content: center; align-items: center; animation: fadeOut 1s forwards 3s; } #info > div { margin-top: -3em; } #info > div > div { margin-bottom: 0.4em; } code { color: #bbb; background: rgba(0, 0, 0, 0.07); padding: 0em 0.2em; } </style> </head> <body> <div id="info"> <div> <div>用鼠标拖动</div> <div>按住 <code>1</code>慢镜头.</div> <div>按住 <code>2</code>零重力.</div> <div>按住 <code>3</code> 反重力.</div> </div> </div> <canvas width="1047" height="646"></canvas> <script> const SPACING = 14; const ITERATIONS = 14; const MOUSE = SPACING * 5; let GRAVITY = 0.05; let SPEED = 1; const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const mouse = { x: 0, y: 0, px: 0, py: 0, points: [], }; const clamp = function (val, min, max) { return Math.min(Math.max(val, min), max); }; class Vector { constructor (x = 0, y = 0) { this.x = x; this.y = y; } get length () { return Math.sqrt(this.x * this.x + this.y * this.y); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0