หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

Dotlottie Web

ปรับปรุงภาพเคลื่อนไหวบนเว็บของคุณด้วยผู้เล่นอย่างเป็นทางการของ LotTiefiles สำหรับ Dotlottie และ Lottie Animations ออกแบบมาเพื่อการรวมอย่างรวดเร็วแพ็คเกจเหล่านี้ช่วยให้นักพัฒนานำเสนอภาพเคลื่อนไหวอย่างรวดเร็วในโครงการเว็บด้วยความพยายามน้อยที่สุด

ตัวอย่างเว็บ Dotlottie 1ตัวอย่างเว็บ Dotlottie 2ตัวอย่างเว็บ Dotlottie 3ตัวอย่างเว็บ Dotlottie 4

Dotlottie คืออะไร?

Dotlottie เป็นรูปแบบไฟล์โอเพนซอร์ซที่รวมไฟล์ลอตตี้หนึ่งไฟล์ขึ้นไปและทรัพยากรที่เกี่ยวข้องลงในไฟล์เดียว พวกเขาเป็นคลังเก็บซิปที่ถูกบีบอัดด้วยวิธีการบีบอัดแบบ deflate และดำเนินการขยายไฟล์ของ ".lottie"

เรียนรู้เพิ่มเติมเกี่ยวกับ Dotlottie

สารบัญ

  • แพ็คเกจ
  • เริ่มต้น
    • ข้อกำหนดเบื้องต้น
    • การตั้งค่า
  • ตัวอย่างสด
  • ตัวอย่างท้องถิ่น
  • การพัฒนา
    • การสร้างแพ็คเกจ
    • ทำงานในพื้นที่
    • สคริปต์
  • การบริจาค
  • ใบอนุญาต

แพ็คเกจ

monorepo มีแพ็คเกจต่อไปนี้:

บรรจุุภัณฑ์ คำอธิบาย
@lottiefiles/dotlottie-web ห้องสมุด JavaScript สำหรับการแสดงภาพแอนิเมชั่น Lottie และ Dotlottie ในเบราว์เซอร์หรือ Node.js.
@lottiefiles/dotlottie-react wrapper องค์ประกอบปฏิกิริยาสำหรับ dotlottie-web ที่ให้ API ประกาศสำหรับการแสดงภาพแอนิเมชั่น Lottie และ Dotlottie และการควบคุม UI สำหรับการโต้ตอบกับพวกเขา
@lottiefiles/dotlottie-wc Web Component Wrapper สำหรับ dotlottie-web ที่ให้ API ที่ประกาศสำหรับการแสดงภาพแอนิเมชั่น Lottie และ Dotlottie และการควบคุม UI สำหรับการโต้ตอบกับพวกเขา
@lottiefiles/dotlottie-vue wrapper องค์ประกอบ Vue สำหรับ dotlottie-web ที่ให้ API ที่ประกาศสำหรับการแสดงภาพแอนิเมชั่น Lottie และ Dotlottie และการควบคุม UI สำหรับการโต้ตอบกับพวกเขา
@lottiefiles/dotlottie-svelte wrapper องค์ประกอบ svelte สำหรับ dotlottie-web ที่ให้ API ที่ประกาศสำหรับการแสดงภาพแอนิเมชั่น Lottie และ Dotlottie และการควบคุม UI สำหรับการโต้ตอบกับพวกเขา

หมายเหตุ: แต่ละแพ็คเกจมี readme.md ของตัวเองพร้อมเอกสารรายละเอียดเกี่ยวกับการใช้งานและ API

เริ่มต้น

หากต้องการมีส่วนร่วมใน monorepo นี้หรือใช้แพ็คเกจในโครงการของคุณให้ทำตามขั้นตอนการตั้งค่าเหล่านี้:

ข้อกำหนดเบื้องต้น

ตรวจสอบให้แน่ใจว่าคุณติดตั้งดังต่อไปนี้:

  • node.js เวอร์ชัน 18 ขึ้นไป
  • pnpm เวอร์ชัน 8

การตั้งค่า

โคลน monorepo: 

git clone https://github.com/LottieFiles/dotlottie-web.git
cd dotlottie-web

ติดตั้งการพึ่งพา: 

pnpm install

