Typen- und Ansichtsfensterübergänge in CSS mit Tan (atan2 ())

cs Überraschenderweise war das vor mehr als zehn Jahren. Heutzutage ist es so einfach, 100vw zu schreiben, aber was bedeutet das in Pixel? Was ist mit anderen Eigenschaften, wie z. B. denen, die Prozentsätze, Winkel oder Ganzzahlen einnehmen?

Erwägen Sie, die Opazität eines Elements zu ändern, basierend auf der Bildschirmgröße, zu rotieren oder den Fortschritt einer Animation festzulegen. Erstens benötigen Sie das Ansichtsfenster als Ganzzahl - das ist derzeit in CSS unmöglich, oder?

Worüber ich als nächstes sprechen möchte, ist keine Durchbruchsdeckung, die Jane Oriin 2023 wunderbar beschrieben hat. Kurz gesagt, wir können einen seltsamen Trick (oder Attribut) verwenden, an dem tan() und atan2() trigonometrische Funktionen beteiligt sind, um Längentypen (z. B. Ansichtsfenster) in Ganzzahlen umzuwandeln. Dies eröffnet viele neue Layout -Möglichkeiten für , aber meine erste Erfahrung war das Schreiben eines Almanac -Eintrags, und ich wollte nur die Deckkraft des Bildes reagieren.

Die Größe der Größenreside Codeten, wenn die Bildschirmgröße kleiner wird, wird das Bild transparenter und natürlich gibt es einige Grenzen, sodass es nicht unsichtbar wird:

Dies ist der einfachste Weg, den wir tun können, aber es gibt noch mehr. Zum Beispiel habe ich versucht, viele Viewport-bezogene Effekte zu kombinieren, um diese Demonstration zu erzielen. Die Größe der Demo Größe und die Seite sind voller Vitalität: Objekte verschieben sich, Hintergrundänderungen und Texthackungen reibungslos.

Ich finde es wirklich cool, aber ich bin kein Designer, also ist es der beste Weg, wie mein Gehirn denken kann. Dies ist jedoch möglicherweise ein wenig zu viel für die Einführung dieser Typ -Conversion -Technik.

Einstellungen

Die Idee dahinter besteht darin,

in Radians (eine Möglichkeit zum Schreiben von Winkeln) mit

in den ursprünglichen Wert zu konvertieren und mit atan2() zu seinem ursprünglichen Wert zurückzukehren. Der Vorteil ist, dass sie als Ganzzahl erscheint. Es sollte so implementiert werden: 100vw tan()

Aber! Browser unterstützen diesen Ansatz nicht sehr, sodass mehr Verpackung erforderlich ist, damit er in allen Browsern funktioniert. Das Folgende mag wie Magie (oder Unsinn) aussehen. Ich empfehle daher, Janes Artikel besser zu verstehen, aber damit es in allen Browsern funktioniert:

<code>:root {
  --int-width: tan(atan2(100vw, 1px));
}</code>

Mach dir keine Sorgen. Was zählt, ist unsere wertvolle

<code>@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}</length></code>

Variable, die die Ansichtsfenstergröße als Ganzzahl spart!

--int-width Breite: Eine Zahl dominiert alle

Jetzt haben wir das Ansichtsfenster als Ganzzahl, aber dies ist nur der erste Schritt. Diese Ganzzahl ist an sich nicht sehr nützlich. Wir sollten es als nächstes in etwas anderes konvertieren, weil:

• Verschiedene Attribute haben unterschiedliche Einheiten und
• Wir möchten, dass jedes Attribut vom Startwert zum Endwert ändert.

Beachten Sie, dass sich die Deckkraft des Bildes von 0 auf 1 ändert, das Objekt ändert sich von 0DEG auf 360 Grad oder die offset-distance des Elements ändert sich von 0% auf 100%. Wir wollen zwischen diesen Werten zwischen 0 und 1600 zwischen 0 und 1600 wechseln, was unflexibel ist und nicht leicht in einen Endwert konvertiert werden kann, wenn diese Werte zwischen 0 und 1600 nicht konvertiert werden können. --int-width

