Blur and Vibrancy Effect with UIVisualEffect

บน iOS 7 นั้น Apple ได้เสนอแนวคิดการออกแบบที่เรียกว่า Depth (ความลึก) ซึ่งสิ่งที่ได้ชัดคือ การทำให้ View ที่อยู่ด้านหลังเบลอมาเป็น Background เราจะเห็นแทบทุกๆ ที่บน iOS 7 เลย ตัวอย่างที่ชัดมากๆ ก็คือ Notification Center และ Control Center นี่แหละ และก็ต้องพูดคำนี้อีกละ "ทำไมไม่ทำให้มันง่ายๆ ตั้งแต่ iOS 7 ฟระ"


บน iOS 7 นั้นเป็น Private API และไม่เปิดให้นักพัฒนาใช้กันอย่างแพร่หลายเนื่องจากกังวลเรื่องการใช้เยอะเกินไป ทำให้เกิดปัญหาด้านประสิทธิภาพ เนื่องจากการทำ Blur นั้น เราต้องทำแบบ Real Time กับภาพ Background ปัจจุบัน ซึ่งก็มีหลายคนเขียน Blur Algorithm ขึ้นมาใช้งานเอง และก็มี Library ที่ Apple แจกให้กับนักพัฒนาด้วย แต่บน iOS 8 นั้น Apple ได้ทำการใส่ Official API สำหรับการทำ Blur Effect มาให้ด้วย (แน่นอนว่าใช้ร่วมกับ iOS 7 ไม่ได้)

ว่ากันเรื่องเบลอ...
วิธีการทาง Image Processing ในการทำภาพให้เบลอ มีหลากหลายวิธี ถ้าใครเคยเรียนมา และวิธีที่เป็นที่นิยม และใช้กันอย่างแพร่หลายนั่นคือ Gaussian วิธีการก็คือ "ในแต่ละ Pixel ของภาพ เราจะนำ Pixel รอบข้างมาหาค่าเฉลี่ยแล้วเปลี่ยนค่าของ Pixel นั้นๆ เป็นค่าเฉลี่ยที่คำนวณได้"

เช่นถ้าเราใช้ค่าสี มีค่า 1 - 10 แล้ว Pixel ที่เรานำมาพิจารณามีค่า 6 ดังรูป


 เมื่อนำ Pixel รอบข้างมาหาค่าเฉลี่ย เราก็จะเปลี่ยน 6 เป็น 4.9 และทำแบบนี้กับทุก Pixel ของภาพ


ส่วนจะเบลอมากขึ้น หรือน้อยลงก็ให้ขยาย Pixel รอบข้าง จาก 3x3 เป็น 4x4, 5x5 หรือมากกว่านั้น 
และอย่าลืม ถ้าจะทำ Image Processing แบบนี้ อย่าลืมแตก Background Thread ออกไปทำนะ 


บน iOS 7 นั้น Apple ได้ทำ Library ขึ้นมาให้เราๆ ใช้งานกันนั่นคือ UIImage+ImageEffects
ส่วนวิธีการใช้งานก็คือการสร้าง Screenshot ของหน้าจอปัจจุบันขึ้นมาเป็น UIImage แล้วทำการเบลอมันเท่านั้นเอง


โดยวิธีนี้จะไม่ Dynamic Blur นั่นคือ เมื่อมีการเปลี่ยน Background ไม่ว่าจะด้วยการเปลี่ยนหน้าจอ หรือ Scroll ถ้าอยาก Update BlurView จะต้องทำเองทั้งหมด และอย่าลืมตั้งค่า Frame และ ContentMode ให้ถูกต้องด้วย ไม่งั้นจะ Blur ผิดที่ผิดทาง

คราวนี้ใน iOS 8 อย่างที่บอกไป Official API ตัวนั้นมีชื่อว่า UIVisualEffect API
ซึ่งวิธีการเขียนก็ไม่ยากเลย โดยขั้นแรกสุดเราจะต้องไปปรับ Background Color ของ View ที่จะทำการเบลอให้เป็น Clear Color ซะก่อน


ขั้นตอนก็คือ ให้เราสร้าง UIBlurEffect ขึ้นมา ซึ่งจะมีให้เลือกคือ Light, Extra Light และ Dark Blurring Effect จากนั้นก็สร้าง UIVisualEffectView จาก Blur Effect เมื่อกี้ แล้วโยนไปชั้นล่างสุดของ Subviews ของ View ที่เราต้องการทำให้เบลอ (0 คือ Background นั่นเอง)

แล้วก็ถ้าเราใส่ Autolayout Constrains เองผ่านโค้ดแล้วล่ะก็ อย่าลืมใส่โค้ดนี้ไปด้วย


พอลอง Run ดูเราก็จะได้ Blurring Background พร้อมกับคุณสมบัติ Dynamic Blurring มาด้วย ง่ายดีไหม ? คราวนี้ Apple ก็ยังให้ความสามารถให้มันงามได้อีกนั่นคือ Vibrancy Effect

สิ่งที่ Vibrancy Effect ต่างจาก Blur Effect ก็คือมันจะ Blur ไปหมดรวมทั้ง UI ที่อยู่บน View ด้วย ในขณะที่ Blur Effect จะทำเฉพาะ Background ของ View นั้นๆ แบบนี้


โดยการสร้าง Vibrancy Effect นั้นจะใช้ UIVibrancyEffect ต้องทำโดยการสร้างจาก Blur Effect ที่มีอยู่แล้วเท่านั้น จากโค้ดด้านบน เราก็ใส่โค้ดเพิ่มไปต่อท้ายแบบนี้ เพื่อทำ Vibrancy Effect


โดยวิธีการก็จะคล้ายกับการทำ Blur Effect นั่นแหละ (optionsView คือ View ที่ผมจะทำการเบลอ) ต่างกันตรงนี้ ตอนแรกเราโยน View ที่เราเบลอไปไว้ด้านล่างสุดเพื่อให้มันทำหน้าที่เป็น Background เฉยๆ แต่คราวนี้สร้าง Vibrancy View ขึ้นมาจาก Blur Effect แล้วทำการใส่ View ที่เป็น Control ต่างๆ ไปด้วย  จากนั้นซ้อนไว้ด้านบนสุดของ BlurView (เพราะใช้ addSubView เฉยๆ) ซึ่งด้านบนสุดของ Blur View ก็คือ Background ของ Controls จริงๆ อยู่ดี เราจึงยังสามารถทำงานกับ Control ต่างๆ ได้อย่างไม่มีปัญหาอะไร (ค่อยๆ อ่าน อย่าพึ่งงงนะ ถ้างง... อ่านใหม่)

เท่านี้แหละครับ ลองนำไปใช้งานดูนะ เมื่อเข้าใจแล้ว มันไม่ยากเลย :)

Popular posts from this blog

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

"อีสุกอีใส" ประสบการณ์เมื่อต้องมาเป็นตอนอายุ 22

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android