Zusammenfassung des Front-End-Wissens im Gokudō-Spiel

Hintergrund

Zu Beginn meines Japanisch-Lernens fiel es mir nicht so leicht, mir die 50 japanischen Laute zu merken. Besonders schwierig war es, sich die Katakana zu merken. Damals dachte ich, es wäre toll, wenn es eine App gäbe, mit der ich meine fragmentierte Zeit optimal nutzen und die 50 Laute jederzeit in der Mittagspause oder in der U-Bahn üben könnte. Also habe ich App Store durchsucht und tatsächlich gibt es viele Apps zum Lernen der 50 Laute, aber die Apps im Store enthalten entweder In-App-Käufe, haben Werbung oder sind über 40M groß. Ich habe keine App gefunden, die mich zufriedenstellte. Daher habe ich beschlossen, selbst eines zu schreiben und dabei vor allem einige meiner Erkenntnisse aus dem Entwicklungs- und Gestaltungsprozess dieser Anwendung einzubringen.

erreichen

Adresse des Online-Erlebnisses: https://dragonir.github.io/kanaApp/

Der Implementierungseffekt ist wie folgt. Die Anwendung ist hauptsächlich in drei Seiten unterteilt:

• Startseite: enthält Menüoptionen (Hiragana-Übung, Katakana-Übung, gemischte Übung), Schaltfläche zum Umschalten in den Dunkelmodus.
• Antwortseite: enthält einen Bereich für die Anzeige der verbleibenden Chancen und Punkte, einen Fragenbereich in der Mitte und eine Antwortschaltfläche unten.
• Ergebnisseite: Anzeige der Ergebnispunkte und Schaltfläche „Zurück zur Startseite“.

Die Antwortlogikregel besteht darin, aus 4 angegebenen Antwortschaltflächen die richtige Option auszuwählen, die dem Wort im Fragenanzeigebereich entspricht. Die Anwendung gibt Feedback und bewertet die falschen Antworten basierend auf den Klicks. Nach 10 Fehlern endet das Spiel und die Ergebnisseite wird geladen. Die Implementierung der Spiellogik ist nicht der Hauptinhalt dieses Artikels und wird daher später nicht näher erläutert. Der Hauptinhalt dieses Artikels ist die Einführung in das Front-End-Wissen, das im Entwicklungsprozess dieses Minispiels eine Rolle spielt.

Dunkler Modus ⚪⚫

Da Windows 10 , MacOs , Android und andere Systeme sukzessive Dunkelmodi eingeführt haben, unterstützen auch Browser die Erkennung von Farbkonfigurationen von Systemthemen und immer mehr Webanwendungen werden mit Funktionen zum Umschalten des Dunkelmodus konfiguriert. Um das visuelle Erlebnis 50音小游戲zu optimieren, habe ich auch einen dunklen Stil konfiguriert und der Effekt ist wie folgt:

CSS Medienabfrage zur Bestimmung des Dunkelmodus

Mit prefers-color-scheme wird ermittelt, ob der Benutzer die Designfarbe des Systems auf hell oder dunkel eingestellt hat. Die Verwendungssyntax lautet wie folgt:

@media (prefers-color-scheme: value) {} value hat die folgenden 3 Werte:

• light : Zeigt an, dass das System des Benutzers den Dunkelmodus unterstützt und auf ein helles Design eingestellt ist (Standard).
• dark : Zeigt an, dass das System des Benutzers den Dunkelmodus unterstützt und auf ein dunkles Design eingestellt ist.
• no-preference : Zeigt an, dass das System des Benutzers den Dunkelmodus nicht unterstützt oder nicht wissen kann, ob es auf den Dunkelmodus eingestellt ist (veraltet).

Wenn das Ergebnis no-preference lautet, kann mithilfe dieser Medienfunktion nicht ermittelt werden, ob das Hostsystem das Festlegen der Designfarbe unterstützt oder ob der Benutzer es aktiv auf „Keine Präferenz“ festgelegt hat. Aus Datenschutzgründen und anderen Gründen können Benutzer oder Benutzeragenten die Option im Browser in einigen Fällen auch auf no-preference setzen.

Im folgenden Beispiel ist die Hintergrundfarbe des .demo Elements #FFFFFF , wenn die Systemdesignfarbe dunkel ist; wenn die Systemdesignfarbe hell ist, ist die Hintergrundfarbe des .demo Elements #000000 .

