“ทุกอย่างไม่ใช่ภาพนิ่ง แต่มันเป็น Animation” เรามาสร้างแบบง่ายๆ ในแอปแอนดรอยด์กันเถอะ

Android Mar 8, 2018

เนื่องจาก บางจุดของแอปฟังใจนั้น ก็ต้องมี Animation ดุ๊กดิ๊กมาแสดง เพื่อให้ user รู้สึกไม่รอนานจนเกินไป เหมือนจะมีอะไรทำบ้าง (และเพื่อ UX ที่ดีด้วย) และการทำอาจจะดูยากในช่วงแรกในการหา solution ซึ่งในตอนนี้มีเจ้า lottie ของ AirBnb หลักการทำงานแบบคร่าวๆ นั่นคือ ให้ designer ทำแต่ละ frame ออกมา แล้ว export เป็น json จากนั้น dev ก็เอา json ที่ได้ ไปเข้า lottie บน code ของเราอีกที

แต่ๆๆๆๆ เราไม่ได้พูดถึงเจ้า lottie นะ 55555

จริงๆวิธีแบบเจ้า lottie เคยคิดจะทำกันนะ แต่มันวุ่นวาย ยุ่งยาก ซับซ้อน เพิ่มงานให้กับ UI diva เราไปอีกก ทาง Android Developer ที่งานเยอะอยู่แล้ว อ่านแล้วก็งงไปอีก

วิธีที่เราทำนั้น process เหมือนเมื่อกี้เลย designer ทำรูปแต่ละ frame ออกมา แต่ไม่ได้ใช้ json หรอกนะ designer ก็จะ export รูปออกมา แล้วให้เราเอาไปใช้ต่อ โดยการสร้าง animation-list ขึ้นมา แล้วไปใส่เป็น background ของ ImageView นั้นๆ และเอาไปใช้ต่อ

เรื่องความละเอียดของไฟล์ภาพไม่ต้องห่วงเลยนะ เพราะแว่วๆว่า น้อง designer คนน่ารักของเราใช้ AI ทำ ดังนั้นภาพที่ได้จะละเอียดมาก เป็นลายเส้น ไม่ใช่ภาพเหมือน PS นะ ภาพไม่แตกแน่นอน

ในที่นี้เราจะยกตัวอย่างจากแอปฟังใจ 2.0 นะ ยกเครื่องใหม่หมดเลย ตัวอย่างคือ ถ้า no internet จะแสดง animation ยังไง

เริ่มต้นเราในฐานะ developer ต้องดูสิ่งที่ designer ทำว่าสุดท้าย ภาพออกมาเป็นแบบไหน ลองเขียนโค้ดทำโน้นนี่ให้ทาง designer ดู บางทีภาพเร็วไปก็อาจจะปรับให้ช้าลงได้ จะได้เข้าใจตรงกันเนอะ :)

ดังนั้น จึงเอา frame ที่เป็นไฟล์ภาพจาก designer ทั้งหมดที่ได้ ไปใส่ใน drawable-xxxhdpi (อาจจะต้องเปลี่ยนชื่อไฟล์ด้วยนิดหน่อย เนื่องจากบางอักขระใส่ใน xml ไม่ได้)

จากนั้นมาสร้างไฟล์ drawable โดยไส้ในเป็น animation-list

oneshot ส่วนนี้บอกว่า ให้แสดงทีเดียวจบ (true) หรือเล่นวนลูป (false)
duration แต่ละเฟรมเล่นกี่ ms เช่น เฟรมแรกเล่น 50 ms ไม่จำเป็นต้องใส่เท่ากันทั้งหมดนะ แล้วแต่ดีไซน์เลยยยย แต่ส่วนใหญ่ใส่เท่ากันหมด หรืออาจจะใส่เฟรมสุดท้ายให้เล่นช้าหน่อย ก็ย่อมได้
drawable แต่ละเฟรมเป็นรูปไหน

สร้างเสร็จแล้วเอามาแปะที่ layout ของเราซะ โดยให้เป็น background ของ ImageView ประมาณนี้ (พอดีโค้ดที่เคยเขียนหายไป แล้วกว่าจะกลับมาเขียนก็นานมากแล้ว)

<ImageView
    android:id="@+id/img_offline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="@dimen/grid_space_24"
    android:background="@drawable/animation_list_no_internet"/>

