js realisiert eine schrittweise zunehmende digitale Animation

Hintergrund

Die am häufigsten verwendete Komponente bei Visualisierungsprojekten für große Bildschirme ist die digitale Komponente. Um eine Änderung der Daten anzuzeigen und den visuellen Effekt zu verbessern, muss der Zahl ein Scroll-Effekt hinzugefügt werden, um eine Scroll-Animation zu erzielen, die allmählich von einer Zahl zur nächsten ansteigt.

Zunächst eine Mindmap:

Erzielen Sie einen ähnlichen Effekt wie mit einem Scrollrad, wobei der Container fixiert ist und die Zahlen nach oben scrollen

Listen Sie zunächst alle möglichen Werte auf, um eine vertikale Liste zu bilden, fixieren Sie dann einen Container und ändern Sie den Offsetwert der Zahl mit konstanter Geschwindigkeit.

Im Folgenden finden Sie eine Einführung in die Implementierung dieser Lösung. Es gibt zehn Elementwerte von 0 bis 9, und jede Zahl belegt 10 % der vertikalen Liste, sodass die vertikalen Versatzwerte 0 % —> -90 % betragen

erreichen:

<ul>
  <li>
    <span>0123456789</span>
  </li>
</ul>

ul{
  Rand oben: 200px;
}
ul li{
  Rand: 0 automatisch;
  Breite: 20px;
  Höhe: 30px;
  Textausrichtung: zentriert;
  Rand: 2px durchgezogen rgba(221,221,221,1);
  Rahmenradius: 4px;
}
ul li span{
  Position: absolut;
  Farbe: #fff;
  oben: 30%;
  links: 50%;
  transformieren: übersetzen(-50%,0);
  Übergang: Transformation 500 ms, leichtes Ein- und Aussteigen;
  Schreibmodus: vertikal-rl;
  Textausrichtung: aufrecht;
  Buchstabenabstand: 17px;
}

let spanDom = document.querySelector('span')
lass start = 0
setzeIntervall(() => {
  start++
  wenn(start>9){
    Start = 0
  }
  spanDom.style.transform = `übersetzen(-50%,-${start*10}%)`
}, 1000)

Es gibt ein Problem mit dem obigen Code. Wenn wir von 9 auf 0 gehen, geht der Container-Offset direkt von -90 % auf 0 %. Aufgrund der festen Übergangsanimationszeit kommt es jedoch zu einem Scrollen in die entgegengesetzte Richtung. Um dieses Problem zu lösen, können Sie auf die Idee des nahtlosen Scrollens zurückgreifen.

• Kopieren Sie eine 0 nach der 9.
• Wenn die vertikale Liste auf 9 scrollt, scrollen Sie weiter zur kopierten 0
• Beim Scrollen zur kopierten 0 wird die Offsetposition der Liste auf 0 geändert und die Animationszeit auf 0 gesteuert.

<ul>
  <li>
    <span>01234567890</span>
  </li>
</ul>

let spanDom = document.querySelector('span')
lass start = 0
var Timer = setInterval(fn, 1000);
Funktion fn() {
  start++
  Intervall löschen(Timer)
  Timer = Intervall festlegen(fn,start >10 ? 0 : 1000);
  wenn(start>10){
    spanDom.style.transition = „keine“
    Start = 0
  }anders{
    spanDom.style.transition = `Transformation 500 ms, Ein-Aus-Phase`
  }
  spanDom.style.transform = `übersetzen(-50%,-${start/11*100}%)`
} 

Verwenden von zwei Elementen zum Scrollen

Schauen Sie sich den Effekt der Animation genau an. Tatsächlich gibt es im Ansichtsfenster nur zwei Elemente, eines ist der vorherige Wert und das andere ist der aktuelle Wert. Der Scroll-Offset-Wert muss nur auf „translateY(-100%)“ eingestellt werden.

Konkrete Ideen:

• Deklarieren Sie zwei Variablen, um den vorherigen Wert prev bzw. den geänderten Wert cur zu speichern; deklarieren Sie eine Variable play als Schalter für die Scroll-Animation dieser beiden Werte
• Verwenden Sie useEffect, um den eingehenden Wert abzuhören: Wenn es sich um eine gültige Zahl handelt, weisen Sie den Wert vor der Änderung prev zu, weisen Sie den aktuellen eingehenden Wert cur zu und setzen Sie play auf true, um die Bildlaufanimation zu starten.

Nachfolgend sehen Sie die angepasste Codestruktur:

 <div Klassenname={styles.slider}>
   {[vorherige, aktuelle].map((Element, Index) => (
      <span key={index} className={`${styles['slider-text']} ${abspielen && styles['slider-ani']} ${(prev === 0 && cur === 0 && index ===0) && styles['slider-hide']}`}>
        {Artikel}
      </span>
    ))}
  </div>

const { Wert} = Eigenschaften
const [vorherige, setzeVorherige] = useState(0)
const [aktuell, gesetzter Status] = useState(0)
const [spielen, spielen einstellen] = useState(false)

  const play = (vorher, aktuell) => {
    setPrev(vorher)
    setCur(aktuell)
    setzeWiedergeben(false)
    setzeTimeout(() => {
      setzeWiedergeben(true)
    }, 20)
  }

  useEffect(() => {
    wenn (!Zahl.istNaN(Wert)) {
      abspielen(aktuell, Wert)
    } anders {
      setPrev(Wert)
      setCur(Wert)
    }
  }, [Wert])

.Schieberegler {
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Höhe: 36px;
  oberer Rand: 24 %;
  Überlauf: versteckt;
  Textausrichtung: links;
}

