Android animation made easy with MotionLayout at Android bangkok conference 2020
•Als PPTX, PDF herunterladen•
0 gefällt mir•75 views
Android animation made easy with MotionLayout at Android bangkok conference 2020
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Android animation made easy with MotionLayout at Android bangkok conference 2020
Ähnlich wie Android animation made easy with MotionLayout at Android bangkok conference 2020 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Android animation made easy with MotionLayout at Android bangkok conference 2020
- 1. Android Animation Made Easy With Motion Layout Him Sama Android Developer
- 2. Introduction Who are we as a company? Flat Hierarchy Solution Oriented Design Led Agency
- 6. Our Sample
- 8. What is MotionLayout? ● Backward compatible with API 14 ● Subclass of ConstriantLayout ● Have ability to animate views ● For complex view animations ● Fully declarative
- 15. MotionScene An XML file that describes an animation for MotionLayout. MotionScene ConstraintSet Constraint CustomAttribute Transition OnClick OnSwipe KeyFrameSet KeyPosition KeyAttributes ….
- 16. Constraint Sets Specifies both the start and the end constraints of the transition. <MotionScene ...> <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
- 17. Transition Specifies the animation duration, trigger, and how to move the views. <MotionScene ...> <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
- 28. Add a swipe handler
- 29. Add a swipe handler
- 30. Add a swipe handler
- 32. Result
- 33. Allows you to change the appearance of the views between start and end of the transition KeyAttributes
- 36. When to use Motion Layout
- 37. MotionLayout will only provide its capabilities for its direct children Limitation
- 38. What’s next? ● https://codelabs.developers.google.com/codelabs/motion-layout ● https://material.io/design/motion/understanding-motion.html ● https://developer.android.com/training/constraint- layout/motionlayout/examples ● https://github.com/oozou/motion-layout-android-conf-2020
- 39. Q/A
- 40. Join our Mobile Developer Open House! Join the event for a chance to win a Playstation 5https://go.oozou.com/ps 5
- 41. Thank you We are hiring
Hinweis der Redaktion
- สวัสดีครับ ยินดีต้อนรับสู่ oozou session ครับ ผมชื่อฮิม ครับเป็น Android developer ที่ Oozou . ผมจะมาเล่าให้ฟังว่าทำ animation ง่ายๆโดยที่ไม่ต้อง code เลยด้วย Motion layout และมีโปรเจคง่ายๆมาเป็นตัวอย่างให้ดูครับ ==================================================================================== Hi, everyone Welcome to Oozou's session My name is Him, an Android Developer at Oozou I’m going to be talking about the basics of motion layout and how to apply those to your application. So, don’t worry if you haven’t used motion layout before because by the end of this session Hopefully, you’ll have a good understanding of how to get started with motion layout And how to make your application have a great animations inside them.
- เป็น agency ที่ไม่เหมือนใคร Flat hierarchy ทุกคนเท่าเทียมกันหมด ความคิดเห็น ไอเดีย ของทุกคนมีความสำคัญ เพื่อแก้ปัญหาให้กับลูกค้าของเรา Solution oriented เราจะเน้นหา solution ที่เหมาะสม ก่อนที่เราจะเลือก tech stack ก่อน Design led agency คือเราจะทำ design Research Prototype เพื่อหา solution ที่เหมาะสม ก่อนลงมือเดฟ เพื่อจะได้ไม่ต้องแก้หลายรอบ บริษัท oozou เป็น agency ที่ไม่เหมือนใครคือเราเป็น flat hierarchy ทุกคนทีความเท่าเทียมกันความคิดเห็นของทุกคนสำคัญเท่ากันหมด เพื่อแก้ปัญหาให้กับลูกค้า เราเป็น solution orientated ก็คือเราเน้นแก้ปัญหาให้กับลูกค้าก่อนที่เราจะเลือก tech stack และเราเป็น design led agency ก็คือเราจะมีการ design research prototype เพื่อให้ได้ solution ที่ดีที่สุดสำหรับลูกค้าก่อนที่เราจะลงมือเดฟ เพื่อที่จะได้ไม่ต้ิงแก้หลายรอบ Oozou company is a unique agency, we are flat hierarchy everyone is important, all opinions & ideas are important to solve problem for our customers Solution orientated we focus on solving problems for our customers before we choose a tech solution. And we are a design led agency, that is, we will have a research prototype to get the best solution for the customer before we do technical development.
- การทำ animation มันยากถึงแม้เราจะมี api ให้ใช้หลายตัว แต่ว่า Motion layout มันทำให้การทำ animation ได้ง่ายโดยที่ไม่ต้องเขียน code เลย ==================================================================================== Implementing animations is a complicate thing, Although we do have several APIs available, Sometime developer confused which one we should use, But with Motion layout, we can implement animation without coding at all.. I will show you how.
- จากเว็บไซต์ Android website เหมือนแอป Youtube ตอนนี้เลย Transition between compat view & full screen view อันนี้เป็นตัวอย่างจากเว็บไซต์ Android เอง ซึ่งเป็นตัวอย่างคล้ายๆ แอป Youtube เป็นตัวอย่างการ transition ระหว่าง compat view ไปเป็น full-screen view จะเห็นว่าตอนที่ user swipe compat view ขึ้นเนี่ย มันจะ transition ไปเป็น full-screen ที่เห็นข้อมูลเยอะขึ้น ======================================================= This is a sample project from android website It looks similar to Youtube app. Demonstrates transitioning between compat view and full-screen view with additional contents
- Motion layout with a view pager ไอคอนรถ ต้นไม้กับภูเขา อันนี้เป็นอย่างอีกแบบนึงจากเว็บของ Android เอง เหมือนกัน แสดงให้เห็นถึงการใช้ motion layout ควบคู่กับ view pager จะสังเกตุเห็นว่า ตัวรถ จะเคลื่อนที่ไปตามตำแหน่งของ tab ที่ user เลือก แล้วก็ วิวด้านหลังเอง ก็จะมีการเคลื่อนที่ตามตำแหน่งของ tab เหมือนกัน สังเกตุว่า ภูเขาและต้นไม้จะเคลื่อนที่ต่างกัน ทำให้ดูมีมิติมากขึ้น ======================================================= This is another sample project from android developer as well It shows how can we apply motion layout with a viewpager You can see now on the slide, the little car right there, it is moving to the selected tab As well as background back right there is moving along with the user interaction as well. This makes your app look more attractive.
- Website ปัจจุบัน ของ oozou ตอน swipe up ไม่มี animation เลย Idea ว่าลอง เอา motion layout มาใส่ Oozou logo อันนี้เป็น เว็บไซต์ของ Oozou เองน่ะครับ สังเกตุว่าตอน swipe up เนี่ยยังไม่มี animation อะไรเลย ผมก็เลยเกิด idea ว่ามาลองทำแอป android ขึ้นมาแล้วใส่ motion layout ดู จะสังเกตุเห็น ตัวโลโก้ของ oozou จะเห็นแค่ซีกเดียวใหญ่ๆ ผมก็เลยคิดว่าเราควรจะทำอะไรบางอย่างกับ โลโก้นี้ ============================================== This is oozou’s website without any animation Last week, before this conference I was thinking, what I will show you guys One idea I had in my mind was Why don’t we apply motion layout into our website So, I was decided to create a native app that copied the header of oozou website And applied the motion layout into the red rainbow in the header. The red rainbow is just one side of the oozou logo.
- พอเอา motion layout มาใส่ Oozou logo transitioning ค่อยๆเล็กลง แล้วก็ย้ายไปที่ ข้างหน้าชื่อ oozou ผมก็เลยเกิดไอเดียว่า ตอนที่ user scroll ขึ้น ผมก็เอา animation ใส่โลโก้ของ oozou ให้ไปอยู่ข้างหน้าชื่อบริษัท ทำให้แอปดูน่าสนใจขึ้นน่ะคับ บอกก่อนว่าที่ผมทำเนี่ยผมไม่ได้เขียน code เลยแม้แต่น้อย ============================================ So, this is the result after applying motion layout to the big logo and other views When the user drag up you can see the logo transitions to smaller and smaller And then moving to the left top of the screen And again, i build this without coding at all.
- Motion Layout เนี่ย Back ward compatible ไปจนถึง Android รุ่นเก่าๆ อย่าง API 14 ให้ใส่ animation ได้ !! (down to API 14, Android 4.0 Ice Cream Sandwich) Motion layout ก็คือ ConstraintLayout ที่ไปฉีด steroid และที่ไปฝึกวิชาจากวัดเซ้าหลิ่น ทำให้มันสามารถทำ animation ให้กับ view ได้ เราสามารถทำ animation ง่ายๆไปจนถึง animation ที่มีความซับซ้อนได้ และมันเป็น fully declarative นั้นคือเราไม่จำเป็นต้องไปเขียน code เพื่อทำ animation เลย โดยที่ (next slide) =================================================================================================== Motion layout is backward compatible with API 14 !! It’s cover almost the cases (down to API 14, Android 4.0 Ice Cream Sandwich) Motion layout is a new version of constraint layout with Steroid and acrobat training So, it has ability to animate views You can use motion layout to make simple animation, even a complex animation. It is fully declarative, we don’t have to code for making animations.
- เราสามารถใช้ Motion Editor ตัวนี้ทำ Animation ได้เลย โดยที่ไม่ต้องเปิด code xml หรือ kotlin เพื่อทำ animation เลย ใน session นี้เราจะมาทำ animation ง่ายๆ เป็นตัวอย่างให้ดูครับ ก็คือ (next slide) ======================================================== This is the Motion Editor I have been using for implementing the oozou app without coding In this session, I will show you how to apply motion layout to a simple project
- นี่คือ animation ง่ายๆ ที่เราจะทำด้วย MotionLayout และ Motion Editor เราจะทำการใส่ motion ให้กับ red star ที่สามารถเคลื่อนที่ตาม user interaction ======================================================== This is the project we’re going to convert to motion layout In this layout, It has only one image view, which is the little star on the top of the screen We’re going to add animation where we can drag down the star to the ground and return the star to the sky and let it free forever!
- ไฟล์ตั้งต้น อันนี้คือไฟล์ตั้งต้นของเรา คือมี constraintlayout กับ imageview ตัวนึง ======================================================== This is the xml file of the view we’re going to convert to motion layout. It has a constraint layout as the root of the layout and one image view which is the star icon.
- Okay ครับ เราจะมาเริ่มทำ motion layout กันเลย วิธีการ convert constraint layout ไปเป็น motion layout แบบง่ายๆ สามารถทำได้โดยการ คลิกขวาที่ Constraintlayout ใน Component Tree แล้วเลือก Convert to motion layout ======================================================== Okay, let’s start An easy way to convert to motion layout is Go to component tree and find the constraint layout and right click on it And select Convert to Motion Layout.
- จะเห็นว่า constraint layout ถูกเปลี่ยนเป็น motion layout แล้ว (เร็วๆ ผ่านๆ) โดยมันสามารถแทนที่กันได้ทันที เนื่องจาก motion layout เป็น sub class มาจาก constraint layout สังเกตุว่ามี motion layout จะมี attribute บังคับเพิ่มขึ้นมา 1 ตัวคือ layoutDescription ซึ่ง layoutDescription คือเป็นการ define motion scene ให้กับ motion layout ตัวนั้นๆ ======================================================== After the xml file has been converted Now, the ConstraintLayout was replaced with MotionLayout There is also layoutDescription attribute which points to the motion scene file
- อันนี้คือ Motion scene ที่ android auto generate มาให้จะมีหน้าตาแบบนี้ ซึ่งข้างในจะมี tag สำคัญคือ Transition กับ Constraint Set ======================================================== And it also created a motion scene file for us as well, So you can see now motion scene already contains constriant sets and the transition
- Xml file อธิบาย animation ทั้งหมดให้กับ motion layout นั้นๆ Motion scene เป็นไฟล์ xml ที่อธิบาย animation ที่เกิดขึ้นแต่ละ state ของ motion layout ======================================================== Motion scene defines all the animations for that particular scene or for that particular layout. This is typically motion scene look like, top level is motion scene tag Transition tag, inside the transition tag we can have keyFrameSet, on click listener and we can have on swipe if we wanted to. And we also have constraint sets
- เป็น tag ใช้เก็บ constraint ของจุด start และ end ของ transition Constraint set คือ tag ที่ใช้ระบุ constraints ของจุด start และ end ของ transition ======================================================== I would say constraint set describes the constraints both start and end of the transition.
- เป็น tag ใช้อธิบาย animation ที่เกิดขึ้นระหว่าง constraint sets Duration, trigger Animations ใน motion layout เนี่ย ก็การ transitions ระหว่าง state ที่เรากำหนดไว้ใน constraint sets. แล้วเราก็ใช้ tag transition นี้และในการใส่ transitions ให้กับ constraints sets Transition เป็น tag ที่ใช้อธิบาย animation duration, trigger และการเคลื่อนไหวของ view ======================================================== And transition tag describes animations, duration, trigger and how the views moving.
- Overview window คือหน้าที่เรา define constraint set กับ transition ไว้ 2 section window กล่องนี้มันจะเปลี่ยนตามที่เรากดจากหน้า overview Attribute panel เป็นหน้าต่างที่เราเอาไว้แก้ attributes เปลี่ยนตาม overview กับ section window หลังจากที่เราเปิด xml layout ที่มี MotionLayout เราจะเห็นว่ามีหน้าต่าง Motion Editor ในหน้านี้มันมีอยู่ 3 ส่วนหลักๆ Overview คือหน้าที่เรา define constraint set กับ transition ไว้ ข้างล่างลงมาตรงเลข 2 ก็คือ Section มันจะเปลี่ยนตามของที่เราเลือกในหน้า overview window ตรงหมายเลข 3 ก็คือ Attribute ตรงนี้เราสามารถแก้ constraint ของ attribute ตรง constraint set ที่เลือกไว้ใน section ======================================================== This is the most important tool we use for implementing motion layout. There are three UI elements: Overview window allows you to select different parts of the animation. You can also select the transition between start and end by clicking on the arrow between them. Section – Below the overview is a section window that changes based on the currently selected overview item, in this window we can find our views that has been added some constraints Attribute – The attribute panel shows and allows you to edit the attributes of the current selected item from either the overview or selection window
- Step แรก คือเราจะใส่ constraints ของจุด start โดยการ เลือก Constraint set ที่ชื่อ start ในหน้าต่าง overview =============================================================== Define start constraints First step, Clicking on the start ConstriantSet
- หลังจากนั้นก็ลงมาดูหน้าต่าง section ด้านล่างเพื่อ เลือก view ที่ต้องการเพิ่ม constraints แล้วก็กดที่ icon ดินสอ เลือก create constraints ในที่นี้เราเลือก red_star =============================================================== And in the section window select red_star view And create constraint by clicking on the pencil icon above And now you can add any constraints to the star in the start ConstraintSets
- จะเห็นว่าในรูปนี้เราเพิ่ม constraints ให้กับ red star ให้มันอยุ่ด้านบนซ้ายของจอ =============================================================== And now you can add any constraints to the star at the start ConstraintSets In this case, we want the star icon to be on the left top of the screen
- ถ้าเรามาดูใน constraint set start จะเห็นว่า มี constraint ตัวนึงถูกสร้างมาให้เรา . โดยที่เราไม่ต้องเขียน code เลย =============================================================== In motion_scene, you can see the constraint has been added by Motion Editor already, you don’t have to code at all.
- และ Step ต่อไปเนี่ย เราจะใส่ constraints ของจุด end ต่อ โดยการ เลือก Constraint set ที่ชื่อ end ในหน้าต่าง overview เหมือนเดิมน่ะครับ =============================================================== After we added some constraints in start constraintSets already, Now we’re going to add some constraints into the star icon in the end ConstraintSets By clicking on the end constraint set in overview panel
- เลือก view ที่ต้องการเพิ่ม constraints เหมือนจุด start เลยครับ =============================================================== And create constraints as we did previously By selecting the star icon and create constraints
- หลังจากนั้นเนี่ยเราจะระบุ constraint ให้กับ red_star ให้อยู่ด้านล่างขวาของจอ ที่จะเป็นสิ้นสุดของ animation ของเรา =============================================================== And now we can add the constraints to red star In this case, we want the star icon to be at the bottom right of the screen.
- ก็เหมือนเดิมครับ motion editor จะสร้าง code ให้เราเลยอัตโนมัติเลย =============================================================== And now the constraint has been created inside the end ConstraintSets in motion scene file.
- Preview animation Transition timeline frame 0 - 100 ถ้าต้องการดู animation ณ frame ที่ต้องการได้ User interaction หลังจากที่เราใส่ animation ไปแล้วเนี่ย เราก็อยากเห็นใช่ไม่ครับว่า animation ที่เราทำมันหน้าตายังไง เราสามารถคลิกที่ลูกศร transition ข้างบนหัว constraint sets จะมีหน้าต่าง transition timeline ขึ้นมา ในหน้าต่างนี้เราสามารถกด play ดู animation ได้ หรือเราสามารถกดเพื่อดู animation ณ จุดใดจุดนึงใน timeline ได้ . . ตอนนี้เนี่ย เราได้ animation ของ red star ที่สามารถเคลื่อนที่จากข้างบนไปยังข้างล่างของจอได้แล้ว แต่สิ่งที่เราอยากได้เนี่ย เราอยากให้ red star มันเคลื่อนที่ตาม user interaction ในที่นี้คือการ swipe (next slide) ============================================================================================ Ok, let’s see the animation we made. We can see the preview by clicking on the transition as we did previously by clicking on the arrow above start and end of the transitions And transition timeline will be shown And now you can play your animation and you can see what happening to the star Now we have our animation, but we need a way to start the animation.
- Okay, เดี๋ยวเรามาเพิ่ม event swipe ให้กับ transition ของเรากัน เราสามารถสร้าง handler สองแบบคือ on click กับ on swipe ในที่นี้เราจะมาสร้าง swipe handler . . . โดยการคลิกที่ลูกศร transition ข้างบนหัวของ constraint sets เหมือนเดิม แล้วก็กดที่ปุ่ม create handler ปุ่มรูปนิ้วชี้, ปุ่มที่สามจากซ้าย เลือก swipe handler ก็จะมีหน้าต่าง create onSwipe ขึ้นมา Option transition ให้เลือก start -> end ซึ่งจะถูกเลือกโดย default อยู่แล้ว เพราะเราเลือกไปแล้วก่อนหน้า Option drag direction จะมี option ให้เราเลือกทิศทางของการ drag ในที่นี้เราจะเลือก dragDown ซึ่งก็คือเราจะลาก red star ไปไว้ข้างล่างของจอ Option anchor id ให้เลือก red_star ก็คือเราอยากให้ event นี้เกิดขึ้นกับ view ตัวไหน =============================================================== One way to do this is to make the MotionLayout respond to swipe events on the red_star By Open up the motion editor and select the transition by clicking on the arrow between start and end in the overview panel.
- เลือก swipe handler ก็จะมีหน้าต่าง create onSwipe ขึ้นมา =============================================================== Click “Create click or swipe handler” in the toolbar for the overview panel . This adds a handler that will start a transition.
- Create on swipe window 4 options Transition default ทิศทางการลาก star icon ลงมาข้างล่างจอ Anchor side คือเลือกว่าต้องการใส่ on swipe ในด้านไหนของ view Anchor ID เป็นการเลือกว่าเราจะในใส่ on swipe ให้กับ วิวไหน เลือก swipe handler ก็จะมีหน้าต่าง Create On Swipe ขึ้นมา Option transition ให้เลือก start -> end ซึ่งจะถูกเลือกโดย default อยู่แล้ว เพราะเราเลือกไปแล้วก่อนหน้า Option drag direction จะมี option ให้เราเลือกทิศทางของการ drag ในที่นี้เราจะเลือก dragDown ซึ่งก็คือเราจะลาก red star ไปไว้ข้างล่างของจอ Option anchor side: เราอยากให้การ dragging เกิดขึ้นจากด้านไหน ของ view ในที่นี้ก้คือ จาก top Option anchor id ให้เลือก red_star ก็คือเราอยากให้ event นี้เกิดขึ้นกับ view ตัวไหน =============================================================== You need a way to start the animation. One way to do this is to make the MotionLayout respond to swipe events on the red_star By Open up the motion editor and select the transition by clicking on the arrow between start and end in the overview panel. Click Create click or swipe handler in the toolbar for the overview panel . This adds a handler that will start a transition. Select Drag direction to dragDown because we want the animation start when we drag down. touchAnchorSide means that we are dragging the view from the top side. Change the Anchor ID to the red_star, which mean we want to apply this event to the red_star
- พอกลับมาดูที่ motion scene ที่เป็น xml เราก็จะเห็นว่าจะมี on swipe โผล่ขึ้นมาภายใต้ tag transition =============================================================== In the motion scene file, OnSwipe tag has been added inside transition tag without coding at all.
- จะเห็นว่าตรงนี้เนี่ยเราสามารถลาก red star ไปข้างล่างของจอได้อย่างลื่นไหลมาก . . (กดเพื่อแสดง หน้าข้างขวา) . แรงเฉี่ย . ถ้าเราลาก red star มาปล่อยไว้กลางทาง ตัว MotionLayout จะดูว่ามันอยู่ด้านไหนของ transition timeline มันก็จะ transition ไปอยู่ด้านที่ใกล้ที่สุดโดยอัตโนมัติ โดยที่เราไม่ต้องเขียน code เพิ่มตรงนี้เลย =============================================================== Ok, let’s run the app. Now, you can drag the star down to ground smoothly and leave it, the star will be yours forever. And if you are a kind person you will return the star into the sky, and let it free forever. And the right one When I was trying to move the star over halfway through animation, the star will be moved to the end of the animation automatically. And when I was trying to move the star less than halfway through animation, the star will be moved back to the previous position automatically And again you don’t need to code. It’s very Awesome! Anyway, if you want to change the behavior, you can change onTouchUp attribute in the transition tag.
- KeyAttributes Transition Timeline frame 0 - 100 เพิ่มขนาด icon star เป็น feature นึงใน motion layout ที่ผมชอบมาก ใน transition timeline เรามี frame ที่ 0-100 เนอะ ทีนี้ ระหว่างทาง 0-100 เนี่ยเราสามารถแก้รูปร่างหน้าตาของ views ในระหว่างนี้ได้ เช่น ณ frame ที่ 50 เราต้องการแก้ขนาดของ view ให้ใหญ่ขึ้น สองเท่า หรือเปลี่ยนสี ============================================ KeyFrameSets is my favorite feature in motion layout This allows you to change view’s attributes at the particular point of the transition And it basically assumes that like a timeline of events are happening So, you can assume that at points 0 we are starting our transition and at points 100 is end of our transition So, that is sort of frame positions that we have And now what I want to do in my animation At 50% of my animation I want to scale up the star icon 5 times bigger
- ในเคสนี้สมมติว่าผมอยากเพิ่มขนาดของ star ให้ใหญ่ขึ้น ณ frame ที่ 50 Icon star เนี่ยมันค่อยๆขยายตัวเองใหญ่ๆ ใหญ่ขึ้น ไปจนถึงขนาดที่เรา set ไว้ ณ frame เรากำหนดด้วย ซึ่งก็คือ frame ที่ 50 แล้วหลังจากนั้น มันก็ค่อยๆเล็กลง กลับไปสู่ขนาดปกติ ณ frame ที่ 100 วิธีที่ทำให้มันใหญ่ขึ้นก็คือผม set ค่า scaleX และ Y ให้มันใหญ่ขึ้น 5 เท่า ============================================ This the animation look like, when I applied key attributes to the star icon The key attributes said at the frame 50, I want the star icon transform it self to be 5 time bigger than frame 0. And at the end of the transition the star icon will transformed to the normal size.
- อันนี้ผมลองเพิ่มลูกเล่นนิดคือ ให้ดาวมันหมุนไปด้วย มันจะค่อยๆใหญ่ขึ้นและหมุนไปด้วย ตามค่าที่เรา set เซตไว้ จนถึง frame ที่เรากำหนด หลังจากนั้นมันจะค่อยเล็กลงและหมุนกลับไปที่ค่าเริ่มต้น ณ frame 100 ============================================ In this slide, I added one more condition is that rotation 360 degrees at frame 50 You can see now in the slide the star icon is rotating to 360 degrees at frame 50 And frame 51 the star icon is rotating back And at the end of the transition, it turns to the normal state.
- Motion layout เหมาะกับงาน animation ที่ต้องมี user interaction Use MotionLayout when animating UI elements the user will interact with.
- มาถึงตรงนี้แล้วเนี่ย Motion layout มันจะมีข้อจำกัดนิดหน่อยคือ มันไม่สามารถใส่ animation ให้กับ nested layout มันสามารถจัดการกับวิวที่อยู่ภายใต้ Motion layout โดยตรงเท่านั้น =============================================================== You can only apply animation to direct children of Motion layout. You can’t apply animation to nested views. If you want to apply animation in the nested views you can just create another motion layout tag inside another motion layout tag. Or you can create another motion layout file and include it into another motion layout file.
- Code lab Principal, best practice of motion layout Oozou code on github Ok มาถึงตรงนี้ ถ้าใครที่อยากไปลองก็ลองทำ code lab หรืออยากรู้ว่า principal ของ motion layout best practice แล้วก็ตัวอย่างเพิ่มเติมได้ที่ link ตามนี้เลยน่ะครับ Link สุดท้ายคือเป็น code ของแอป oozou ที่โชว์ให้ดูในตอนต้นน่ะครับ =============================================================== If you want to code lab you can go to the first link. And if you want to learn more about principal and best practice of the motion layout, you can go for the second link. Third link you can found more sample projects from android website and you can download the code from them. And the last one is the oozou app, I have shown you before, you can checkout if you’re interested.
- ขอบคุณมาฟัง session น่ะครับ ถ้าอยากคุยเพิ่มเติม หรืออยากแลกเปลี่ยน ไอเดีย ก็สามารถมาหาพวกเราได้ที่ Booth ข้างหน้าห้องนี้ได้เลยน่ะครับ ขอบคุณคร้าบ…... =============================================================== Thank you everyone for joining us If you have any more questions You can find us at our booth right in front of this room Bye. no coding (Echo)