So erstellen Sie ein universelles einheitliches Bewegungsgerüst
Dieser Artikel enthält hauptsächlich einen Artikel zum Erstellen eines universellen einheitlichen Bewegungsrahmens (Erklärung mit Beispielen). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Dieser Artikel ist eine Fortsetzung der vorherigen Erklärung basierend auf gleichförmiger Bewegung (Seitenleiste, Ein- und Ausblenden) Weiterhin haben wir am Ende dieses Artikels zwei kleine Beispiele erstellt: Side For Neben der Seitenleiste und dem Fade-Effekt, der die Transparenz ändert, transformieren wir in diesem Artikel die obige Animationsfunktion weiter, um sie vielseitiger und leistungsfähiger zu machen:
1, unterstützt die Bewegung mehrerer Objekte
2, gleichzeitige Bewegung
3, sequentielle Bewegung
Diese drei Bewegungsmodi werden auch von der Animationsfunktion in jquery unterstützt
1 Wie unterscheidet man verschiedene Stile in der Animationsfunktion?
Oben ändert die für den Seitenleisteneffekt verwendete Animationsfunktion den linken Wert
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}Der Fade-Effekt ist Verwendet Die Animationsfunktion ändert die Transparenz
function animate(obj, target, speed) {
clearInterval(timer);
var cur = 0;
timer = setInterval(function () {
cur = css( obj, 'opacity') * 100;
if( cur == target ){
clearInterval( timer );
}else {
cur += speed;
obj.style.opacity = cur / 100;
obj.style.filter = "alpha(opacity:" + cur + ")";
}
}, 30);
}Und wenn unsere gekapselte Funktion universell werden möchte, besteht das erste Problem darin, dass diese Funktion sowohl den linken Wert unterstützen muss und Bei Transparenzänderungen sollte ein allgemeinerer Ansatz darin bestehen, alle Stiländerungen zu unterstützen, beispielsweise die Karussellfunktion, die nach links und rechts sowie nach oben und unten gleitet.
Wir können einfach ein Urteil fällen, wenn wir den Stil erhalten und den Stil ändern. Das Urteil kann in zwei Kategorien unterteilt werden, um den Zweck zu erreichen, da andere Stile (Rand, links, oben, rechts, Schriftgröße, usw.) ) sind alle px, aber Transparenz hat keine px-Einheit
function animate(obj, attr, target, speed) {
clearInterval(timer);
var cur = 0;
timer = setInterval(function () {
if (attr == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, attr));
}
if (cur == target) {
clearInterval(timer);
} else {
if (attr == 'opacity') {
obj.style.opacity = ( cur + speed ) / 100;
obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
} else {
obj.style[attr] = cur + speed + "px";
}
}
}, 30);
}Die zusammengeführte Animation hat einen Parameter mehr als zuvor. Dieser Parameter ist der geänderte Stil. obj: Das Objekt der Änderung, Ziel: der Zielwert, auf den sich der Stil ändern muss, Geschwindigkeit: die Größe jeder Änderung des Stils
wie zum Beispiel:
oImg.onmouseover = function () {
animate(this, 'opacity', 100, 10);
}oImg ist das erhaltene Bildobjekt. Die Bedeutung jedes Parameters hier ist wie folgt:
dies: das aktuelle Bildobjekt
Deckkraft: Der sich ändernde Stil ist Transparenz
100: Wenn die Maus über das Bild bewegt wird, beträgt die Transparenz 100
10: Die Transparenz wird jedes Mal um 10 erhöht, basierend auf dem ursprünglichen Wert
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合并的运动 - by ghostwu</title>
<style>
img {
border: none;
opacity: 0.3;
filter: alpha(opacity:30);
position: absolute;
left: 200px;
}
#box {
width: 150px;
height: 300px;
background: red;
position: absolute;
left: -150px;
top: 50px;
}
#box p {
width: 28px;
height: 100px;
position: absolute;
right: -28px;
top: 100px;
background: green;
}
</style>
<script>
window.onload = function () {
var oImg = document.getElementById("img"),
oBox = document.getElementById("box"),
timer = null;
oImg.onmouseover = function () {
animate(this, 'opacity', 100, 10);
}
oImg.onmouseout = function () {
animate(this, 'opacity', 30, -10);
}
oBox.onmouseover = function () {
animate(this, 'left', 0, 10);
}
oBox.onmouseout = function () {
animate(this, 'left', -150, -10);
}
function animate(obj, attr, target, speed) {
clearInterval(timer);
var cur = 0;
timer = setInterval(function () {
if (attr == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, attr));
}
if (cur == target) {
clearInterval(timer);
} else {
if (attr == 'opacity') {
obj.style.opacity = ( cur + speed ) / 100;
obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
} else {
obj.style[attr] = cur + speed + "px";
}
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<p id="box">
<p>分享到</p>
</p>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>Das Obige ist das vollständige Codebeispiel.
Wenn Sie diese beiden Funktionen separat testen:
Zum Bild bewegen und dann herausziehen
Zum Teilen verschieben, dann herausziehen
Das ist Kein Problem
Wenn Sie wie folgt testen:
Bewegen Sie sich zum Teilen und wechseln Sie dann schnell zum Bild. Zu diesem Zeitpunkt werden Sie feststellen, dass die Freigabe stoppt, was nicht konsistent ist ! Logischerweise ist das Bewegen der Maus über das Bild gleichbedeutend mit dem Auslösen des Mouseout-Ereignisses (Mouse-Out-Ereignis) von „Teilen an“, dann sollte „Teilen an“ zu diesem Zeitpunkt ausgeblendet und nicht gestoppt werden. Warum passiert das? Da diese beiden Sportarten einen gemeinsamen Timer haben, wird der „Teilen an“-Timer gestoppt, wenn die Maus über das Bild bewegt und der Timer aktiviert wird. Wenn wir dann eine Bewegung mit mehreren Objekten ausführen, müssen wir den Timer aufteilen. Wie geht das? Es ist sehr einfach. Definieren Sie keine einfache Timer-Variable. Dann hat jedes Objekt ein Timer-Attribut, das den Trenneffekt des Timers erreicht nach der Änderung Bitte erweitern Sie es wie folgt selbst:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
border: none;
opacity: 0.3;
filter: alpha(opacity:30);
position: absolute;
left: 200px;
}
#box {
width: 150px;
height: 300px;
background: red;
position: absolute;
left: -150px;
top: 50px;
}
#box p {
width: 28px;
height: 100px;
position: absolute;
right: -28px;
top: 100px;
background: green;
}
</style>
<script>
window.onload = function () {
var oImg = document.getElementById("img"),
oBox = document.getElementById("box");
oImg.onmouseover = function () {
animate(this, 'opacity', 100, 10);
}
oImg.onmouseout = function () {
animate(this, 'opacity', 30, -10);
}
oBox.onmouseover = function () {
animate(this, 'left', 0, 10);
}
oBox.onmouseout = function () {
animate(this, 'left', -150, -10);
}
function animate(obj, attr, target, speed) {
clearInterval(obj.timer);
var cur = 0;
obj.timer = setInterval(function () {
if (attr == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, attr));
}
if (cur == target) {
clearInterval(obj.timer);
} else {
if (attr == 'opacity') {
obj.style.opacity = ( cur + speed ) / 100;
obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
} else {
obj.style[attr] = cur + speed + "px";
}
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<p id="box">
<p>分享到</p>
</p>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>2. Lassen Sie die Animationsfunktion mehrere Stile unterstützen, die sich gleichzeitig ändern Zum Beispiel:
oBox.onmouseover = function(){
animate( this, { "width" : 500, "height" : 400 }, 10 );
}dies: aktuelles p-Element
{width : 500, "height" : 400 } : Ändern Sie die Breite auf 500 und die Höhe auf 400. Diese beiden Stile müssen gleichzeitig abgeschlossen werden,
10: Der Stil ändert sich jedes Mal um 10 vom ursprünglichen Wert (z. B. der Anfangswert der Breite 200--> 210). , 220, 230....)
Vollständiger gleichzeitiger Bewegungsänderungscode:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
window.onload = function () {
var oBox = document.getElementById("box");
oBox.onmouseover = function(){
// animate( this, { "width" : 500, "height" : 500 }, 10 );
animate( this, { "width" : 500, "height" : 400 }, 10 );
}
function animate(obj, attr, speed) {
clearInterval(obj.timer);
var cur = 0;
obj.timer = setInterval(function () {
for ( var key in attr ) {
if (key == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, key));
}
var target = attr[key];
if (cur == target) {
clearInterval(obj.timer);
} else {
if (key == 'opacity') {
obj.style.opacity = ( cur + speed ) / 100;
obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
} else {
obj.style[key] = cur + speed + "px";
}
}
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<p id="box"></p>
</body>
</html>Die anfängliche Breite von p ist dieselbe wie die Höhe (Breite: 200, Höhe: 200)
Die Änderungsschrittgröße ist dieselbe ( 10)
Die Änderungszeit ist gleich (Änderung alle 30 Millisekunden)
Ziel (Breite: 500, Höhe: 400)
Können Sie sich irgendwelche Probleme vorstellen? (Zwei Personen stehen an der gleichen Startlinie, mit der gleichen Geschwindigkeit und der gleichen Zeit, aber sie müssen gleichzeitig unterschiedliche Ziele erreichen, einer ist 500 und der andere ist 400)
Die Antwort liegt auf der Hand , es muss dasjenige mit dem nächstgelegenen Ziel sein (Höhe: 400). Dasjenige, das zuerst ankommt, schaltet dann den Timer für das Objekt aus, und das andere Ziel mit einem weiteren Ziel (Breite: 500) wird definitiv nicht erreicht
Unter diesem Code können Sie den aktuellen Wert und den Zielwert ausgeben:
var target = attr[key]; console.log( key, cur, target );
从上图可以看出，height已经达到了400px，但是width停在了410px,为什么不是400px ? 因为width = 400的时候， 就是( cur == 500 ) 相当于( 400 == 500 ) 不成立，所以执行了else语句，width = cur + 10 = 400 + 10 = 410，然后height到达400px停止了定时器，所以width停在了410px.
那么我们怎么解决这个问题呢？
其实也好办，就是height = 400的时候 不要把定时器关了，应该等width = 500的时候再关闭定时器，不就在同一时间，完成了同时到达目标的效果吗？
修改后的代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
window.onload = function () {
var oBox = document.getElementById("box");
oBox.onmouseover = function(){
animate( this, { "width" : 500, "height" : 400 }, 10 );
}
function animate(obj, attr, speed) {
clearInterval(obj.timer);
var cur = 0;
obj.timer = setInterval(function () {
var bFlag = true;
for ( var key in attr ) {
if (key == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, key));
}
var target = attr[key];
if (cur != target) {
bFlag = false;
if (key == 'opacity') {
obj.style.opacity = ( cur + speed ) / 100;
obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
} else {
obj.style[key] = cur + speed + "px";
}
}
}
if ( bFlag ) {
clearInterval( obj.timer );
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<p id="box"></p>
</body>
</html>声明一个变量，每次变化完一次( width, height )样式 把bFlag = true， 只要在for循环中有一个没有到达目标，bFlag的值都是false，这样就不会关闭定时器。当两个都到达目标，才关闭定时器.
三、顺序运动
如样式变化，按顺序来，不是同时变化， 如：
oBox.onmouseover = function(){
//回调函数： 把函数当做参数传递给另一个函数
animate( this, { 'width' : 500 }, 10, function(){
animate( this, { 'height' : 500 }, 10 );
} );
}当把width变成500px的时候，如果传递了回调函数， 再接着执行回调函数里面的运动
修改后的完整代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>通用的匀速运动框架 - by ghostwu</title>
<style>
p {
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
window.onload = function () {
var oBox = document.getElementById("box");
oBox.onmouseover = function(){
//回调函数： 把函数当做参数传递给另一个函数
animate( this, { 'width' : 500 }, 10, function(){
animate( this, { 'height' : 500 }, 10 );
} );
}
function animate(obj, attr, speed, fn ) {
clearInterval(obj.timer);
var cur = 0;
obj.timer = setInterval(function () {
var bFlag = true;
for (var key in attr) {
if (key == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, key));
}
var target = attr[key];
if (cur != target) {
bFlag = false;
if (key == 'opacity') {
obj.style.opacity = ( cur + speed ) / 100;
obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
} else {
obj.style[key] = cur + speed + "px";
}
}
}
if (bFlag) {
clearInterval(obj.timer);
fn && fn.call( obj );
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<p id="box"></p>
</body>
</html>相关推荐：
浅谈Javascript如何实现匀速运动_javascript技巧
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein universelles einheitliches Bewegungsgerüst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1374
52
So bewerten Sie die Kosteneffizienz der kommerziellen Unterstützung für Java-Frameworks
Jun 05, 2024 pm 05:25 PM
Die Bewertung des Kosten-/Leistungsverhältnisses des kommerziellen Supports für ein Java-Framework umfasst die folgenden Schritte: Bestimmen Sie das erforderliche Maß an Sicherheit und Service-Level-Agreement-Garantien (SLA). Die Erfahrung und das Fachwissen des Forschungsunterstützungsteams. Erwägen Sie zusätzliche Services wie Upgrades, Fehlerbehebung und Leistungsoptimierung. Wägen Sie die Kosten für die Geschäftsunterstützung gegen Risikominderung und Effizienzsteigerung ab.
Wie wirken sich die Lightweight-Optionen von PHP-Frameworks auf die Anwendungsleistung aus?
Jun 06, 2024 am 10:53 AM
Das leichte PHP-Framework verbessert die Anwendungsleistung durch geringe Größe und geringen Ressourcenverbrauch. Zu seinen Merkmalen gehören: geringe Größe, schneller Start, geringer Speicherverbrauch, verbesserte Reaktionsgeschwindigkeit und Durchsatz sowie reduzierter Ressourcenverbrauch. Praktischer Fall: SlimFramework erstellt eine REST-API, nur 500 KB, hohe Reaktionsfähigkeit und hoher Durchsatz
Wie ist die Lernkurve von PHP-Frameworks im Vergleich zu anderen Sprach-Frameworks?
Jun 06, 2024 pm 12:41 PM
Die Lernkurve eines PHP-Frameworks hängt von Sprachkenntnissen, Framework-Komplexität, Dokumentationsqualität und Community-Unterstützung ab. Die Lernkurve von PHP-Frameworks ist im Vergleich zu Python-Frameworks höher und im Vergleich zu Ruby-Frameworks niedriger. Im Vergleich zu Java-Frameworks haben PHP-Frameworks eine moderate Lernkurve, aber eine kürzere Einstiegszeit.
Leistungsvergleich von Java-Frameworks
Jun 04, 2024 pm 03:56 PM
Laut Benchmarks sind Quarkus (schneller Start, geringer Speicher) oder Micronaut (TechEmpower ausgezeichnet) für kleine, leistungsstarke Anwendungen die ideale Wahl. SpringBoot eignet sich für große Full-Stack-Anwendungen, weist jedoch etwas langsamere Startzeiten und Speichernutzung auf.
Best Practices für die Dokumentation des Golang-Frameworks
Jun 04, 2024 pm 05:00 PM
Das Verfassen einer klaren und umfassenden Dokumentation ist für das Golang-Framework von entscheidender Bedeutung. Zu den Best Practices gehört die Befolgung eines etablierten Dokumentationsstils, beispielsweise des Go Coding Style Guide von Google. Verwenden Sie eine klare Organisationsstruktur, einschließlich Überschriften, Unterüberschriften und Listen, und sorgen Sie für eine Navigation. Bietet umfassende und genaue Informationen, einschließlich Leitfäden für den Einstieg, API-Referenzen und Konzepte. Verwenden Sie Codebeispiele, um Konzepte und Verwendung zu veranschaulichen. Halten Sie die Dokumentation auf dem neuesten Stand, verfolgen Sie Änderungen und dokumentieren Sie neue Funktionen. Stellen Sie Support und Community-Ressourcen wie GitHub-Probleme und Foren bereit. Erstellen Sie praktische Beispiele, beispielsweise eine API-Dokumentation.
Zenless Zone Zero Technology bringt 8K-Sportflugkameras auf den Markt: Hafu-Flugkameras X1 PRO und X1 PROMAX
Aug 28, 2024 pm 03:31 PM
Zero Zero Technology, der Pionier der fliegenden Kameras, kündigte die Einführung der fliegenden Harvard-Kameras X1PRO und X1PROMAX an und startete am frühen Morgen des 27. August Pekinger Zeit das Crowdfunding auf Indiegogo. Innerhalb von 145 Minuten nach der Online-Bereitstellung überstieg der Crowdfunding-Betrag eins Millionen US-Dollar und schuf die erste fliegende Kamera. Neuer Rekord. Als weltweit erste und fortschrittlichste fliegende Actionkameras definieren diese beiden Produkte das Flugschießerlebnis neu und eignen sich besonders für Sportbegeisterte und professionelle Content-Ersteller. Die fliegenden Kameras X1PRO und X1PROMAX von Hafu sind tragbar und faltbar, sodass kein interaktives Fernsteuerungserlebnis erforderlich ist. X1PROMAX: 1/1,3-Zoll-CMOS-Sensor, maßgeschneidertes 7-Schicht-Objektiv. 8K-Video, 14 Blendenstufen Dynamikbereich, 107° Weitwinkel-Sichtfeld. Anpassbare ND-Filter. X
So wählen Sie das beste Golang-Framework für verschiedene Anwendungsszenarien aus
Jun 05, 2024 pm 04:05 PM
Wählen Sie das beste Go-Framework basierend auf Anwendungsszenarien aus: Berücksichtigen Sie Anwendungstyp, Sprachfunktionen, Leistungsanforderungen und Ökosystem. Gängige Go-Frameworks: Gin (Webanwendung), Echo (Webdienst), Fiber (hoher Durchsatz), gorm (ORM), fasthttp (Geschwindigkeit). Praktischer Fall: Erstellen einer REST-API (Fiber) und Interaktion mit der Datenbank (gorm). Wählen Sie ein Framework: Wählen Sie fasthttp für die Schlüsselleistung, Gin/Echo für flexible Webanwendungen und gorm für die Datenbankinteraktion.
Detaillierte praktische Erklärung der Golang-Framework-Entwicklung: Fragen und Antworten
Jun 06, 2024 am 10:57 AM
Bei der Go-Framework-Entwicklung treten häufige Herausforderungen und deren Lösungen auf: Fehlerbehandlung: Verwenden Sie das Fehlerpaket für die Verwaltung und Middleware zur zentralen Fehlerbehandlung. Authentifizierung und Autorisierung: Integrieren Sie Bibliotheken von Drittanbietern und erstellen Sie benutzerdefinierte Middleware zur Überprüfung von Anmeldeinformationen. Parallelitätsverarbeitung: Verwenden Sie Goroutinen, Mutexe und Kanäle, um den Ressourcenzugriff zu steuern. Unit-Tests: Verwenden Sie Gotest-Pakete, Mocks und Stubs zur Isolierung sowie Code-Coverage-Tools, um die Angemessenheit sicherzustellen. Bereitstellung und Überwachung: Verwenden Sie Docker-Container, um Bereitstellungen zu verpacken, Datensicherungen einzurichten und Leistung und Fehler mit Protokollierungs- und Überwachungstools zu verfolgen.
