# Progressive Blur และกราเดียนต์ใน Hana - Spline blog (https://spline.design/th/blog/introducing-progressive-blur-gradients)

> ยกระดับงานออกแบบของคุณด้วยเบลอและกราเดียนต์ที่สวยสะดุดตา

[บล็อก](https://spline.design/th/blog)

27 พฤษภาคม 2568

# Progressive Blur และกราเดียนต์ใน Hana

ยกระดับงานออกแบบของคุณด้วยเบลอและกราเดียนต์ที่สวยสะดุดตา

[เปิด Hana](https://app.spline.design)

Progressive Blur ได้รับความนิยมไปพร้อมกับสุนทรียะ UI แบบกระจกของ iOS เมื่อไม่กี่ปีก่อน และเพิ่งได้รับความสนใจในเครื่องมือออกแบบ UI เมื่อไม่นานมานี้ แต่ส่วนใหญ่ก็ยังเป็นเทคนิคที่ซับซ้อนและใช้งานยากในงานโมชันดีไซน์หรือสภาพแวดล้อมอินเทอร์แอคทีฟแบบเรียลไทม์

วันนี้เรานำ Progressive Blur แบบเรียลไทม์มาสู่ Hana เป็นครั้งแรกที่เบลอประเภทนี้ใช้งานแบบเรียลไทม์ได้ พร้อมตัวควบคุมที่ใช้งานง่ายโดยไม่ต้องมีความรู้ทางเทคนิค ทั้งหมดบนแคนวาสออกแบบไร้ขอบเขตของ Hana

ลองเล่นกับฉากด้านล่างเพื่อดูว่ามันทำงานอย่างไร

วางเมาส์หรือแตะเพื่อโต้ตอบ (ประสบการณ์ที่สร้างด้วย Hana)

## วิธีเพิ่ม Progressive Blur ใน Hana

เลือกเลเยอร์ใดก็ได้แล้วเพิ่ม Layer Blur หรือ Background Blur ทั้งสองแบบคุณเลือกได้ว่าจะให้เบลอเป็นแบบ Uniform หรือ Progressive

Progressive Blur ทำงานคล้ายกับกราเดียนต์ แต่แทนที่จะเป็นสี มันจะเปลี่ยนผ่านระหว่างค่ารัศมีเบลอสองค่า

นี่คือวิธีที่ Progressive Blur ทำงานใน Hana

## กราเดียนต์แบบนุ่มนวลใน Hana

ตอนนี้คุณสร้างกราเดียนต์ใน Hana ได้แล้ว เลือกได้ระหว่างกราเดียนต์แบบเส้นตรง แบบรัศมี หรือแบบโพลาร์ และปรับตำแหน่งได้จากแคนวาสโดยตรง

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

เราใช้ Smooth Gradients ครั้งแรกในเอดิเตอร์ 3D ของ Spline เมื่อไม่กี่ปีก่อน และตอนนี้เรานำมาสู่ Hana แล้ว

## การนำเข้า SVG และอื่น ๆ

ในช่วงไม่กี่สัปดาห์ที่ผ่านมา เรายังปล่อยการปรับปรุงหลายอย่างให้ Hana รวมถึงการรองรับไฟล์ SVG (ตอนนี้แค่ลากวางได้เลย) ประสิทธิภาพที่ดีขึ้น และขนาดรันไทม์ที่เล็กลง

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

ประสบการณ์ที่สร้างด้วย Hana

## ลองเลย!

นี่คือ[ไฟล์ Spline Hana](https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3) ให้คุณสำรวจความสามารถของ Progressive Blur และกราเดียนต์

## เวิร์กโฟลว์การออกแบบกำลังเปลี่ยนไป

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

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

เราแทบรอไม่ไหวที่จะได้เห็นสิ่งที่คุณสร้าง!

—

ทีม Spline

[ดูข้อมูลเพิ่มเติม](https://docs.spline.design/doc/what-is-hana/doccoU2VnAOm)

## บทความอื่น ๆ จากบล็อก

[3 พฤศจิกายน 2569ขอแนะนำ Spline Arena](https://spline.design/th/blog/introducing-spline-arena)[21 ตุลาคม 2569ขอแนะนำ Spline สำหรับ ChatGPT](https://spline.design/th/blog/introducing-spline-for-chatgpt)[27 สิงหาคม 2569ขอแนะนำ Hana V2](https://spline.design/th/blog/hana-v2)

[Spline](https://spline.design/th)

เอดิเตอร์ 3D และ 2D สำหรับทีมและเอเจนต์ของทีม เผยแพร่ได้ทั้งบนเว็บ iOS และ Android

#### ถาม AI เกี่ยวกับ Spline

#### ผลิตภัณฑ์

- [ออกแบบ 3D](https://spline.design/th/3d-design)
- [Hana](https://spline.design/th/hana)
- [Omma](https://omma.build)
- [สร้าง 3D ด้วย AI](https://spline.design/th/ai-generate)
- [Spline MCP](https://spline.design/th/mcp)
- [Spline Arena](https://spline.design/th/arena)
- [ราคา](https://spline.design/th/pricing)
- [องค์กร](https://spline.design/th/enterprise)

#### รันไทม์

- [Web](https://spline.design/th/web)
- [iOS](https://spline.design/th/ios)
- [Android](https://spline.design/th/android)

#### แอป

- [ดาวน์โหลด](https://spline.design/th/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [ดาวน์โหลด Spline Mirror](https://spline.design/download-mirror)

#### เรียนรู้

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/th/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [โซลูชัน](https://spline.design/solutions)

#### คอมมูนิตี้

- [คอมมูนิตี้ Spline](https://community.spline.design)
- [Blog](https://spline.design/th/blog)
- [มีอะไรใหม่](https://spline.design/th/changelog)
- [การศึกษา](https://spline.design/th/education)
- [Contra](https://spline.design/contra)
- [พันธมิตร](https://spline.design/th/affiliate)

#### บริษัท

- [ลูกค้า](https://spline.design/th/customers)
- [ร่วมงานกับเรา](https://www.ycombinator.com/companies/spline/jobs)
- [ความปลอดภัย](https://spline.design/th/security)

#### กฎหมาย

- [ข้อกำหนดและเงื่อนไข](https://spline.design/terms)
- [ความเป็นส่วนตัว](https://spline.design/privacy)

#### ติดต่อ

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.