Store spring() และ tweened()
ทำให้ค่าตัวเลขเคลื่อนไหวด้วย store แบบ spring ตามหลักฟิสิกส์ หรือ store แบบ tweened ตามระยะเวลา
Store spring() และ tweened() เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
สโตร์สำหรับการเคลื่อนไหว
Svelte มีสโตร์ที่รองรับการเคลื่อนไหว ได้แก่ tweened (อิงตามระยะเวลา) และ spring (อิงตามหลักฟิสิกส์)
การนำเข้า
จาก svelte/motion
import { tweened, spring } from "svelte/motion";การสร้าง Tweened
ส่งค่าเริ่มต้นและตัวเลือกอย่าง duration กับ easing
const progress = tweened(0, { duration: 500 });กำหนดค่าหรืออัปเดต
เรียกใช้ set() หรือ update() แล้วสโตร์จะแอนิเมตระหว่างค่าให้โดยอัตโนมัติ
progress.set(1);การสร้าง Spring
สโตร์แบบสปริงมีตัวเลือก stiffness และ damping สำหรับพฤติกรรมตามหลักฟิสิกส์
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });สมัครรับข้อมูลด้วย $
ใช้สโตร์เหล่านี้เหมือนสโตร์ทั่วไปในคอมโพเนนต์
<p>{$progress}</p>ตัวเลขและออบเจ็กต์
สโตร์ทั้งสองแบบจะค่อย ๆ เปลี่ยนค่าระหว่างตัวเลขและโครงสร้างที่มีคุณสมบัติตัวเลขซ้อนกัน
การเปลี่ยนค่าแบบกำหนดเอง
ส่งฟังก์ชัน interpolate แบบกำหนดเองสำหรับค่าที่ไม่ใช่ตัวเลข เช่น สี
สปริงแบบทันที
เรียกใช้ spring.set(value, { hard: true }) เพื่อเปลี่ยนค่าในทันทีโดยไม่ใช้แอนิเมชัน
กรณีการใช้งาน
การติดตามเมาส์ การลาก อินเทอร์เฟซที่ขับเคลื่อนด้วยการเลื่อน มาตรวัด และแถบความคืบหน้า
ใช้ร่วมกับการแปลง
นำค่าที่มีแอนิเมชันไปใช้กับ style="transform: ..." เพื่อให้การเคลื่อนไหวราบรื่น
ตรวจสอบความเข้าใจ
สโตร์ใดให้การเคลื่อนไหวคล้ายการเคลื่อนที่ตามหลักฟิสิกส์
สรุปทบทวน
tweened และ spring จาก svelte/motion ทำให้ค่าตัวเลขเคลื่อนไหวอย่างราบรื่น
คำถามที่พบบ่อย
บทเรียน “Store spring() และ tweened()” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Store spring() และ tweened()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Store spring() และ tweened()”
ทำให้ค่าตัวเลขเคลื่อนไหวด้วย store แบบ spring ตามหลักฟิสิกส์ หรือ store แบบ tweened ตามระยะเวลา คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “Store spring() และ tweened()” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- animate:flip สำหรับการจัดลำดับรายการใหม่
- Store spring() และ tweened()
- ฟังก์ชัน Easing กำหนดเอง
- การรวมการเปลี่ยนภาพและภาพเคลื่อนไหว