react native typing animation

Fitur

• Gerakan halus

• Dapat disesuaikan

• Tidak ada ketergantungan

• Cepat, ringan dan tanpa gambar

• Menggunakan requestAnimationFrame

• Bekerja dengan React Native Web

Instalasi

• Menggunakan npm: npm install react-native-typing-animation --save

• Menggunakan Benang: yarn add react-native-typing-animation

Contoh

 import React from "react";import { TypingAnimation } dari "react-native-typing-animation";class Contoh extends React.Component {
  render() {kembali <TypingAnimation />;
  }}

Contoh Lanjutan

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

Alat peraga

• style (Objek) - Gaya wadah; defaultnya adalah {}

• dotColor (String) - Warna titik; standarnya adalah #000 (hitam)

• dotStyles (Objek) - Gaya titik; defaultnya adalah {}

• dotRadius (Bilangan Bulat) - Radius titik; standarnya adalah 2.5

• dotMargin (Bilangan Bulat) - Margin titik, jarak antar titik; standarnya adalah 3

• dotAmplitude (Bilangan Bulat) - Amplitudo titik; standarnya adalah 3

• dotSpeed ​​(Integer) - Kecepatan titik, kecepatan seluruh tampilan animasi; standarnya adalah 0.15

• dotY (Bilangan Bulat) - Titik y, koordinat y awal; standarnya adalah 6

• dotX (Bilangan Bulat) - Titik x, koordinat x dari titik tengah; standarnya adalah 12

• show (Boolean) - Visibilitas, apakah seluruh tampilan animasi ditampilkan atau tidak; standarnya true

Bereaksi Web Asli

Perpustakaan bekerja dengan React Native Web. Anda dapat melihat contoh kerjanya di sini dan kode sumbernya tersedia di sini. Jika Anda menggunakan create-react-app, mungkin ada baiknya menyalin file sumber perpustakaan ke aplikasi Anda daripada menginstalnya sebagai dependensi untuk menghindari masalah alias react-native. Lihat direktori /example-rn-web untuk mengetahui maksud saya.

Lisensi

• MIT

Pengarang

Jangan ragu untuk bertanya kepada saya di Twitter @icookandcode!

Kredit

Pekerjaan didasarkan pada artikel luar biasa "Bagaimana Anda dapat menggunakan Trigonometri sederhana untuk membuat pemuat yang lebih baik" oleh Nash Vail

Kontributor

• Dennis Murage

Kirimkan PR untuk berkontribusi :)

Peta jalan

• Pindah dari requestAnimationFrame ke Animated dengan useNativeDriver (selamat datang dari PR)

• Integrasikan dengan Obrolan Berbakat

• Tes unit (diterima oleh PR)

Melepaskan

Kami menggunakan release-it , untuk melepaskan lakukan hal berikut:

yarn run release:dry
yarn run release

log perubahan

• Izinkan kecepatan animasi dapat dikonfigurasi

• Izinkan visibilitas tampilan dapat dikonfigurasi #22