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

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

เปิด Hana

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 แล้ว

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

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

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

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

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

ลองเลย!

นี่คือไฟล์ Spline Hana ให้คุณสำรวจความสามารถของ Progressive Blur และกราเดียนต์

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

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

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

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

—

ทีม Spline

ดูข้อมูลเพิ่มเติม

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