.slider-text {
  Anzeige: Block;
  Höhe: 100%;
  transformieren: übersetzenY(0%);
}

.slider-ani {
  transformieren: verschiebeY(-100%);
  Übergang: Transformation in 1 Sekunde;
}
.slider-hide {
  Deckkraft: 0;
}

Eine digitale Komponente, die das Aufwärtsscrollen mehrerer Scrollräder implementiert

Verwenden Sie die requestAnimationFrame()-API von H5, um einen allmählich zunehmenden Animationseffekt zu erzielen

Implementieren Sie eine Laufanimation einer Zahl, die schrittweise ansteigt und innerhalb einer bestimmten Zeit abgeschlossen sein muss. Um flüssige Animationseffekte zu erzielen, muss der Elementstatus in einer bestimmten Häufigkeit aktualisiert werden. JS-Animation wird durch kontinuierliches Rendern/Zeichnen von Elementen in einem sehr kurzen Zeitraum erreicht, daher war der Timer schon immer die Kerntechnologie der Javascript-Animation. Der Schlüssel ist das Aktualisierungsintervall. Die Aktualisierungszeit muss so kurz wie möglich sein, damit der Animationseffekt flüssiger erscheint und nicht hängen bleibt. Gleichzeitig darf das Aktualisierungsintervall nicht zu kurz sein, um sicherzustellen, dass der Browser die Animation rendern kann.
Die meisten Computermonitore verfügen über eine Bildwiederholfrequenz von 60 Hz, was bedeutet, dass sie das Bild 60 Mal pro Sekunde neu zeichnen. Daher beträgt das optimale Schleifenintervall für eine flüssige Animation normalerweise 1000 ms/60, was ungefähr 16,6 ms entspricht

Timer-Vergleich

• Im Gegensatz zu setTimeout und setInterval erfordert requestAnimationFrame nicht, dass Programmierer das Zeitintervall selbst festlegen. Das Problem mit setTimeout und setInterval ist die geringe Präzision. Ihr interner Betriebsmechanismus bestimmt, dass der Intervallparameter tatsächlich nur die Zeit angibt, die der Animationscode zur Thread-Warteschlange der Browser-Benutzeroberfläche hinzugefügt werden soll, um auf die Ausführung zu warten. Wenn der Warteschlange andere Aufgaben hinzugefügt wurden, muss der Animationscode warten, bis die vorherigen Aufgaben abgeschlossen sind, bevor er ausgeführt wird.
• requestAnimationFrame verwendet das Systemzeitintervall, das den Browser dazu zwingt, in seiner eigenen Frequenz neu zu zeichnen, um die beste Zeicheneffizienz aufrechtzuerhalten. Es wird weder durch ein kurzes Intervall zu Überzeichnung und erhöhtem Overhead führen, noch wird es durch ein langes Intervall dazu führen, dass die Animation hängen bleibt und nicht flüssig ist. Es ermöglicht verschiedenen Animationseffekten auf Webseiten einen einheitlichen Aktualisierungsmechanismus, wodurch Systemressourcen gespart, die Systemleistung verbessert und die visuellen Effekte verbessert werden.
• requestAnimationFrame fasst alle DOM-Operationen in jedem Frame zusammen und schließt sie in einem Neuzeichnen oder Neufließen ab, und das Zeitintervall für das Neuzeichnen oder Neufließen folgt genau der Bildwiederholrate des Browsers.
• Bei versteckten oder unsichtbaren Elementen wird kein Neuzeichnen oder Umfließen durchgeführt, was eine geringere CPU-, GPU- und Speicherauslastung bedeutet.
• requestAnimationFrame ist eine vom Browser speziell für Animationen bereitgestellte API. Der Browser optimiert den Methodenaufruf zur Laufzeit automatisch, und wenn die Seite nicht aktiv ist, wird die Animation automatisch angehalten, wodurch effektiv CPU-Overhead gespart wird.

RequestAnimationFrame implementiert Scroll-Animation

Die Animation startet. Die Startzeit der Animation wird aufgezeichnet: startTimeRef.current

const startTimeRef = useRef(Date.now());
const [t, setT] = useState(Datum.jetzt());

Notieren Sie für jedes nachfolgende Bild der Animation, wie viel Zeit seit dem Start der Animation vergangen ist, und berechnen Sie die Zahl, die im aktuellen Bild erreicht werden sollte, d. h. currentValue

useEffect(() => {
    const rafFunc = () => {
      const jetzt = Date.jetzt();
      const t = jetzt - startTimeRef.current;
      wenn (t >= Zeitraum) {
        setZ(Zeitraum);
      } anders {
        setzeT(t);
        requestAnimationFrame(rafFunc);
      }
    };
    lass raf;
    wenn (autoScroll) {
      raf = requestAnimationFrame(rafFunc);
      startTimeRef.current = Date.now();
    } anders {
      raf und cancelAnimationFrame(raf);
    }
    return () => raf und cancelAnimationFrame(raf);
}, [Punkt, AutoScroll]);

const currentValue = useMemo(() => ((bis - von) / Zeitraum) * t + von, [t, Zeitraum, von, bis]);

Vergleichen Sie die Zahlen jeder Ziffer an der aktuellen Position. Wenn es eine Änderung gibt, ändern Sie den Offset. Der Offset ist die Differenz zwischen der Zahl der aktuellen Ziffer und der nächsten Ziffer. Diese Änderung wird in jedem Frame aneinandergereiht, um eine Laufanimation zu bilden.

Erfolge

Dies ist das Ende des Artikels über die Verwendung von js zur Implementierung einer schrittweise zunehmenden digitalen Animation. Weitere relevante Inhalte zu schrittweise zunehmenden digitalen Animationen mit js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!