Die beste Lösung besteht darin,

in eine Zahl von 0 auf 1 umzuwandeln. Wenn der Bildschirm größer wird, können wir ihn mit dem gewünschten Endwert multiplizieren. Aufgrund des Mangels eines besseren Namens nenne ich diesen Wert von "0 bis 1" --int-width. Wenn wir --wideness haben, sind alle abschließenden Beispiele möglich: --wideness

<code>:root {
  --int-width: tan(atan2(100vw, 1px));
}</code>

ist daher

ein Wert zwischen 0 und 1, der die Breite des Bildschirms angibt: 0 bedeutet, wenn der Bildschirm schmal ist und 1 bedeutet, wenn der Bildschirm breit ist. Aber wir müssen die Bedeutung dieser Werte im Ansichtsfenster noch festlegen. Zum Beispiel möchten wir, dass 0 400px und 1 1200px sein und unsere Ansichtsfensterung zwischen diesen Werten verläuft. Die Werte unter und höher sind auf 0 bzw. 1 geklemmt. --wideness

In CSS können wir es so schreiben:

<code>@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}</length></code>

Zusätzlich zu einfachen Konvertierungen ermöglicht die

-Revers, die unteren und oberen Grenzen, an denen die Umwandlung ausgeführt werden soll. Noch besser, wir können den Conversion -Bereich in der Mitte einstellen, damit der Benutzer ihn voll und ganz schätzen kann. Andernfalls muss der Bildschirm 0PX sein, damit --wideness 0 erreicht und wer weiß, wie breit es sein muss, 1 zu erreichen. --wideness

Wir haben -Widmess. Was kommt als nächstes?

Erstens ist das Titel -Tag in Spannweiten unterteilt, da es keine CSS -Methode gibt, um bestimmte Wörter im Satz auszuwählen:

<code>/* 如果 `--wideness` 为 0.5 */

.element {
  opacity: var(--wideness); /* 为 0.5 */
  translate: rotate(calc(wideness(400px, 1200px) * 360deg)); /* 为 180deg */
  offset-distance: calc(var(--wideness) * 100%); /* 为 50% */
}</code>

Da wir uns selbst wickeln, ist es sehr wichtig, einige Standardwerte zu verunsichern:

<code>:root {
  /* 两个边界都是无单位的 */
  --lower-bound: 400;
  --upper-bound: 1200;

  --wideness: calc(
    (clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) - var(--lower-bound)) / (var(--upper-bound) - var(--lower-bound))
  );
}</code>

Conversion sollte ohne den grundlegenden Stil funktionieren, sieht aber zu gewöhnlich aus. Wenn Sie sie in Ihr Stylesheet kopieren möchten, sehen sie so aus:

Schließlich sind unsere aktuellen Fähigkeiten wie folgt:

<code><h1>Resize and enjoy!</h1></code>

Okay, das ist alles für die Einstellung. Jetzt ist es Zeit, unsere neuen Werte zu verwenden und die Konvertierung von Ansichtsfenster durchzuführen. Wir müssen zunächst bestimmen, wie der Titel neu angeordnet werden sollte, um den kleineren Bildschirm anzupassen: Wie Sie in der anfänglichen Demo sehen können, bewegt sich der erste

nach oben und rechts, während sich der zweite span in die entgegengesetzte Richtung bewegt, unten und links. Daher werden die endgültigen Positionen der beiden span in die folgenden Werte konvertiert: span

<code>h1 {
  position: absolute; /* 保持文本居中 */
  white-space: nowrap; /* 禁用换行 */
}</code>

Die beiden Formeln sind im Grunde gleich, aber die Symbole sind unterschiedlich, bevor sie fortgesetzt werden. Wir können sie gleichzeitig umschreiben, indem wir eine neue Variable