ลองเรียกในโค้ดดู เป็นประมาณนี้

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

ตัว class และ layout จะมาคู่กัน จริงไหม

ปัญหาก็คือ ถ้าใช้ fragment เรียกตรงๆแล้วมันไม่ดุ๊กดิ๊กหล่ะสิ

งั้นเรามาสร้าง class ที่จัดการพวกนี้โดยเฉพาะ ซึ่งเป็นไฟล์กลาง ที่ทุกคนในทีมสามารถเรียกใช้ได้โดยเฉพาะ แบบนี้

จากนั้นเอาไปแปะไว้ใน layout โดยใช้ class ที่เราเพิ่งสร้างนั่นแหละ เป็น attibute เดียวกันกับที่เราใช้กันทั่วไป

<com.example.AnimationView
    android:id="@+id/img_offline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="@dimen/grid_space_24"/>

และในโค้ดของเรา เรียกใช้แบบนี้

AnimationView animationView = (AnimationView) inflated.findViewById(R.id.img_offline);
animationView.setAnimateDrawable(R.drawable.animate_list_no_internet);
animationView.startAnimation();

เราสามารถเรียกใช้หน้าไหนก็ได้ที่เราต้องการแสดง animation โดยใส่ drawable animation ที่เราต้องการลงไป

สุดท้ายจะเป็นดังนี้

แคปจากหน้าแอป เวลากดที่ตัวรูป มันจะดุ๊กดิ๊กให้เราดู แล้วหยุดไป ความละเอียดก็ช่างมันเถอะ T^T

สุดท้าย เราก็จะได้ animation ดุ๊กดิ๊กสวยงาม ไม่น่าเบื่ออีกต่อไป เสมือนมีเฌอปรางมาอยู่ในแอปของเรา >W<

ปล. ถ้าทำเป็นพวก dialog ทั้งหลาย ก็ทำเหมือนกันนั่นแหละ เพียงแต่ตัว View นั้น extend มาจาก Dialog นะ

Reference จ้า

อันนี้เป็นจุดเริ่มต้นเลย มาจาก document ของ android เลยหล่ะ จริงๆมีโค้ดเดิมที่ทำอยู่เป็นแนวทาง

Drawable Animation | Android Developers
Drawable animation lets you load a series of Drawable resources one after another to create an animation. This is a…developer.android.com

AnimationDrawable | Android Developers
Load the ImageView that will host the animation and // set its background to our AnimationDrawable XML resource…developer.android.com

ปัญหาตอนที่เราอยากกดที่รูป แล้วให้มันดุ๊กดิ๊กออกมาหน้าจอ

How to add an OnClick event for an Android custom View

I have two images moving across the screen, one is a ball and one is a man.What I want to happen is when the user touches the image of the man, the ball drops. My problem is I cannot seem to add...

Stack OverflowBen Taliadoros

อันนี้เป็นปัญหาสุดท้ายที่เจอ คือ กดเล่นได้ แต่มันจะแปลกๆที่กดแล้วมันหยุดกลางคัน ในนี้บอกว่าวิธีแก้ปัญหา คือ ให้ stop animation และ start animation ใหม่จ้า

Running the same frame animation on each onClick call

I’m trying to display a frame to frame animations using AnimationDrawable when clicking a ImageView. But my animation happens only once when I click the ImageView. I’m using xml for the animation.

Stack OverflowLuke Villanueva

สุดท้าย #พื้นที่โฆษณา

ตอนนี้แอปแอนดรอยด์ฟังใจ 2.0 ได้ออกสู่สายตาชาวโลกแล้ว สามารถกด download ได้ที่

และก็ทางฟังใจรับน้องๆมันฝึกงานภาคฤดูร้อนเนอะ ในตำแหน่ง back-end developer, iOS developer, Android developer, Social Media Officer 1 ตำแหน่ง รายละเอียดตามลิ้งนี้เลย
- สมัครวันสุดท้ายวันที่ 18 มีนาคม 2561
- ประกาศคนได้สัมภาษณ์ 21 มีนาคม 2561
- และประกาศเด็กฝึกงานตัวจริง 5 เมษายน 2561 จ้าาา

มาสมัครกันได้นะ มาเหอะ อยากเจอ ><