web analytics

Flutter : การใช้ Flare แสดง Animation ใน Flutter

สวัสดีผู้อ่านครับ มาลองเล่น library กันต่อ บล็อกนี้จะพามาลองเล่น library ที่ชื่อว่า flare ครับ ซึ่งเป็นตัวช่วยสำหรับแสดง animation จากไฟล์ จะเป็นยังไง มาลองเล่นกันเลย

รู้จักกับ Flare

Flare เป็น product นึงของบริษัท 2 Dimension Inc. ที่ rebrand tools เดิมที่ชื่อว่า Nima โดยความสามารถของมันคือช่วยให้เราสามารถสร้าง Animation Vector แล้วนำมาแสดงผลใน platform ต่างๆ เช่น JS , Swift , React และรองรับ Flutter ด้วย ถ้าจำกันได้ในงาน Flutter Live 2018 ที่ประกาศ Flutter 1.0 ในงานนั้นคุณ Guido Rosso (Co-founder, 2Dimensions) และคุณ Luigi Rosso (Co-founder, 2Dimensions) ทั้งสองเป็นพี่น้องฝาแฝด ก็มาอธิบายการใช้ Flare ใน Flutter

ตอนนั้นผมก็เขียนสรุปไว้ด้วย อ่านสรุปงาน Flutter Live 2018 ได้ที่ลิงค์ข้างล่าง

เริ่มต้น

เข้าเว็บไซต์ของ 2dimension หากยังไม่ได้สมัครสมาชิกก็ลงทะเบียนให้เรียบร้อยจากนั้น เข้าไปที่เมนู explore ซึ่งเป็น animation ที่มีคนทำเอาไว้

https://www.2dimensions.com/explore

ส่งออกไฟล์ .flr

เลือก animtion ที่ถูกใจ โดยตัวอย่างนี้ผมจะเลือก animation ที่ชื่อว่า Resizing House จากนั้นกดที่ Open in Flare

จะปรากฏหน้าจอ Tool มีฟังชันก์มากมาย

สิ่งที่เราต้องการคือไฟล์ของ animation นี้ ให้ไปที่เมนูด้านบนกด export

เลือก format เป็น binary หรือ JSON ก็ได้ (binary จะเป็นไฟล์ย่อขนาดเล็กลง) จากนั้นกด export เราจะได้ไฟล์ .flr

เพิ่ม .flr ใน Assets

นำไฟล์ .flr มาไว้ใน assets ของโปรเจคเรา

เพิ่มไฟล์ .flr ใน asset ที่ pubspec.yaml

การใช้งาน

มาลองใช้งาน flare ใน Flutter กัน ก่อนอื่น import flare_actor เข้ามา

จากนั้น กลับไปดูที่ Flare ตัว Animation ที่เราดาวน์โหลดมา มี Animate ชื่ออะไรให้เราใช้งานบ้าง ในตัวอย่างนี้ มีอันนึงชื่อ Demo Mode

กลับมาที่ main.dart เราก็ใช้ FlareActor ที่เป็น Widget สำหรับแสดง animation ก็กำหนด asset .flr ให้มัน แล้วก็ animation ก็ใส่ชื่อที่เราดูมาเมื่อกี้ ในตัวอย่างนี้คือ Demo Mode นั่นเอง

เท่านี้ก็ได้ Animation แล้ว

Flare Controller

หากต้องการเล่นหลายๆ Animation พร้อมกัน จำเป็นต้องใช้ FlareController ก็ให้สร้าง class ขึ้นมาแล้ว extends FlareController แล้วก็ override method มาซะ

ประกาศตัวแปร FlutterActorArtboard อันนี้คือ ตัวที่ควบคุม animation รวมทั้งหมด โดยภายเราจะสามารถใส่ layer ให้มันได้ คือ FlareAnimationLayer ในที่นี้คือ layer สำหรับ Demo Mode

ที่ initialize ก็กำหนดค่าเริ่มต้น ก็ดึง animation ด้วยชื่อ แล้วกำหนด mix ซึ่งคือความเร็วสำหรับแสดง animation ในที่นี้ ค่า 1 คือแสดงความเร็วแบบปกติ

ส่วนที่ advance เราจะกำหนดเวลาให้ time ของ animation ขยับไปข้างหน้า และวนลูปเริ่มใหม่ด้วยการ % (mod) โดยจะส่งค่า elapsed มาให้

กลับมาที่ main.dart ประกาศ MyHouseController ของเรา

ที่ FlareActor เพิ่ม controller ให้มัน โดยตอนนี้เราจะ controller animation ด้วย controller ของเรา ดังนั้นไม่จำเป็นต้องกำหนด animation ให้มันแล้ว

ลองรันจะได้ผลลัพธ์เหมือนกัน

ลองกำหนด mix = 0.1 การแสดง animation ก็จะช้าลง

เพิ่ม Animation ที่สอง

ตัว animation Demo Mode จะ animate เฉพาะตัวบ้าน โดยผู้สร้างได้ทำอีกตัวแยกไว้คือส่วนของเมฆ และพระอาทิตย์ ชื่อว่า Sun Rotate เราจะเพิ่ม animation นี้อีกตัวกัน

ก็ไม่ยากเลย ก็เพิ่ม FlareAnimationLayer อีกอันนึงสำหรับดวงอาทิตย์

ส่วนของ advance ก็ทำเหมือนกับ Demo Mode

เท่านี้ animation ก็รันไปพร้อมกันแล้ว

เพิ่มเติม

ลองเล่นเพิ่มเติมอีกนิดนึง ถ้าสังเกตที่ animation นี้ใน Flare จะเห็น animation ที่ผู้สร้างได้ทำแยกไว้ของบ้านในแต่ละขนาด ดังนั้นเราจะลองทำ slider สำหรับเลือกขนาดบ้านกัน

ก่อนอื่นลองใช้ animation ที่ชื่อว่า to 6 ดูก่อน

มาทำให้ animation แสดงตามค่าตัวแปรของเรา ประกาศตัวแปร สำหรับจำนวนห้อง

เพิ่ม slider widget ใส่ค่า min=3 , max=6 , division =3 (division คือจุดที่แบ่งส่วนคั่นชัดเจน) กำหนดไว้ข้างล่าง FlareActor และตรง Animation ก็ใส่เป็นชื่อ animation ของแต่ละห้อง ในที่นี้คือ to 3, to 4 , to 5 , to 6 ส่วน onChanged ของ Slider ก็ setState เพื่อเปลี่ยนค่า room

ลองรัน เท่านี้ก็ได้ slider ที่สามารถปรับขนาดบ้านได้แล้ว

สรุป

Flare เป็นเครื่องมือที่ยอดเยี่ยมสำหรับสร้างสรร animation สามารถนำมาใช้กับ Flutter ได้ง่ายมาก แค่กำหนดไฟล์ .flr ใน asset แล้วใช้ผ่าน FlareActor แต่ถ้าเราต้องการการทำงานที่ซับซ้อนขึ้น เราสามารถใช้ FlareController ร่วมกับ FlarreActor

โค้ดประกอบที่ Github ของผม
https://github.com/benznest/flutter-flare-app

สำหรับตัวอย่างอื่นๆ ลองเล่นได้ที่ Github ของ Flare-Flutter
https://github.com/2d-inc/Flare-Flutter