react native typing animation

Merkmale

• Reibungslose Bewegung

• Anpassbar

• Keine Abhängigkeiten

• Schnell, leicht und ohne Bilder

• Verwendet requestAnimationFrame

• Funktioniert mit React Native Web

Installation

• Verwenden von npm: npm install react-native-typing-animation --save

• Mit Garn: yarn add react-native-typing-animation

Beispiel

 import React from „react“;import { TypingAnimation } from „react-native-typing-animation“;class Beispiel erweitert React.Component {
  render() {return <TypingAnimation />;
  }}

Erweitertes Beispiel

 import React from „react“;import { TypingAnimation } from „react-native-typing-animation“;class Beispiel erweitert React.Component {
  render() {return ( <TypingAnimationdotColor="black"dotMargin={3}dotAmplitude={3}dotSpeed={0.15}dotRadius={2.5}dotX={12}dotY={6} />);
  }}

Requisiten

• style (Objekt) – Containerstile; Standard ist {}

• dotColor (String) – Punktfarbe; Standard ist #000 (schwarz)

• dotStyles (Objekt) – Punktstile; Standard ist {}

• dotRadius (Integer) – Punktradius; Der Standardwert ist 2.5

• dotMargin (Integer) – Punktrand, der Abstand zwischen Punkten; Der Standardwert ist 3

• dotAmplitude (Integer) – Punktamplitude; Der Standardwert ist 3

• dotSpeed ​​(Integer) – Punktgeschwindigkeit, die Geschwindigkeit der gesamten Animationsansicht; Der Standardwert ist 0.15

• dotY (Ganzzahl) – Punkt y, die Start-y-Koordinate; Der Standardwert ist 6

• dotX (Ganzzahl) – Punkt x, die x-Koordinate des Mittelpunkts; Der Standardwert ist 12

• show (Boolean) – Sichtbarkeit, ob die gesamte Animationsansicht angezeigt wird oder nicht; Der Standardwert ist true

Reagieren Sie auf natives Web

Die Bibliothek funktioniert mit React Native Web. Ein funktionierendes Beispiel finden Sie hier und der Quellcode ist hier verfügbar. Wenn Sie „create-react-app“ verwenden, kann es sich lohnen, die Quelldateien der Bibliothek in Ihre App zu kopieren, anstatt sie als Abhängigkeit zu installieren, um Probleme mit dem React-Native-Alias ​​zu vermeiden. Was ich meine, finden Sie im Verzeichnis /example-rn-web .

Lizenz

• MIT

Autor

Stellen Sie mir gerne Fragen auf Twitter @icookandcode!

Credits

Die Arbeit basiert auf dem erstaunlichen Artikel „How you can use simple Trigonometry to create better loaders“ von Nash Vail

Mitwirkende

• Dennis Murage

Reichen Sie eine PR ein, um einen Beitrag zu leisten :)

Roadmap

• Wechseln Sie von requestAnimationFrame zu Animated mit useNativeDriver (PRs willkommen)

• Integrieren Sie Gifted Chat

• Unit-Tests (PRs willkommen)

Freigeben

Wir verwenden release-it , um Folgendes freizugeben:

yarn run release:dry
yarn run release

Änderungsprotokoll

• Ermöglichen Sie, dass die Animationsgeschwindigkeit konfigurierbar ist

• Konfigurierbare Sichtbarkeit der Ansicht zulassen #22