Ich präsentiere Ihnen Ihre Aufmerksamkeit - eine der möglichen Optionen für die Implementierung eines ziemlich lustigen Tricks, um den Effekt eines realistischen Umblätterns zu erzielen. Github-
Demo und Dokumentation.
Ich habe einen ähnlichen Effekt lange Zeit implementiert, damals an der Universität und in Delphi. Es stellte sich als ziemlich würdig heraus, obwohl ich damals viel Zeit verbracht habe. Jetzt - in der Zeit der Selbstisolation - wurde es interessant, etwas Ähnliches auf JS für PC und mobile Geräte zu implementieren. Ehrlich gesagt bin ich mir nicht sicher, ob dieser Effekt praktisch anwendbar ist, und ich denke, dass es in den meisten Fällen nichts Besseres gibt als einen einfachen Bildwechsel ohne Animation. Es ist jedoch durchaus möglich, beispielsweise auf Restaurantseiten ein Menü zu veröffentlichen (vor allem aber - das würde neben dem Link dupliziert!).Alles ist in Typoskript geschrieben. Es wurden keine Bibliotheken von Drittanbietern verwendet. Es gibt keine Abhängigkeiten.Wichtige Funktionen der Bibliothek
- Funktioniert sowohl mit einfachen Bildern, mit Rendering auf Leinwand als auch mit HTML-Blöcken - unter Verwendung von CSS-Transformationen
- Ziemlich flexibles Konfigurationssystem und einfache API
- Unterstützt mobile Geräte
- Automatischer Orientierungswechsel zwischen Hoch- und Querformat
Der Code wurde nur mit Blick auf ES6 + geschrieben, und das modulare System ist ebenfalls ES6. Die Browserunterstützung basiert im Durchschnitt zu 90% auf caniuse.com.Installation
Die Installation ist ab npm möglich:npm install page-flip
Oder laden Sie die gesammelten Dateien aus dem Repository herunter .Die grundlegende Option für die Initialisierung der Bibliothek kann wie folgt aussehen:<div id="book">
<div class="my-page">
Page one
</div>
<div class="my-page">
Page two
</div>
<div class="my-page">
Page three
</div>
<div class="my-page">
Page four
</div>
</div>
import {PageFlip} from 'page-flip';
const pageFlip = new PageFlip(document.getElementById('book'),
{
width: 400,
height: 600
}
);
pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));
Eine detailliertere Beschreibung und Spezifikation der API finden Sie unter dem obigen Link.Ich möchte über einige der Probleme und Nuancen sprechen, auf die ich während der Entwicklung gestoßen bin.Berechnungen
Das erste, worüber man sprechen muss, ist ein mathematisches Modell. Im Prinzip sind alle Berechnungen ziemlich trivial, aber ich habe viel Zeit gebraucht.Die Hauptaufgabe, die gelöst werden muss, besteht darin, den Transformationswinkel des Umblätterns zu bestimmen. Schauen wir uns das folgende Bild an:
Punkt „A“ zeigt den aktuellen Berührungspunkt im Buch an. Basierend auf der Position dieses Punktes müssen weitere Berechnungen durchgeführt werden.Um den Winkel zu bestimmen, müssen zwei Werte berechnet werden - der Abstand von Punkt A zum oberen und rechten Rand des Buches. In der Abbildung unten sind sie mit T bzw. L gekennzeichnet.
G ist die Diagonale des Winkels und kann nach dem Satz von Pythagoras berechnet werden.Um die Drehung des Bildes zu berechnen, können Sie die folgende Formel verwenden: angle = - 2 * acos (L / G). Vergessen Sie vor allem nicht, dass der Transformationspunkt in diesem Fall die obere linke Ecke der Seite ist.Nach der Berechnung des Winkels - der zeitaufwändigste Teil bleibt - wird die Sichtbarkeit der Seite berechnet. Was anscheinend notwendig sein sollte, um zu gehen, und der Rest, um zu trimmen.Zuerst müssen Sie die Schnittpunkte der Seite finden, die mit den Rändern des Buches gespiegelt werden sollen. In den Figuren sind sie durch die Punkte B und C gekennzeichnet.
Ich habe dies auf einfachste und unkomplizierteste Weise getan - auf der Stirn. Er baute die Gleichungen von Linien aus zwei Punkten und suchte dann nach ihrem Schnittpunkt.Nachdem wir alle Schnittpunkte gefunden haben, bestimmen wir die Eckpunkte des Sichtbarkeitsbereichs - und an diesen Punkten schneiden wir bereits die zu blätternde Seite zu.
Grundsätzlich läuft die ganze Mathematik hier auf zwei Dinge hinaus:- Transformationswinkelberechnung
- Berechnung der Seitensichtbarkeit
Die Schattierung basiert bereits auf zuvor durchgeführten Berechnungen.Kommen wir nun zu einigen Punkten, denen wir uns bei der Implementierung stellen mussten.Der allgemeine Algorithmus ist recht einfach und läuft auf das Umblättern und Zuschneiden von Seiten hinaus.Bei Leinwand und einfachen Bildern ist alles ziemlich einfach. Nach dem Durchführen der Berechnungen werden 2D-Canvas-Kontextmethoden wie Übersetzen, Drehen und Ausschneiden verwendet.Mit HTML-Blöcken etwas komplizierter. Und wenn es kein Problem mit der Rotation gibt - dank CSS-Transformationen - dann hat sich beim Zuschneiden alles als etwas schlimmer herausgestellt.Daher war es am einfachsten, die Clip-Pfad- und CSS-Eigenschaften der Figur - Polygon - zu verwenden. Bevor Sie jedoch die Polygonscheitelpunkte für das Zuschneiden festlegen, müssen Sie die Koordinaten der Punkte aus der "globalen" Zeichenfläche in lokale Koordinaten relativ zum HTML-Element umwandeln. Dies wird durch die umgekehrte Anwendung der Rotationsmatrix mit einer Verschiebung relativ zur Position des Elements gelöst.Ein weiteres Problem war die Skalierung und automatische Positionierung des Buches. Ich habe versucht, dies mit dem Konfigurationsobjekt zu lösen, das während der Erstellung übergeben wird. Aber am Ende gab es einige Parameter, und es stellte sich heraus, dass dies nicht ganz bequem und nicht offensichtlich war.Ich habe zuerst Webpack für die Assembly verwendet, aber am Ende habe ich mich für rollup.js entschieden und war vom endgültigen Code sehr angenehm überrascht. Webpack bleibt weiterhin bestehen, da es die Montage im laufenden Betrieb um ein Vielfaches schneller erledigt und während der Entwicklung bequemer ist.Ich freue mich über Kommentare und Vorschläge zur Weiterentwicklung der Bibliothek.