einführen. Es wird 1 oder -1 sein und die Richtung definieren, um die Transformation auszuführen: --direction

<code>:root {
  --int-width: tan(atan2(100vw, 1px));
}</code>

Der nächste Schritt besteht darin, --wideness in die Formel einzuführen, damit der Wert nach der Größe des Bildschirms geändert wird. Wir können jedoch nicht einfach alles mit --wideness multiplizieren. Warum? Mal sehen, was passiert, wenn wir dies tun:

<code>@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}</length></code>

Wie Sie sehen werden, ist alles umgekehrt! Wenn der Bildschirm zu breit ist, wickelt das Wort die Zeile ein, und wenn der Bildschirm zu eng ist, wickelt das Wort die Zeile ein:

Im Gegensatz zu unserem ersten Beispiel endet im ersten Beispiel die Konvertierung mit --wideness von 0 auf 1, wir möchten die Konvertierung mit --wideness von 1 auf 0 abnehmen, d. H. Wenn der Bildschirm kleiner wird, muss die Eigenschaft ihren Endwert erreichen. Es ist keine große Sache, denn wir können unsere Formel als Subtraktion umschreiben, wobei die Subtraktion mit --wideness:

erhöht wird

<code>/* 如果 `--wideness` 为 0.5 */

.element {
  opacity: var(--wideness); /* 为 0.5 */
  translate: rotate(calc(wideness(400px, 1200px) * 360deg)); /* 为 180deg */
  offset-distance: calc(var(--wideness) * 100%); /* 为 50% */
}</code>

Wenn Sie jetzt die Größe des Bildschirms ändern, wird sich alles in die richtige Richtung bewegen!

Sie werden jedoch feststellen, wie sich Wörter in einer geraden Linie bewegen und wie sich bestimmte Wörter bei der Größe überschneiden. Wir erlauben dies nicht, da Benutzer mit einer bestimmten Bildschirmgröße an diesem Punkt in der Konvertierung stecken bleiben. Die Konvertierung von Ansichtsfenster ist cool, aber nicht auf Kosten der Verderbe der Erfahrung bestimmter Bildschirmgrößen.

Die Wörter sollten sich nicht in einer geraden Linie bewegen, sondern in einer Kurve, so dass sie das zentrale Wort umgehen. Machen Sie sich keine Sorgen, Kurven hier zu machen ist einfacher als es aussieht: Lassen Sie die Spannweite einfach doppelt so schnell wie die y-Achse auf der X-Achse bewegt. Dies kann durch Multiplizieren von --wideness mit 2 erfolgen, obwohl wir es auf 1 beschränken müssen, damit es den Endwert nicht überschreitet.

<code>:root {
  /* 两个边界都是无单位的 */
  --lower-bound: 400;
  --upper-bound: 1200;

  --wideness: calc(
    (clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) - var(--lower-bound)) / (var(--upper-bound) - var(--lower-bound))
  );
}</code>

Schauen Sie sich die schöne Kurve an und vermieden einfach den zentralen Text:

Dies ist nur der Anfang!

überraschenderweise, wie mächtig es sein kann, ein Ansichtsfenster als Ganzzahl und noch verrückt zu haben, ist das letzte Beispiel eine der grundlegendsten Konvertierungen, die Sie mit diesem Typ Conversion -Trick durchführen können. Sobald Sie das erste Setup beendet haben, kann ich mir vorstellen, dass es mehr mögliche Conversions gibt, und --wideness ist sehr nützlich, genau wie jetzt mit einer neuen CSS -Funktion.

Ich hoffe, in Zukunft mehr über "Ansichtsfenster" zu sehen, da sie die Website "live" als adaptive Websites anfühlen.

Das obige ist der detaillierte Inhalt vonTypen- und Ansichtsfensterübergänge in CSS mit Tan (atan2 ()). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!