web analytics

การทำ Animation ใน Flutter ตอนที่ 2

สวัสดีผู้อ่านครับ บล็อกนี้เป็นตอนที่ 2 ของการทำ Animation ใน Flutter จากตอนที่แล้ว เราได้รู้จักกับ Animation controller และการทำ transition ด้วย AnimatedBuilder ไปแล้ว ซึ่งเป็น Widget ที่ทาง Flutter เตรียมไว้สำหรับ build Animation แบบ custom โดยเฉพาะ ในตอนที่ 2 นี้จะพามารู้จักกับ Widget Animated แบบอื่นๆกัน

ใครยังไม่ได้อ่าน ตอนที่ 1 อ่านได้ที่ลิงค์ด้านล่างนี้

Animated Widget

จากตอนที่แล้วได้ลองเล่น AnimatedBuilder ซึ่งเป็นหนึ่งใน widget ของกลุ่ม Animated โดย widget ประเภทนี้จะใช้ prefix ว่า animated และนอกจาก AnimatedBuilder แล้วยังมี widget สำหรับ animated อีกหลายตัว มาลองเล่นกัน

Animated Opacity

AnimatedOpacity จะช่วยให้เราทำ fade transition กับ widget ที่ต้องการได้สะดวกมาก

สร้างตัวแปรสำหรับเก็บค่า opacity

จากนั้น เอา widget ที่ต้องการมาเป็น child ของ AnimatedOpacity แล้วกำหนด duration กับ opacity ให้มัน จากนั้นเรียก setState เพื่อเปลี่ยนค่า opacity มันก็จะทำ animation ของ opacity ให้อัตโนมัติ ตามเวลา duration ที่กำหนด จะเห็นว่า เราไม่ต้องไปยุ่งกับ animation controller เลย

ลองรันดูผลลัพธ์

Animated Container

animated container ใช้งานคล้ายกับ animated opacity แต่จะทำ animation เกี่ยวกับคุณสมบัติของ container แทน เช่น ขนาด สี

เริ่มจาก สร้างตัวแปรไว้หนึ่งตัว สำหรับเก็บค่าขนาด container

จากนั้นกำหนดตัวแปรให้กับ width , height ของ container แล้วลอง เรียก setState เปลี่ยนค่าของตัวแปร

เท่านี้ container ก็จะทำ animation ตามตัวแปรที่เรากำหนดแล้ว ตัวอย่างนี้ผมกำหนดให้กดปุมแล้ว ขนาดจะใหญ่ขึ้น 50

Animated Align

Animated ยังมีอีกเยอะ มาลองเล่นอีกตัว AnimatedAlign ที่จะช่วยทำ animation ตามค่าของ align

กำหนดตัวแปร alignment มีค่าเริ่มต้นอยู่ ตรงกลาง

จากนั้นใช้ AnimatedAlign แล้วอัพเดทค่า align ใน setState ให้ alignment ไป บนซ้าย แทน

ลองรัน จะเห็นว่ามันทำ animation ตาม alignment แล้ว ง่ายมากๆ

Animated Positioned

ถ้าใช้ align แล้ว Animated positioned ก็ใช้งานไม่ต่างกันนัก โดยจะใช้งานเพื่อกำหนดตำแหน่งใน parent และทำ animation อัตโนมัติหาก เราอัพเดท position

สร้างตัวแปร กำหนดค่า position

จากนั้นนำค่าไปใช้กับ AnimatedPositioned แล้วลอง setState อัพเดทค่า position จากการกดปุ่ม

ลองรัน

ถึงตรงนี้ น่าจะเริ่มจับทางได้แล้วใช่ไหมครับ ว่า AnimatedOpacity , AnimatedContainer , AnimatedAlign พวกนี้ ใช้งานคล้ายกันมาก แค่นำมันมา wrap ให้กับ widget ที่ต้องการ กำหนด duration และค่าต่างๆ จากนั้นเมื่อเรา setState เพื่ออัพเดท มันก็จะทำ animation อัตโนมัติ สะดวกมากๆ

แต่ถึงอย่างนั้น widget ในกลุ่ม Animated ก็ยังมีอีกซึ่งมีอีกหลายตัวที่น่าสนใจ แต่การใช้งานจะซับซ้อนขึ้นอีกนิด

Animated Icon

