Geheimnisse und Techniken der qualitativen Wirkung von Paging

Ursprünglicher Autor: Rick Barraza
  • Übersetzung
Die Technik des Umblätterns ist seit mehreren Jahren in Flash vorhanden. Es sind jedoch nicht alle Implementierungen gleich. Normalerweise unterscheiden sich die Qualitätskomponenten für den Paging-Effekt, die Sie kaufen können, erheblich von den kostenlosen Handbüchern, die Sie online finden. Der größte Unterschied ist der Bewegungsbereich für die Ecke der Seite. Die meisten kostenlosen Hilfslinien bieten einen festen Pfadradius, anstatt einen größeren Bewegungsbereich zu verwenden. Mit anderen Worten, es spielt keine Rolle, wo Sie die Seite mit der Maus ziehen, die Ecke bewegt sich immer entlang der gleichen Kurve von einer Seite zur anderen. Die Mathematik für eine solche Technik ist recht einfach und Optionen für ihre Implementierung sind überall zu finden. Es ist interessant, dass Sie mit hochwertigen Komponenten mit dem Effekt des Blätterns einen wesentlich größeren Bewegungsspielraum nutzen können. Dadurch können Sie Effekte von viel höherer Qualität erzielen. Und niemand spricht darüber, wie dies erreicht werden kann!




Umblättern für Silverlight

Heute erklären wir die mathematische Implementierung des qualitativen Seitenumblättereffekts für Silverlight. Die Silverlight-Implementierung finden Sie oben [Video im Artikel, die Silverlight-Implementierung finden Sie im Blog des Autors], wurde unter Verwendung der Trigonometrie, der „cleveren Maskentechnik“ und des Effekts „Rauch und Spiegel“ für Schatten erstellt. Wie in den meisten meiner Artikel ist die Implementierung des Effekts in den mechanischen Teil (Mathematik) und den Darstellungsteil (Rendering-Tricks) unterteilt. Da Silverlight und Flash das Maskieren, Zuschneiden und Transformieren auf unterschiedliche Weise unterstützen, richtet sich dieses Handbuch hauptsächlich an Silverlight-Entwickler. Die mathematischen Geheimnisse der Paging-Technik gelten jedoch auch für Entwickler, die interaktive Anwendungen in anderen Sprachen erstellen, da in diesem Handbuch die Mechanismen des Bewegens zur Lösung eines Problems erläutert werden.

Schritt 1: Folgen Sie der Maus, während Sie die Ecke halten


Bild
Im Original statt im Bild - eine interaktive SL-Anwendung . Gehen Sie zur Seite des Originalartikels, um ein Live-Beispiel zu testen. [ BlogPageFlipStudy01.zip herunterladen ]
PageFlipStudy01 installiert das Framework für die von uns benötigten Zwecke. Bitte lesen Sie es sorgfältig durch, da die nächsten drei Stufen aufeinander aufgebaut werden. Wenn Sie das erste Archiv öffnen, finden Sie eine Lösung mit nur zwei Elementen MainPage.xaml und Dot.xaml, die zur Visualisierung von Variablen erstellt werden. Wenn Sie sich den Code MainPage.xaml.cs ansehen, werden Sie feststellen, dass die Funktion loaded () hauptsächlich mit dem Initialisieren von Variablen und dem Installieren von Mausereignishandlern zu tun hat. Die gesamte Logik findet im Animationszyklus CompositeTarget.Rendering () statt. Schlüsselvariablen sind unten aufgeführt:
  • M - Mausposition, die durch das MouseMove () -Ereignis festgelegt wird;
  • F - Mausfolger, der es uns ermöglicht, die Verarbeitung der Anfangsposition der Maus zu vereinfachen;
  • C ist der Grenzpunkt, der festlegt, wo sich die Ecke der Seite befinden soll.
  • R1 ist der Radiuspunkt auf dem Begrenzungskreis, dessen Bogen die maximal zulässige Breite für die Seite bestimmt.
  • SC ist das Zentrum der Wirbelsäule;
  • SB - Unterseite der Wirbelsäule;
  • EB ist die untere rechte Ecke.
Die Grundlogik der Bedingung in der Animationsschleife ist unten dargestellt:



Die wichtigste Variable an diesem Punkt ist unsere berechnete Eckbedingung (Punkt C oben). Ich verwende niemals Positionsdaten von Mausereignissen direkt, sondern erstelle einen Follower ( Verfolgungsvariable ), der das Ermitteln der Mausposition erleichtert. Damit das Blättern funktioniert, ist jedoch eine Einschränkung erforderlich, die die Position der Ecke der Seite angibt, um die maximale Seitenbreite zu begrenzen. Mit anderen Worten kann die Linie SB> C nicht größer sein als die Linie SB> EB .

Schritt 2: Fügen Sie eine zweite Bedingung hinzu und definieren Sie ein kritisches Dreieck


Bild
Im Original statt im Bild - eine interaktive SL-Anwendung . Gehen Sie zur Seite des Originalartikels, um ein Live-Beispiel zu testen. [ BlogPageFlipStudy02.zip herunterladen ]
In PageFlipStudy02 fügen wir eine zusätzliche Einschränkung für den Radius R2 hinzu, um den maximalen Abstand zu bestimmen, um den die Ecke der Seite vom oberen Rand des Rückens entfernt sein kann ( ST- Punkt oben). Mit anderen Worten kann die Linie ST> C nicht größer sein als die Linie, die ST und R2 verbindet . Im Folgenden finden Sie einen zusätzlichen Beschränkungscode für den zweiten Radius:



