Skip to main content
Languageไทย
วิศวกรรมอ่าน 5 นาทีตุลาคม 2026

แอนิเมชั่นสปริงทำงานอย่างไรใน SwiftUI

คำตอบสั้น ๆ

ใน SwiftUI คุณเพิ่มสปริงด้วย .animation(.spring) หรือ withAnimation(.spring) ตั้งแต่ iOS 17 การตั้งค่าหลักคือระยะเวลาและการเด้ง และมีการตั้งค่าล่วงหน้า: .smooth (ไม่มีการเด้ง), .snappy (เล็กน้อย) และ .bouncy (เพิ่มเติม) โค้ดเก่าใช้การตอบสนองและการทำให้หมาด ๆ สปริง SwiftUI จะรักษาความเร็วไว้เมื่อมีแอนิเมชั่นใหม่รบกวน ซึ่งทำให้ท่าทางรู้สึกเป็นธรรมชาติ

หลัก Takeaway

  • ใช้ withAnimation(.spring) สำหรับการเปลี่ยนแปลงสถานะหรือ .animation(.spring, value:) ในมุมมอง
  • iOS 17+: .spring(ระยะเวลา:เด้ง:) บวกกับค่าที่ตั้งไว้ล่วงหน้า .smooth, .snappy และ .bouncy
  • API ที่เก่ากว่า: .spring(response:dampingFraction:blendDuration:)
  • Springs เป็นรูปแบบแอนิเมชั่นเริ่มต้นของ SwiftUI ตั้งแต่ iOS 17
  • สปริงที่ถูกขัดจังหวะจะรักษาความเร็วไว้ ดังนั้นท่าทางต่างๆ จึงจะส่งมอบได้อย่างราบรื่น

SwiftUI เคลื่อนไหวการเปลี่ยนแปลงในสถานะ เมื่อค่า เช่น isExpanded เปลี่ยนแปลงภายใน withAnimation(.spring) ทุกมุมมองที่ขึ้นอยู่กับค่านั้นจะย้ายไปยังเค้าโครงใหม่โดยใช้สปริง

ใน iOS 17 และใหม่กว่า วิธีที่ง่ายที่สุดในการอธิบายสปริงคือมีค่าสองค่า ได้แก่ ระยะเวลา ระยะเวลาที่ใช้ในการชำระตัวโดยประมาณ และการเด้งกลับ ค่าที่สปริงเกิน การกระดอนที่ 0 ให้การเคลื่อนไหวที่ราบรื่นโดยไม่มีการเคลื่อนตัวเกิน ค่าที่สูงกว่าจะเพิ่มการตีกลับ Apple ยังมีการตั้งค่าล่วงหน้า: .smooth, .snappy และ .bouncy

รหัสเก่าใช้ .spring(response:dampingFraction:) การตอบสนองจะใกล้เคียงกับระยะเวลา และเศษส่วนการหน่วงเป็น 1 หมายถึงไม่มีการเด้งกลับ ในขณะที่ค่าที่ต่ำกว่าจะเพิ่มการเด้งกลับ ทั้งสองรูปแบบอธิบายสปริงทางกายภาพเดียวกัน

ข้อได้เปรียบที่สำคัญของสปริงคือการหยุดชะงัก หากผู้ใช้แตะอีกครั้งหรือท่าทางลากสิ้นสุดระหว่างการเคลื่อนไหว สปริงใหม่จะเริ่มต้นจากตำแหน่งและความเร็วปัจจุบัน ดังนั้นจึงไม่มีการกระโดด สำหรับท่าทางการลาก ให้ส่งความเร็วของท่าทางเมื่อผู้ใช้ปล่อย เพื่อให้องค์ประกอบดำเนินต่อไปในทิศทางที่มันถูกโยน

หากส่วนประกอบเดียวกันจำเป็นต้องทำงานบนเว็บหรือ Android ด้วย การรักษาค่าสปริงเนื่องจากโทเค็นการเคลื่อนไหวที่ใช้ร่วมกันจะช่วยได้ ExodeUI ซึ่งเราสร้างนั้นมีรันไทม์ SwiftUI ดังนั้นส่วนประกอบหนึ่งที่ได้รับการออกแบบพร้อมสปริงจึงสามารถเล่นใน SwiftUI และบนแพลตฟอร์มอื่นๆ ได้

คำถามที่พบบ่อย

แอนิเมชั่นเริ่มต้นใน SwiftUI คืออะไร?

ตั้งแต่ iOS 17 ภาพเคลื่อนไหวเริ่มต้นจะเป็นการสปริงตัวที่ราบรื่น

อะไรคือความแตกต่างระหว่าง .snappy และ .bouncy

.snappy ปรับตัวได้อย่างรวดเร็วด้วยการเกินขอบเขตเล็กน้อย .เด้งเกินขอบเขตมากขึ้น .smooth ไม่มีการโอเวอร์ชูต

ฉันจะแปลงการตอบสนองและการหน่วงเศษส่วนเป็นระยะเวลาและการเด้งได้อย่างไร

การตอบสนองจะแมปกับระยะเวลาโดยประมาณ เศษส่วนการทำให้หมาด ๆ ของ 1 คือเด้ง 0; เศษส่วนการหน่วงที่ต่ำกว่าหมายถึงการเด้งที่มากขึ้น

ฉันจะเพิ่มความเร็วจากท่าทางลากได้อย่างไร

อ่านความเร็วเมื่อการลากสิ้นสุดลง และใช้สปริงแบบประมาณค่าหรือ API สปริงรุ่นใหม่ที่ยอมรับความเร็วเริ่มต้น

คำแนะนำและตัวอย่างที่เกี่ยวข้อง

ปรับสปริงก่อนที่จะเขียนโค้ด

ลากแถบเลื่อน ดูการเคลื่อนไหว และคัดลอกค่าสปริงสำหรับ SwiftUI, CSS และแพลตฟอร์มอื่นๆ

เปิดตัวสร้างสปริง
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →