Dieser Artikel stellt hauptsächlich die Methode zur Realisierung von Schwerkraftabfall- und Elastizitätseffekten in JavaScript vor. Er analysiert die Prinzipien und spezifischen Implementierungstechniken von JavaScript-Schwerkraftabfall- und Elastizitätseffekten in Form von Beispielen
Das Beispiel beschreibt die Methode zur Realisierung von Schwerkraftabfall und elastischen Effekten in JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Hier wird die JS-Sprache verwendet, um den Effekt des Aufspringens nach dem Fallen auf den Boden unter der Wirkung der Schwerkraft auf der HTML-Seite zu erzielen, wie gezeigt unten:
In diesem Beispiel geht es hauptsächlich um die folgenden Probleme:
1. Geben Sie der Kugel eine anfängliche Freigabegeschwindigkeit, wie Sie erreichen können Abwärtsbewegung und vor dem Kontakt mit der Kante, in vertikaler Richtung Welche Auswirkung hat eine größere Geschwindigkeit speedY? Antwort: Dies kann erreicht werden, indem die Vertikalgeschwindigkeit speedY jedes Mal im Timer um einen festen Wert erhöht wird. Im folgenden Code wird dieser Effekt erreicht.
2. Wie erreicht man den Geschwindigkeitsumkehreffekt, nachdem die Kugel den Boden berührt (in diesem Fall den unteren Rand des Browsers)? Antwort: Stellen Sie nach dem Berühren des Bodens einfach die Richtungsgeschwindigkeit auf die entgegengesetzte Richtung der aktuellen Geschwindigkeit ein. Die Bedingung im Code if (iW >= w||iW = h||iH
3. Wie kann erreicht werden, dass die Aufstiegshöhe wieder niedriger wird als die vorherige Höhe, nachdem der Ball vom Boden abprallt? Antwort: Nach dem Berühren des Bodens wird die Geschwindigkeit negativ, der Timer beginnt mit der Ausführung des nächsten Intervalls, speedY += 6 wird sofort ausgeführt, die Sprunggeschwindigkeit wird sofort um 6 reduziert und ihre Größe ist kleiner als im Moment zuvor den Boden berührt, sodass die Kugel nicht auf ihre ursprüngliche Höhe zurückspringt.
4. Wie erreicht man den Effekt, dass der Absolutwert der Geschwindigkeit in vertikaler Richtung der Kugel immer kleiner wird, bis er sich 0 nähert? Antwort: Verwenden Sie in diesem Beispiel nur speedY += 6. Die Geschwindigkeit speedY in vertikaler Richtung kann nicht 0 erreichen, da unter der Voraussetzung, dass die Anfangsgeschwindigkeit in dieser Funktion festgelegt wird, die Geschwindigkeit einer bestimmten Landung ist kann nicht 6 sein (die Druckgeschwindigkeit kann später anhand des Ergebnisses jeder Ausführung bestimmt werden), daher kann die nächste Ausführung nicht 0 sein. Wie genau wird also der Effekt erzielt, wenn man stationär auf den Boden fällt? Wenn der Geschwindigkeits-Erhöhungswert auf 6 eingestellt ist und der Ball in einem bestimmten Moment landet, ist seine Geschwindigkeit tatsächlich einer von 1, 2, 3, 4 und 5. Nach der Addition von 6 beträgt die momentane Rückprallgeschwindigkeit - 5 , -4, -3, -2, -1. Nach einer Timer-Periode (in diesem Beispiel 30 Millisekunden) wird die Geschwindigkeit sofort nach dem Hinzufügen von 6 zu 1, 2, 3, 4, 5 und beim nächsten Mal wird die Geschwindigkeit zu 1, 2, 3, 4, 5 werden zu -5, -4, -3, -2, -1..., da speedY += 6 an der Spitze des Timers steht, bleibt das Endergebnis immer bei -5, - hängen, bevor 6 hinzugefügt wird. Beliebiger Wert darunter 4, -3, -2, -1. Der Timer ist immer dynamisch und die letzte Kugel wird unten angezeigt.
5. Wenn die Kugel losgelassen wird, hat sie auch eine Quergeschwindigkeit speedX. Wie lässt sich die Quergeschwindigkeit allmählich auf 0 verringern? Antwort: In diesem Beispiel besteht keine Notwendigkeit, die Kollision in der ist stationär.
Wie kann verhindert werden, dass beim Ziehen eines Fensters Bildlaufleisten angezeigt werden?
Antwort: Legen Sie nach dem Ziehen des Browserfensters einen neuen Bewegungsbereich für die Kugel fest.
Der Implementierungscode und die Analyse lauten wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性运动</title>
<style type="text/css">
#p {
width: 100px;
height: 100px;
background: green;
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<script type="text/javascript">
//window.onload表示等页面标签内容加载完之后再加载window.onload里面的内容
window.onload = function(){
//分别设置p在x和y方向的的初速度
var speedX = 2;
var speedY = 3;
//获取p标签
var p = document.getElementById("p");
//获取按钮
var btn = document.getElementById("btn");
//定义点击事件
btn.onclick = function(){
startMove();
};
//定义一个空的定时器，防止上次事件定时器的返回值叠加
var timer = null;
//定义点击事件函数
function startMove(){
//内部清空计时器，防止上次返回值叠加
clearInterval(timer);
//设置计时器
timer = setInterval(function(){
//竖直方向上反向运动时速度为负值，为了达到反弹逐渐速度逐渐减小的效果，可以在向下碰撞后速度加上一个正值
speedY += 6;
//分别获取p距离左边距和上边距的动态距离
var iW = p.offsetLeft + speedX;
var iH = p.offsetTop + speedY;
//获取p水平方向运动的最大距离，即不包含边框的浏览器窗口的宽度clientWidth减去p的宽度
var w = document.documentElement.clientWidth - p.offsetWidth;
//获取p垂直方向运动的最大距离
var h = document.documentElement.clientHeight - p.offsetHeight;
//当动态宽度达到p最大运动宽度范围时，立刻转换速度为反方向负值，同时把w的值负值给iw，因为w是可视窗口范围，当w缩小时，iw保存的还是上一次窗口条件下的距离左边距的距离
if (iW >= w||iW <= 0){speedX = -speedX;iW = w;}
//当动态高度达到p最大运动高度范围时，立刻转向速度，同时将x方向速度乘以0.8，使之速度逐渐减小
if (iH >= h||iH <= 0){speedY = -speedY;iH = h;speedX *= 0.95;}
//由于p.style.left和p.style.top还储存这上一次或第一次的计时后的值，此次计时后应把新的值储存起来，使p出现动态效果
p.style.left = iW + "px";
p.style.top = iH + "px";
console.log(speedX);
},30);
}
}
</script>
<input type="button" name="btn" id="btn" value="开始运动" />
<p id="p"></p>
</body>
</html>Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
So implementieren Sie die JSON-Datengruppierungsoptimierung in Javascript
So verwenden Sie das Validate-Plug-in in jQuery
Das obige ist der detaillierte Inhalt vonSo erzielen Sie elastische Effekte in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ist JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AMJa, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.
JavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AMJavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.
C und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AMC und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.
Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AMJavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.
Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AMPython eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.
Die Rolle von C/C bei JavaScript -Dolmetschern und CompilernApr 20, 2025 am 12:01 AMC und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.
JavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AMDie Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.
JavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AMZu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),
VSCode Windows 64-Bit-Download
Ein kostenloser und leistungsstarker IDE-Editor von Microsoft
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