Nachdem der Punkt der Ecke C durch beide Radien begrenzt ist, können wir das Hauptproblem angehen: ein kritisches Dreieck. Das kritische Dreieck ergibt sich aus dem Schnittpunkt der Winkelhalbierenden SB mit der Geraden CEB(Punkt T0). Die Senkrechte von diesem Punkt ergibt den Punkt T2 , und das Dreieck T1 vervollständigt das Dreieck . Das kritische Dreieck wird verwendet, um sowohl die Position als auch die Drehung des Seitenobjekts zu steuern. Darüber hinaus dient das Dreieck uns als Grenzdeterminante. Unten ist der Code mit der Berechnung des Dreiecks:



Sie können mit diesem Code experimentieren, um zu sehen, wie er das Endergebnis beeinflusst.

Schritt 3: Fügen Sie eine Seite hinzu und drehen Sie eine Ecke


Bild
Im Original statt im Bild - eine interaktive SL-Anwendung . Gehen Sie zur Seite des Originalartikels, um ein Live-Beispiel zu testen. [ BlogPageFlipStudy03.zip herunterladen ]
Die wichtigste Änderung an PageFlipStudy03 ist das Hinzufügen des Steuerelements pageBack.xaml, das die zur Anzeige erforderlichen Grafiken enthält. Wenn Sie sich das Steuerelement ansehen, werden Sie feststellen, dass sowohl der Positions- als auch der Rotationspunkt des Steuerelements auf den linken unteren Eckpunkt fallen. Dies ist wichtig, da beim Scrollen der Seite die Ecke, in der Sie geblättert haben, unten links angezeigt wird. In MainPage.xaml.cs werden Seitenpositionierung und Drehung wie folgt berechnet:



Ein wichtiger Teil der Implementierung besteht darin, dass der durch T2 und C definierte Winkel die erforderliche Seitendrehung bestimmt, wenn die Maus auf Punkt C bewegt wird. Sie können den Winkel im Bogenmaß bestimmen, indem Sie die Math.atan2 () -Operation für die obigen Variablen ausführen. Nachdem Sie den Tangentenwert erhalten haben, können Sie den Seitendrehwinkel auf diesen Wert einstellen, nachdem Sie ihn in Grad im Bogenmaß umgerechnet haben (Multiplikation von Math.PI / 180.0). Daher kreuzt die Seite beim Scrollen immer T2 .

Schritt 4: Festlegen des anzuzeigenden Bereichs (Beschneidungsbereich)


Bild
Im Original statt im Bild - eine interaktive SL-Anwendung . Gehen Sie zur Seite des Originalartikels, um ein Live-Beispiel zu testen. [ BlogPageFlipStudy04.zip herunterladen ]
In diesem Stadium sollten Sie sich der Logik bewusst sein, die zum ordnungsgemäßen Begrenzen und Drehen der Seite erforderlich ist. Der letzte wichtige Schritt besteht jedoch darin, einen Beschneidungsbereich zu definieren, der auch Teil der Animation ist, um zu bestimmen, wie viel von der Seite beim Scrollen sichtbar sein soll. Da der Zweck dieses Handbuchs darin besteht, den mathematischen Apparat der Technik zu demonstrieren, lasse ich das Rechteck sichtbar, damit Sie sehen können, was wirklich passiert. Das rote Rechteck darüber, das mir die Punkte für den beschnittenen Bereich gibt, wurde abhängig von der Position von T2 erstellt . Sie können die Position und die Drehung wie folgt berechnen:



Wenn wir die Lösung implementieren möchten, muss das oben verwendete rote Rechteckobjekt in eine Sammlung von Pfadsegmenten mit PathGeometry konvertiert werden, die den beschnittenen Bereich für das Seitensteuerelement bestimmen Pfad ausschneiden). Die gute Nachricht ist, dass die GeneralTransform- Klasse in Silverlight dies sehr einfach macht:



Und das ist alles! Der violette Bereich im Bild oben, der durch den Schnittpunkt der blauen Seite und des roten Rechtecks ​​gebildet wird, bestimmt, welcher Teil der Seite beim Blättern durch die Seite sichtbar sein soll. Mithilfe der berechneten Punktwerte können Sie das Rechteck in die korrekten pathGeometry-Werte konvertieren, wodurch Sie das Seitensteuerelement ausschneiden und das Erscheinungsbild der gescrollten Seite erstellen können. All diese Trigonometrie bestimmt den mathematischen Apparat für den Effekt des Umblätterns von Seiten hoher Qualität. Mit diesem Wissen können Sie es strukturieren, um Schatten oder einige weitere Seiten hinzuzufügen. Das Scrollen von links nach rechts ist nur ein Spiegelbild der Geometrie, und das Scrollen von oben nach unten ist ein einfaches Umkehren. Ich überlasse Ihnen die Möglichkeit, mit Schatten zu spielen und Seiten mit Logik zu versehen. Viel spaß

Progg es

Jetzt auch beliebt: