react native typing animation

คุณสมบัติ

• การเคลื่อนไหวที่ราบรื่น

• ปรับแต่งได้

• ไม่มีการพึ่งพา

• รวดเร็ว น้ำหนักเบา และไม่มีภาพ

• ใช้ requestAnimationFrame

• ทำงานร่วมกับ React Native Web

การติดตั้ง

• ใช้ npm: npm install react-native-typing-animation --save

• การใช้ Yarn: yarn add react-native-typing-animation

ตัวอย่าง

 นำเข้า React จาก "react"; นำเข้า { TypingAnimation } จาก "react-native-typing-animation"; ตัวอย่างคลาสขยาย React.Component {
  render() {กลับมา <พิมพ์แอนิเมชั่น />;
  -

ตัวอย่างขั้นสูง

 นำเข้า React จาก "react"; นำเข้า { TypingAnimation } จาก "react-native-typing-animation"; ตัวอย่างคลาสขยาย React.Component {
  render() {return ( <TypingAnimationdotColor="black"dotMargin={3}dotAmplitude={3}dotSpeed={0.15}dotRadius={2.5}dotX={12}dotY={6} />);
  -

อุปกรณ์ประกอบฉาก

• style (วัตถุ) - รูปแบบคอนเทนเนอร์; ค่าเริ่มต้นคือ {}

• dotColor (สตริง) - สีจุด; ค่าเริ่มต้นคือ #000 (สีดำ)

• dotStyles (วัตถุ) - สไตล์จุด; ค่าเริ่มต้นคือ {}

• dotRadius (จำนวนเต็ม) - รัศมีจุด; ค่าเริ่มต้นคือ 2.5

• dotMargin (จำนวนเต็ม) - Dot Margin ช่องว่างระหว่างจุด ค่าเริ่มต้นคือ 3

• dotAmplitude (จำนวนเต็ม) - ความกว้างของจุด; ค่าเริ่มต้นคือ 3

• dotSpeed ​​(จำนวนเต็ม) - ความเร็วดอท ความเร็วของมุมมองแอนิเมชั่นทั้งหมด ค่าเริ่มต้นคือ 0.15

• dotY (จำนวนเต็ม) - Dot y พิกัด y เริ่มต้น; ค่าเริ่มต้นคือ 6

• dotX (จำนวนเต็ม) - จุด x พิกัด x ของจุดกึ่งกลาง ค่าเริ่มต้นคือ 12

• show (Boolean) - การมองเห็น ไม่ว่าจะแสดงมุมมองภาพเคลื่อนไหวทั้งหมดหรือไม่ก็ตาม ค่าเริ่มต้นเป็น true

ตอบสนองเนทิฟเว็บ

ไลบรารีใช้งานได้กับ React Native Web คุณสามารถดูตัวอย่างการทำงานได้ ที่นี่ และมีซอร์สโค้ดอยู่ที่นี่ หากคุณใช้ create-react-app การคัดลอกไฟล์ต้นฉบับของไลบรารีลงในแอปของคุณอาจคุ้มค่า แทนที่จะติดตั้งเป็นการพึ่งพาเพื่อหลีกเลี่ยงปัญหานามแฝงแบบโต้ตอบ ดูไดเร็กทอรี /example-rn-web สำหรับสิ่งที่ฉันหมายถึง

ใบอนุญาต

• เอ็มไอที

ผู้เขียน

อย่าลังเลที่จะถามคำถามฉันบน Twitter @icookandcode!

เครดิต

งานนี้มีพื้นฐานมาจากบทความที่น่าทึ่ง "คุณสามารถใช้ตรีโกณมิติอย่างง่ายเพื่อสร้างตัวโหลดที่ดีขึ้นได้อย่างไร" โดย Nash Vail

ผู้ร่วมให้ข้อมูล

• เดนนิส มูเรจ

ส่ง PR เพื่อสนับสนุน :)

แผนการทำงาน

• ย้ายจาก requestAnimationFrame เป็น Animated ด้วย useNativeDriver (ยินดีต้อนรับ PR)

• ผสานรวมกับ Gifted Chat

• การทดสอบหน่วย (ยินดีต้อนรับ PR)

ปล่อย

เราใช้ release-it เพื่อ release ทำสิ่งต่อไปนี้:

yarn run release:dry
yarn run release

บันทึกการเปลี่ยนแปลง

• อนุญาตให้กำหนดค่าความเร็วของภาพเคลื่อนไหวได้

• อนุญาตให้มองเห็นการมองเห็นเพื่อกำหนดค่า #22