@media (bevorzugtes Farbschema: dunkel) {
  .demo { Hintergrund: #FFFFFF; }
}
@media (bevorzugtes Farbschema: hell) {
  .demo { Hintergrund: #000000; }
}

JavaScript zur Bestimmung des Dunkelmodus

window.matchMedia() gibt ein neues MediaQueryList Objekt zurück, das die Ergebnisse der Analyse der angegebenen Medienabfragezeichenfolge (en-US)字符串darstellt. Die zurückgegebene MediaQueryList kann verwendet werden, um zu ermitteln, ob Document mit einer Medienabfrage übereinstimmt, oder um ein document zu überwachen und zu ermitteln, ob es mit der Medienabfrage übereinstimmt oder nicht mehr. Das MediaQueryList Objekt hat die Eigenschaften matches und media sowie die Methoden addListener und removeListener .

Verwenden Sie matchMedia als Beurteilungsmedium, um zu ermitteln, ob das System die Themenfarbe unterstützt:

if (window.matchMedia('(bevorzugtes Farbschema)').media === 'nicht alle') {
  // Der Browser unterstützt die Einstellung der Designfarbe nicht}
if (window.matchMedia('(bevorzugtes Farbschema: dunkel)').matches){
  // Dunkelmodus } sonst {
  // Lichtmodus}

Darüber hinaus können Sie den Status des Dunkelmodus des Systems dynamisch überwachen und entsprechend der Umschaltung des Dunkelmodus des Systems in Echtzeit reagieren:

window.matchMedia('(bevorzugtes Farbschema: dunkel)').addListener(e => {
  wenn (e.matches) {
    // Dunkelmodus aktivieren } else {
    // Dunkelmodus ausschalten }
});

Oder erkennen Sie den Dunkel- oder Hellmodus einzeln:

const-Listener = {
  dunkel: (Medienabfrageliste) => {
    wenn (mediaQueryList.matches) {
      // Dunkelmodus aktivieren}
  },
  Licht: (Medienabfrageliste) => {
    wenn (mediaQueryList.matches) {
      // Lichtmodus einschalten}
  }
};
window.matchMedia('(bevorzugtes Farbschema: dunkel)').addListener(listeners.dark);
window.matchMedia('(bevorzugtes Farbschema: hell)').addListener(listeners.light);

Im 50-Ton-Spiel wird JavaScript verwendet, um zu erkennen, ob das System den Dunkelmodus aktiviert hat, und fügt dynamisch css Klassennamen hinzu, um den Dunkelmodus automatisch zu laden. Gleichzeitig wird auch eine Schaltfläche zum Umschalten zwischen dunklen und hellen Farben bereitgestellt, sodass das Design manuell umgeschaltet werden kann.

Festlegen des Dunkelmodus in HTML -Elementen

Bei der Verwendung von Bildelementen auf der Seite können Sie direkt im HTML erkennen, ob das System den Dunkelmodus aktiviert hat. wie:

<Bild>
  <source srcset="dark.jpg" media="(bevorzugtes Farbschema: dunkel)">
  <img src="licht.jpg">
</Bild>

Das picture ermöglicht es uns, unterschiedliche Bilder auf unterschiedlichen Geräten anzuzeigen und wird im Allgemeinen aus Reaktionsfähigkeitsgründen verwendet. HTML5 führt das <picture> -Element ein, das eine flexiblere Anpassung von Bildressourcen ermöglicht. Das <picture> -Element enthält null oder mehr <source> -Elemente und ein <img> -Element. Jedes <source> -Element entspricht einem anderen Gerät und verweist auf eine andere Bildquelle. Wenn keine Übereinstimmung vorliegt, wird url im src Attribut des <img> -Elements ausgewählt.

Hinweis: Das <img> -Element wird nach dem letzten <picture> -Element platziert. Wenn der Browser dieses Attribut nicht unterstützt, wird das Bild im <img> -Element angezeigt.

Offlinecache

Um wie bei nativen Anwendungen Verknüpfungen auf dem Desktop für den Schnellzugriff generieren und jederzeit und überall offline nutzen zu können, verwendet 50音小游戲Offline-Caching-Technologie. Es handelt sich um eine PWA應用. Nachfolgend finden Sie eine kurze Beschreibung der Implementierungstechnologie PWA離線應用.

PWA (progressing web app) ist下一代WEB應用模型. Eine PWA -Anwendung ist zunächst eine Webseite und verwendet App Manifest und Service Worker um Funktionen wie Installation und Offline zu implementieren.

Merkmale:

• Progressiv: Geeignet für alle Benutzer mit jedem Browser, da es hauptsächlich mit dem Ziel der progressiven Verbesserung entwickelt wurde.
• Reaktionsfähig: passt zu jedem Formfaktor: Desktop, Mobilgerät, Tablet oder was auch immer als Nächstes kommt.
• Verbindungsunabhängigkeit: Möglichkeit, mithilfe von Servicemitarbeitern offline oder bei schlechter Netzwerkqualität zu arbeiten.
• Offline-Push: Durch die Verwendung von Push-Nachrichtenbenachrichtigungen kann unsere Anwendung wie Native App aussehen und das Benutzererlebnis verbessern. Zeitnahe Updates: Bleiben Sie mit dem Service Worker-Update-Prozess immer auf dem neuesten Stand.
• Sicherheit: Wird über HTTPS bereitgestellt, um Schnüffeln zu verhindern und sicherzustellen, dass der Inhalt nicht manipuliert wurde.

Parameter der Konfigurationsseite

Fügen Sie die Datei manifest.webmanifest oder manifest.json zum Stammverzeichnis des Projekts hinzu und schreiben Sie die folgenden Konfigurationsinformationen in die Datei. In diesem Beispiel werden die Seitenparameterinformationen 50音小游戲wie folgt konfiguriert:

// manifest.webmainifest
{
  "Name": "Name",
  "short_name": "Kurzname",
  "start_url": "index.html",
  "Anzeige": "eigenständig",
  "Hintergrundfarbe": "#fff",
  "Beschreibung": "Beschreibung",
  "Symbole": [
    {
      "Quelle": "Assets/Bilder/Icon-64x64.jpg",
      "Größen": "64x64",
      "Typ": "Bild/JPG"
    },
    {
      "Quelle": "Assets/Bilder/Icon-256x256.jpg",
      "Größen": "256x256",
      "Typ": "Bild/JPG"
    }
  ]
}

Parameterbeschreibung:

• name : Der Name Web App , der gleichzeitig der Name des Anwendungssymbols ist, wenn es auf dem Desktop gespeichert ist.
• short_name : Wenn name zu lang ist, wird statt name der short_name verwendet, die Abkürzung für Web App .
• start_url : Gibt URL an, die geladen werden soll, wenn der Benutzer die Web App öffnet. URL ist relativ zum Pfad, in dem sich manifest befindet.
• display : Gibt den Anzeigemodus der Anwendung an. Es stehen vier Werte zur Auswahl:

fullscreen : Vollbildanzeige, füllt den gesamten Anzeigebereich so weit wie möglich aus.

standalone : ​​Browserbezogene UI (wie Navigationsleiste, Symbolleiste usw.) werden ausgeblendet und sehen eher wie eine Native App aus.

minimal-ui : Die Anzeigeform ist ähnlich wie bei standalone , und die browserbezogene UI wird auf eine Schaltfläche minimiert. Verschiedene Browser haben leicht unterschiedliche Implementierungen. browser : Im Allgemeinen ist der Stil derselbe wie beim Öffnen mit einem normalen Browser.

Es ist zu beachten, dass, wenn der Browser mancher Systeme den fullscreen nicht unterstützt, die Anzeige als standalone Effekt erfolgt. Wenn der standalone nicht unterstützt wird, wird die Anzeige als minimal-ui Effekt erfolgen usw.

description : Anwendungsbeschreibung.

icons : Gibt das Desktopsymbol und das Startseitenbild der Anwendung an, ausgedrückt als Array:

• Größen: Symbolgröße. Durch Angabe der Größe wählt das System das am besten geeignete Symbol zur Anzeige an der entsprechenden Position aus.
• src: Symbolpfad. Ein relativer Pfad ist relativ zur manifest , es kann aber auch ein absoluter Pfad verwendet werden.
• Typ: Symbolbildtyp. Der Browser wählt aus icons als Startbildschirmbild das Bild aus 128dp(px = dp * (dpi / 160)) am nächsten kommt.

background_color : Gibt die Hintergrundfarbe des Startbildschirms an. Durch die Verwendung derselben Farbe kann ein reibungsloser Übergang vom Startbildschirm zur Homepage erreicht und auch das Benutzererlebnis beim Laden von Seitenressourcen verbessert werden.

theme_color : Gibt die Designfarbe der Web App an. Mit dieser Eigenschaft kann die Farbe der Browser- UI gesteuert werden. Beispielsweise die Farbe der Statusleiste, der Statusleiste auf der Inhaltsseite und der Adressleiste.

Tool zur automatischen Generierung von Konfigurationsinformationen: https://tomitm.github.io/appmanifest/

Konfigurieren von HTML Dateien

Importieren Sie die manifest Konfigurationsdatei in index.html und fügen Sie die folgenden Konfigurationsinformationen im head , um sie mit iOS系統kompatibel zu machen

<Metaname=Ansichtsfensterinhalt="Breite=Gerätebreite,Anfangsmaßstab=1,Maximaler Maßstab=1,Minimaler Maßstab=1,Benutzerskalierbar=nein,Ansichtsfensteranpassung=Abdeckung">
<meta name="apple-mobile-web-app-fähig" content="ja" />
<meta name="apple-mobile-web-app-status-bar-style" content="schwarz-durchscheinend">
<meta name="apple-mobile-web-app-title" content="Zurück">
<link rel="stylesheet" type="text/css" href="./assets/css/main.css" rel="externes nofollow" >
<link rel="stylesheet" type="text/css" href="./assets/css/dark.css" rel="externes nofollow" >
<link rel="stylesheet" type="text/css" href="./assets/css/petals.css" rel="externes nofollow" >
<link rel="Verknüpfungssymbol" href="./assets/images/icon-256x256.jpg" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" >
<link rel="apple-touch-icon" href="./assets/images/icon-256x256.jpg" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" />
<link rel="apple-touch-icon-precomposed" href="./assets/images/icon-256x256.jpg" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >
<link rel="Lesezeichen" href="./assets/images/icon-256x256.jpg" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" />
<link rel="manifest" href="./manifest.webmanifest" rel="externes Nofollow" >
<title>Kana-Spiel</title>

• apple-touch-icon : Gibt das Anwendungssymbol an, ähnlich der icons in der Datei manifest.json , und unterstützt auch das sizes zur Auswahl in verschiedenen Szenarien.
• apple-mobile-web-app-capable : Ähnlich wie bei der display in manifest.json können Sie in den standalone -Modus wechseln, indem Sie sie auf yes setzen.
• apple-mobile-web-app-title : Gibt den Namen der App an.
• apple-mobile-web-app-status-bar-style : Gibt den Stil狀態欄status bar auf mobilen iOS-Geräten an. Die Optionen sind Default , Black und Black-translucent .

Service Worker registrieren

Fügen Sie den folgenden Code in index.html hinzu, um den Server-Worker zu registrieren:

window.addEventListener('laden', () => {
  registerSW();
});
asynchrone Funktion registerSW() {
  if ('serviceWorker' im Navigator) {
    versuchen {
      warte auf navigator.serviceWorker.register('./sw.js');
    } fangen (e) {
      console.log(`SW-Registrierung fehlgeschlagen`);
    }
  }
}

Verwenden Sie serviceWorkerContainer.register() , um Service worker zu registrieren, und fügen Sie eine fehlertolerante try...catch... Beurteilung hinzu, um den normalen Betrieb sicherzustellen, wenn Service worker nicht unterstützt wird. Außerdem ist zu beachten, dass nur unter https ein serviceWorker Objekt im navigator vorhanden ist.

Service workers fungieren im Wesentlichen als Proxyserver zwischen Ihrer Web , dem Browser und dem Netzwerk (sofern verfügbar). Es wurde für die Schaffung eines effektiven Offline-Erlebnisses entwickelt, fängt Netzwerkanforderungen ab und ergreift je nach Verfügbarkeit des Netzwerks entsprechende Maßnahmen, indem es Ressourcen vom Server aktualisiert. Es bietet außerdem Einstiegspunkte für Push-Benachrichtigungen und Zugriff auf die API für die Hintergrundsynchronisierung. Um mehr über Service workder zu erfahren, besuchen Sie bitte den Link am Ende des Artikels 🔗 .

Fügen Sie sw.js zum Stammverzeichnis hinzu und definieren Sie Cache-Informationen und -Methoden

//Definieren Sie den Schlüsselwert des Caches const cacheName = 'kana-v1';
// Definieren Sie die Dateien, die zwischengespeichert werden müssen const staticAssets = [
  './',
  './index.html',
  './assets/css/main.css',
  './assets/js/main.js',
  „./assets/images/bg.jpg“
  // ...
];

// Auf das Installationsereignis warten und die Datei nach Abschluss der Installation zwischenspeichern self.addEventListener('install', async e => {
  // Den dem Schlüssel entsprechenden Cache suchen und das bearbeitbare Cache-Objekt abrufen const cache = await caches.open(cacheName);
  // Fügen Sie die Dateien hinzu, die zwischengespeichert werden müssen. await cache.addAll(staticAssets);
  gibt self.skipWaiting() zurück;
});

// Warten Sie auf das Aktivierungsereignis, um zwischengespeicherte Daten zu aktualisieren self.addEventListener('activate', e => {
  // Stellen Sie sicher, dass der erste Ladevorgang self.clients.claim() auslöst.
});

// Auf Abrufereignisse achten, um zwischengespeicherte Daten zu verwenden:
self.addEventListener('fetch', async e => {
  const req = e.Anforderung;
  const url = neue URL(erfordert.url);
  wenn (url.herkunft === standort.herkunft) {
    e.respondWith(cacheFirst(req));
  } anders {
    e.respondWith(NetzwerkUndCache(req));
  }
});

asynchrone Funktion cacheFirst(req) {
  // Bestimmen Sie, ob die aktuelle Anforderung zwischengespeichert werden muss const cache = await caches.open(cacheName);
  const zwischengespeichert = warte auf Cache.Match(req);
  // Wenn ein Cache vorhanden ist, verwende den Cache. Wenn nicht, hole ihn über eine neue Anfrage. return cached || fetch(req);
}

asynchrone Funktion networkAndCache(req) {
  const cache = warte auf caches.open(cacheName);
  versuchen {
    // Cache-Fehler werden auch direkt aus der neuen Anfrage abgerufen const fresh = await fetch(req);
    warte auf cache.put(req, fresh.clone());
    frisch zurückkehren;
  } fangen (e) {
    const zwischengespeichert = warte auf Cache.Match(req);
    zwischengespeicherte Rückgabe;
  }
}

Die in sw.js verwendete Standardprogrammiermethode web worker wird in einem anderen globalen Kontext （self） ausgeführt, der sich von window unterscheidet. Deshalb wird self.addEventListener() verwendet.

Cache API ist eine von Service Worker bereitgestellte Schnittstelle zum Betrieb des Cache. Diese Schnittstellen werden basierend auf Promise implementiert, einschließlich Cache und Cache Storage . Cache interagiert direkt mit Anfragen und bietet einen Speichermechanismus für zwischengespeicherte Request / Response Objektpaare. CacheStorage stellt die Speicherinstanz Cache Objekts dar. Wir können über die globale caches Eigenschaft direkt auf Cache API zugreifen.

** Cache API Beschreibung:

• Cache.match(request, options) : Gibt ein Promise -Objekt zurück, das die erste zwischengespeicherte Anfrage resolve , die mit dem Cache Objekt übereinstimmt.
• Cache.matchAll(request, options) : Gibt ein Promise -Objekt zurück, das Ergebnis der resolve ist ein Array aller Anfragen, die mit dem Cache -Objekt übereinstimmen. Cache.addAll(requests) : Empfängt ein Array von URL , ruft die zurückgegebenen response ab und fügt sie dem angegebenen Cache -Objekt hinzu.
• Cache.delete(request, options) : Sucht nach einem Cache Eintrag mit key request . Wenn der Cache Eintrag gefunden wird, wird er gelöscht und ein Promise Objekt zurückgegeben, resolve „ true ergibt. Wenn er nicht gefunden wird, wird ein Promise Objekt zurückgegeben, resolve „ false ergibt.
• Cache.keys(request, options) : Gibt ein Promise -Objekt zurück; das Ergebnis der resolve ist ein Array von Cache -Objekt key .

Hinweis: request.clone() und response.clone() werden verwendet, da request und response ein Stream sind und nur einmal verwendet werden können. Der Cache wurde einmal verbraucht und wird erneut verbraucht, wenn die HTTP Anforderung initiiert wird. Zu diesem Zeitpunkt wird clone zum Klonen der Anforderung verwendet.

Wenn jetzt die installierte Service Worker -Seite geöffnet wird, wird Service Worker -Skripts ausgelöst. Wenn der Zeitstempel des letzten in die Service Worker Datenbank geschriebenen Skript-Updates mehr als 24小時vom aktuellen Update entfernt ist, wird ein Service Worker -Skript-Update ausgelöst. Wenn sich die Datei sw.js ändert, wird die Aktualisierung Service Worker -Skripts ausgelöst. Der Aktualisierungsvorgang ähnelt dem Installationsvorgang, mit der Ausnahme, dass der aktualisierte Service Worker nicht sofort nach der erfolgreichen Installation des Updates in den active Zustand wechselt. Der aktualisierte Service Worker koexistiert mit dem ursprünglichen Service Worker und führt dessen install aus. Sobald der neue Service Worker erfolgreich installiert wurde, wechselt er in den wait und muss warten, bis die alte Version des Service Worker eintritt/der Thread beendet wird.

Weitere Informationen zu Server Worker finden Sie unter dem Link am Ende des Artikels 🔗

Ergebnis:

PC-Seite 🖥️: Unter Windows wird nach dem ersten Öffnen der App im Browser eine Installationsaufforderung angezeigt. Klicken Sie auf das Installationssymbol, um es zu installieren. Auf dem Desktop und im Startmenü wird eine Anwendungsverknüpfung generiert. Klicken Sie auf die Verknüpfung, um die App zu öffnen.

Mac 💻 : Die oben genannten chromiumn內核Browser ( chrome , opera , neue Version edge ) sind ebenfalls ähnlich. Nach der Installation wird im launchpad eine Verknüpfung generiert.

Mobil 📱: iPhone . Wählen Sie im Browser „Auf Desktop speichern“, um ein Desktopsymbol zu generieren. Klicken Sie auf das Symbol, um die Offlineanwendung zu öffnen.

Kirschblüten fallen 🌸

Um die visuelle Wirkung und das Interesse zu erhöhen, wurde der Seite der Effekt herabfallender Kirschblüten 🌸 hinzugefügt. Die Falleffektanimation verwendet hauptsächlich Element.animate() .

Die animate() -Methode des Element ist eine praktische Methode, die eine neue Animation erstellt, sie auf das Element anwendet und dann die Animation ausführt. Es wird eine neu erstellte Instanz des Animation zurückgegeben. Auf ein Element können mehrere Animationseffekte angewendet werden. Sie können eine Liste dieser Animationseffekte erhalten, indem Sie diese Funktion aufrufen: Element.getAnimations() .

Grundlegende Syntax:

var Animation = Element.Animate(Keyframes, Optionen);

Parameter:

• keyframes : Keyframes. Ein Objekt, das eine Sammlung von Keyframes darstellt.
• options : Eine optionale Ganzzahl, die die Dauer der Animation (in Millisekunden) darstellt, oder ein Objekt, das eine oder mehrere Zeiteigenschaften enthält:

id : Optional, eine Eigenschaft, die als eindeutiger Bezeichner in animate() verwendet werden kann: ein String ( DOMString ), der zum Verweisen auf die delay verwendet wird: Optional, die Anzahl der Millisekunden, um die die Startzeit verzögert werden soll, der Standardwert ist 0 .

direction : optional, die Richtung der Animation. Läuft normal vorwärts, läuft reverse , wechselt nach jeder Iteration alternate die Richtung, läuft rückwärts und wechselt nach jeder Iteration alternate-reverse die Richtung. Die Standardeinstellung ist normal .

duration : Optional, die Anzahl der Millisekunden, die die Animation zum Abschließen jeder Iteration benötigt. Der Standardwert ist 0 . easing : optional, wie oft sich die Animation im Laufe der Zeit ändert. Zu den zulässigen voreingestellten Werten gehören linear , „ ease , ease-in , ease-out , ease-in-out “ und ein benutzerdefinierter Wert cubic-bezier , wie etwa cubic-bezier(0.42, 0, 0.58, 1) . Der Standardwert ist linear .

endDelay : optional, eine Verzögerung nach dem Ende einer Animation, der Standardwert ist 0 .

fill : optional, definiert, wann der Animationseffekt das Element beeinflusst. Er beeinflusst das Element, bevor die backwards beginnt, beeinflusst das Element, nachdem forwards abgeschlossen ist, both . Der Standardwert ist none .

iterationStart : Optional, beschreibt, an welchem ​​Punkt der Iteration die Animation beginnen soll. Beispielsweise bedeutet 0.5 , dass mit der ersten Iteration in der Mitte begonnen wird. Wenn dieser Wert eingestellt ist, endet eine Animation mit 2 Iterationen in der Mitte der dritten Iteration. Der Standardwert ist 0.0 .

iterations : Optional, die Anzahl der Wiederholungen der Animation. Der Standardwert ist 1 und kann auch den Wert infinity annehmen, um das Element zu wiederholen, falls es vorhanden ist.

Der folgende Code ist die spezifische Implementierung in diesem Beispiel. Es gibt mehrere .petal Elemente in HTML . Dann holt JavaScript alle .petal Elemente und fügt zufällige Animationen hinzu. In CSS werden zwei Arten von Rotations- und Deformationsanimationen hinzugefügt, um den Effekt fallender Kirschblütenblätter zu erzielen.

<div id="Blütenblatt_Container">
  <div Klasse="Blütenblatt"></div>
  <!-- ... -->
  <div Klasse="Blütenblatt"></div>
</div>

var petalPlayers = [];
Funktion animatePetals() {
  var Blütenblätter = document.querySelectorAll('.petal');
  wenn (!petals[0].animate) {
    var petalsContainer = document.getElementById('petals_container');
    gibt false zurück;
  }
  für (var i = 0, len = Blütenblätter.Länge; i < len; ++i) {
    var Blütenblatt = Blütenblätter[i];
    petal.innerHTML = '<div Klasse="rotate"><img src="petal.jpg" Klasse="askew"></div>';
    var Skala = Math.random() * .6 + .2;
    var Spieler = Blütenblatt.animate([{
        transformieren: 'translate3d(' + (i / len * 100) + 'vw,0,0) scale(' + scale + ')',
        Deckkraft: Skalierung
      },
      {
        transformieren: 'translate3d(' + (i / len * 100 + 10) + 'vw,150vh,0) scale(' + scale + ')',
        Deckkraft: 1
      }
    ], {
      Dauer: Math.random() * 90000 + 8000,
      Iterationen: Unendlichkeit,
      Verzögerung: -(Math.random() * 5000)
    });
    petalPlayers.push(Spieler);
  }
}
animatePetals();

.Blütenblatt .drehen {
  Animation: DriftyRotate, 1 s, unendlich, beides, Easy-In-Out;
  Perspektive: 1000;
}
.Blütenblatt .schräg {
  transformieren: schrägY(10 Grad);
  Anzeige: Block;
  Animation: 1 Sekunde treibend, unendlich, abwechselnd, beides sanft ein- und ausfahren;
  Perspektive: 1000;
}
.petal:n-ter-Typ(7n) .askew {
  Animationsverzögerung: -,6 s;
  Animationsdauer: 2,25 s;
}
.petal:n-ter-Typ(7n + 1) .askew {
  Animationsverzögerung: -.879s;
  Animationsdauer: 3,5 s;
}
/* … */
.petal:n-ter-Typ(9n) .rotate {
  Animationsdauer: 2s;
}
.petal:n-ter-Typ(9n + 1) .rotate {
  Animationsdauer: 2,3 s;
}
/* … */
@keyframes driften {
  0% {
    transformieren: skewY(10 Grad) übersetzen3d(-250 %, 0, 0);
    Anzeige: Block;
  }
  100 % {
    transformieren: skewY(-12 Grad) übersetzen3d(250 %, 0, 0);
    Anzeige: Block;
  }
}
@keyframes driftyRotate {
  0% {
    transformieren: drehenX(0);
    Anzeige: Block;
  }
  100 % {
    transformieren: drehenX(359 Grad);
    Anzeige: Block;
  }
}

Den vollständigen Code finden Sie im Link nach dem Artikel 🔗 .

CSS bestimmt den horizontalen Bildschirm des Mobiltelefons

In diesem Beispiel wurde 50音小游戲für Mobilgeräte entwickelt und nicht an den PC-Stil angepasst. Daher kann eine horizontale Bildschirmführungsseite hinzugefügt werden, um Benutzer zur Verwendung des vertikalen Bildschirms aufzufordern. Um in CSS zu ermitteln, ob sich ein mobiles Gerät im Querformat befindet, müssen Sie aspect-ratio für die Medienabfrage verwenden. Dies erfolgt durch Testen des Seitenverhältnisses viewport .

aspect-ratio “ wird als <ratio> -Wert angegeben, der das Seitenverhältnis des viewport darstellt. Es handelt sich um einen Bereich, und Sie können min-aspect-ratio und max-aspect-ratio verwenden, um jeweils die minimalen und maximalen Werte abzufragen. Die grundlegende Syntax lautet wie folgt:

/* Minimales Seitenverhältnis */
@media (Mindest-Seitenverhältnis: 8/5) {
  // ...
}
/* Maximales Seitenverhältnis */
@media (maximales Seitenverhältnis: 3/2) {
  // ...
}
/* Klares Seitenverhältnis, platziere es unten, um Überlappungen zu vermeiden, wenn alle Bedingungen erfüllt sind*/
@media (Seitenverhältnis: 1/1) {
  // ...
}

Die spezifische Implementierungsmethode in der Anwendung besteht darin, eine Führungsebene .mod_orient_layer hinzuzufügen und auszublenden und sie dann anzuzeigen, wenn das minimale Seitenverhältnis erreicht ist:

<div Klasse="mod_orient_layer"></div>

.mod_orient_layer {
  Anzeige: keine;
  Position: fest;
  Höhe: 100%;
  Breite: 100 %;
  links: 0;
  oben: 0;
  rechts: 0;
  unten: 0;
  Z-Index: 999;
  Hintergrund: #FFFFFF URL('Landschaft.jpg') keine Wiederholung Mitte;
  Hintergrundgröße: automatisch 100 %;
}
@media screen und (min-aspect-ratio: 13/8) {
  .mod_orient_layer {
    Anzeige: Block;
  }
}

Ergebnis:

Kompatibilität

Nachfolgend finden Sie eine Kompatibilitätsansicht mehrerer in diesem Artikel enthaltener Attribute. In tatsächlichen Produktionsprojekten müssen Sie auf die Kompatibilitätsanpassung achten.

Photoshop-Kenntnisse

Logo-Entwurf

logo besteht hauptsächlich aus zwei Elementen: einem ⛩️ Symbol und dem japanischen Hiraganaあ, beides klassische japanische Elemente. Gleichzeitig wird dasあgestreckt und abgestuft, um einen Schatten ähnlich ⛩️ zu bilden, der die Buchstaben und Grafiken geschickt verbindet und das Bild harmonisch macht. Die Hintergrundfarbe des Logos verwendet die Hintergrundfarbe des Anwendungsthemas, wodurch eine unsichtbare Verbindung mit der Seite hergestellt wird und ein einheitlicher Stilstandard für全鏈路gebildet wird. (Ich kann nicht weiterschreiben…😂

⛩ Originalmodell von Torii stammt von dribbble : https://dribbble.com

Externe Links und Referenzen

Sakura-Streuanimation, Vollversion https://codepen.io/dragonir/full/WNjEPwW

Unterstützung des Dunkelmodus in WebKit https://webkit.org/blog/8840/dark-mode-support-in-webkit

PWA-Technologietheorie + praktische Analyse https://www.cnblogs.com/yangyangxxb/p/9964959.html

H5 PWA-Technologie https://zhuanlan.zhihu.com/p/144512343

Seitenverhältnis https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/aspect-ratio

Servicemitarbeiter https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API

Element.animate() https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animate

Autor: dragonir Blog-Adresse: https://www.cnblogs.com/dragonir/p/15041977.html

Dies ist das Ende dieses Artikels über das Front-End-Wissen im Gokudō-Spiel. Weitere relevante Inhalte zum Front-End-Wissensspiel finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!