lottie react

การตอบโต้ลอตตี้

โครงการนี้มีไว้เพื่อให้นักพัฒนาควบคุมอินสแตนซ์ลอ ตตี้ ได้อย่างเต็มที่ด้วยการใช้งานน้อยที่สุดโดยการห่อ ล็อตตี้-วีบ ในส่วนประกอบหรือตะขอที่สามารถใช้งานได้ง่ายในแอปพลิเคชัน ปฏิกิริยา

การติดตั้ง

1. ตรวจสอบให้แน่ใจว่าคุณติดตั้งพึ่งพาเพียร์: react และ react-dom

   หมายเหตุ: ไลบรารีนี้ใช้การตอบสนองดังนั้นรุ่น ขั้นต่ำ ที่จำเป็นสำหรับทั้ง React และ React-DOM คือ V16.8.0

2. ติดตั้ง lottie-react โดยใช้ เส้นด้าย

   yarn add lottie-react

   หรือ NPM

   npm i lottie-react

การใช้งาน

ใช้ส่วนประกอบ (ลอง)

 import React from "react" ;
import Lottie from "lottie-react" ;
import groovyWalkAnimation from "./groovyWalk.json" ;

const App = ( ) => < Lottie animationData = { groovyWalkAnimation } loop = { true } /> ;

export default App ;

ใช้ตะขอ (ลอง)

 import React from "react" ;
import { useLottie } from "lottie-react" ;
import groovyWalkAnimation from "./groovyWalk.json" ;

const App = ( ) => {
  const options = {
    animationData : groovyWalkAnimation ,
    loop : true
  } ;

  const { View } = useLottie ( options ) ;

  return < > { View } </ > ;
} ;

export default App ;

- เอกสาร

ชำระเงิน เอกสาร ที่ https://lottiereact.com สำหรับข้อมูลเพิ่มเติมและตัวอย่าง

การทดสอบ

เรียกใช้การทดสอบโดยใช้คำสั่ง yarn test

รายงานความคุ้มครอง

 -----------------------------|---------|----------|---------|---------|-------------------
File                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------------------|---------|----------|---------|---------|-------------------
All files                    |     100 |      100 |     100 |     100 |                   
 components                  |     100 |      100 |     100 |     100 |                   
  Lottie.ts                  |     100 |      100 |     100 |     100 |                   
 hooks                       |     100 |      100 |     100 |     100 |                   
  useLottie.tsx              |     100 |      100 |     100 |     100 |                   
  useLottieInteractivity.tsx |     100 |      100 |     100 |     100 |                   
-----------------------------|---------|----------|---------|---------|-------------------

ผลงาน

มี คำถาม หรือ ข้อเสนอแนะ ? ใช้แท็บ การอภิปราย ปัญหา ใด ๆ ? อย่าลังเลที่จะบันทึกไว้ในแท็บ ปัญหา และเราจะพยายามอย่างเต็มที่เพื่อตรวจสอบและแก้ไข วิธีแก้ปัญหา ใด ๆ ? คุณยินดีเป็นอย่างยิ่งที่จะเปิด คำขอดึง

? v3 อยู่ระหว่างการพัฒนาและวางแผนที่จะนำคุณสมบัติและการปรับปรุงมากมาย แต่น่าเสียดายที่ในขณะนี้ผู้ดูแลทุกคนยุ่งมากกับโครงการที่เกี่ยวข้องกับงาน คุณสามารถตรวจสอบความคืบหน้าภายใต้สาขา v3 และแน่นอนคุณได้รับการสนับสนุนให้มีส่วนร่วม -

ขอบคุณที่ลงทุนเวลาในการสนับสนุนโครงการของเรา!

โครงการเพื่อตรวจสอบ

• Lottie -Web - การใช้งาน Lottie สำหรับเว็บ โครงการของเราขึ้นอยู่กับมันและคุณอาจต้องการตรวจสอบเพื่อให้มีความเข้าใจที่ดีขึ้นเกี่ยวกับสิ่งที่อยู่เบื้องหลังแพ็คเกจนี้หรือคุณสมบัติใดที่คุณคาดหวังว่าจะมีในอนาคต
• Lottie -Android - การใช้งาน Lottie สำหรับ Android
• LOTTIE -IOS - การใช้งาน LOTTIE สำหรับ iOS
• Lottie-react-natial-การใช้งาน Lottie สำหรับ React Native
• LotTiefiles - คุณกำลังมองหาไฟล์ภาพเคลื่อนไหวหรือไม่? Lottiefiles มีจำนวนมาก!

ใบอนุญาต

Lottie-React มีให้บริการภายใต้ใบอนุญาต MIT

ขอบคุณ David Probst Jr สำหรับภาพเคลื่อนไหวที่ใช้ในตัวอย่าง