Animated icon เป็น widget อีกตัวที่น่าสนใจ โดยมันจะ transition เปลี่ยนไอคอนนึง ไปอีกไอคอนนึง ซึ่งทาง Flutter ได้เตรียมไอคอนมาให้เราจำนวนนึงแล้ว

โดยเราจำเป็นต้องใช้ Animation controller

จากนั้น Wrap widget ที่ต้องการด้วย AnimatedIcons โดยใช้ icon จาก AnimatedIcons เวลาใช้งานก็เรียกใช้ animationController.forward()

ลองรัน

มีไอคอนให้ใช้งานได้ประมาณสิบอัน สามารถดูได้ที่คลาส AnimatedIcons

Animated Cross Fade

ที่น่าสนใจอีกตัวคือ Cross Fade โดยจะทำงานง่ายๆคือ กำหนด widget 2 ตัว คือ first , second จากนั้นก็กำหนดว่าจะให้แสดงตัวไหน แล้วมันจะทำ fade animation ให้อัตโนมัติ

สร้าง bool มาตัวนึงว่าจะให้แสดง widget ตัวแรกมัย

จากนั้นก็กำหนด firstChild , secondChild ให้กับ AnimatedCrossFade ส่วนวิธีแสดง child ไหนจะใช้ CrossFadeState.showFirst หรือ CrossFadeState.showSecond

จะได้แบบนี้

Animated List

Widget พระเอกอีกตัวที่ผมคิดว่าน่าจะใช้กันบ่อย คือ AnimatedList มันคือการทำ animation กับ item ใน ListView เช่น การเพิ่ม item หรือการลบ item

เริ่มจากลอง สร้างข้อมูลจำลองขึ้นมา สำหรับเป็น item ใน ListView

AnimatedList การใช้งานแทบจเหมือน Listview.builder คือกำหนด itemCount และ implement ตัว itemBuilder ในตัวอย่างนี้ ผมจะแยก method สำหรับ build UI แต่ละ item เอาไว้

ลอง return item แบบธรรมดาๆไปก่อน แบบที่ยังไม่ใส่ animation

จะได้เหมือน ListView ปกติ

ใส่ floating action button สำหรับกดสร้างและลบ item

ลองรัน จะได้แบบนี้

จากนั้นประกาศตัวแปร GlobalKey ของ AnimatedListState ใน State ของเรา ใช้สำหรับเข้าถึง State ของ AnimatedList

นำ GlobalKey ไปกำหนดให้กับ AnimatedList ผ่าน parameter ที่ชื่อว่า key

จากนั้นเขียน method สำหรับเพิ่ม item ลงไปใน List สิ่งที่เราต้องทำคือ เพิ่มข้อมูลลงไปใน list data จริงๆ และเรียก key current State เพื่อเข้าไปเรียก insertItem อันนี้ไม่ได้เป็นการ add ข้อมูลแต่จะเป็นการทำ animation ให้ item ที่เพิ่งถูกเพิ่มไป

ลองรันกด add data ได้แล้ว แต่ animation ยังไม่แสดง เพราะเรายังไม่ได้กำหนด Animation ให้แต่ละ item

กลับมาที่ itemBuilder ของ AnimatedList เพิ่ม FadeTransition ให้กับ buildRowData ของเรา จะเห็นหว่า itemBuilder ก็ส่งค่า animation มาให้แล้ว โดยค่านี้เกิดจากตอนเรากำหนดที่ insertItem นั่นเอง

ลองรัน ได้ animation ตอน add item แล้ว

ต่อมาทำ animation สำหรับลบ item ครับ วิธีการคล้ายกับ insert แต่เราจะทำ animation เพื่อลบก่อน จากนั้นค่อยลบข้อมูลจาก list จริง

เสร็จแล้วเพิ่ม removeData() ให้กับปุ่มลบ

ลองรัน จะได้ AnimatedList แล้ว

Source code ของ AnimatedList ครับ
https://gist.github.com/benznest/0a0f63758aeabd80e2c5e360d886df1e

สรุป

ในตอนที่ 2 เราได้รู้จักกับ widget ที่มี prefix Animated เช่น Animated Opacity , Animated Container ซึ่งเป็น Widget ที่ใช้สำหรับทำ animation กับ widget นั้นๆ และ AnimatedList ที่ช่วยให้ทำ Animation กับ item ใน ListView ได้ ในตอนถัดไปจะพาไปรู้จักกับ Animation ตัวไหนอีก ฝากติดตามด้วยครับ