ตัวอย่างสด

  • @lottiefiles/dotlottie-web

    • เริ่มต้น
    • การควบคุมการเล่นแอนิเมชั่น
    • การโหลดภาพเคลื่อนไหวแบบไดนามิก
    • ภาพเคลื่อนไหวหลายไฟล์. ลอตตี้
    • รูปแบบแอนิเมชั่นขั้นสูง
    • เครื่องหมายชื่อ
    • Dotlottie

  • @lottiefiles/dotlottie-react

    • เริ่มต้น
    • การควบคุมการเล่นแบบกำหนดเอง

  • @lottiefiles/dotlottie-vue

    • เริ่มต้น

ตัวอย่างท้องถิ่น

ค้นพบวิธีการใช้งานและใช้แพ็คเกจ Dotlottie-Web ด้วยแอปพลิเคชันตัวอย่างของเรา ตัวอย่างเหล่านี้ทำหน้าที่เป็นแนวทางปฏิบัติเพื่อช่วยให้คุณเข้าใจวิธีการรวมแอนิเมชั่น Lottie และ Dotlottie เข้ากับโครงการเว็บของคุณ

ตัวอย่างที่มีอยู่:

  • Dotlottie-Web-Example: แอพตัวอย่างประเภทพื้นฐานของวิธีใช้ @lottiefiles/dotlottie-web เพื่อแสดงแอนิเมชั่น Lottie หรือ Dotlottie ในเบราว์เซอร์
  • Dotlottie-Web-Node-Example: ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้ @lottiefiles/dotlottie-web ในสภาพแวดล้อม node.js มันนำเสนอการควบคุมการเล่นแอนิเมชั่นการแสดงผลตามเฟรมและแปลงภาพเคลื่อนไหว Dotlottie เป็นไฟล์ GIF สำหรับข้อมูลเพิ่มเติมดู readme

ตัวอย่างที่กำลังทำงานอยู่

  • โคลนที่เก็บ: 
git clone https://github.com/LottieFiles/dotlottie-web.git
cd dotlottie-web
  • ติดตั้งการพึ่งพา: 
pnpm install
  • สร้างแพ็คเกจ: 
pnpm run build
  • เรียกใช้แอพ: 
 # Change directory to the example app folder
cd apps/dotlottie-web-example 
pnpm run dev

อย่าลังเลที่จะแก้ไขและเล่นกับรหัสเพื่อดูว่าการเปลี่ยนแปลงมีผลต่อภาพเคลื่อนไหวอย่างไร

การพัฒนา

การสร้างแพ็คเกจ

เพื่อสร้างแพ็คเกจทั้งหมดภายใน monorepo: 

pnpm run build

ทำงานในพื้นที่

ในการเริ่มต้นสภาพแวดล้อมการพัฒนาท้องถิ่นสำหรับทุกแพ็คเกจ: 

pnpm run dev

สคริปต์

นี่คือคำอธิบายสั้น ๆ ของสคริปต์ที่มีอยู่ใน package root.json:

  • build : สร้างแพ็คเกจทั้งหมดโดยใช้เทอร์โบ
  • changelog : เพิ่มการเปลี่ยนแปลงเพื่อสร้างการเปลี่ยนแปลงและการอัปเดตเวอร์ชัน
  • clean : ทำความสะอาดพื้นที่เก็บข้อมูลโดยการลบสิ่งประดิษฐ์การพัฒนา
  • dev : เรียกใช้แพ็คเกจทั้งหมดในโหมดการพัฒนา/นาฬิกา
  • format : รูปแบบ codebase โดยใช้ Prettier และหมายเหตุ
  • lint : ผ้าสำลี codebase โดยใช้ ESLINT
  • test : รันการทดสอบในทุกแพ็คเกจ
  • type-check : ตรวจสอบข้อผิดพลาดประเภท typescript

สำหรับรายการสคริปต์ที่มีอยู่ทั้งหมดดูที่ส่วน scripts ใน package.json

การบริจาค

เรายินดีต้อนรับการมีส่วนร่วมกับแพ็คเกจใด ๆ ในโมโนโพรนี้ โปรดอ่านแนวทางที่มีส่วนร่วมของเราและจรรยาบรรณของเราเพื่อเรียนรู้เกี่ยวกับกระบวนการพัฒนาของเราวิธีการเสนอการแก้ไขข้อผิดพลาดและการปรับปรุงและวิธีการสร้างและทดสอบการเปลี่ยนแปลงของคุณในโครงการ

ใบอนุญาต

MIT © LotTiefiles

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด