Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
How to Motion Editor - Report from Android Dev Summit 2019
mochico
November 15, 2019
Technology
3
940
How to Motion Editor - Report from Android Dev Summit 2019
mochico
November 15, 2019
Tweet
Share
More Decks by mochico
See All by mochico
mochico
0
330
mochico
0
18
mochico
1
970
mochico
0
130
mochico
3
6.8k
mochico
1
1k
mochico
4
3.5k
mochico
2
430
mochico
6
6.4k
Other Decks in Technology
See All in Technology
hirosys
0
150
kenya888
1
140
clustervr
0
210
opdavies
0
1.6k
hhiroshell
9
510
k1low
1
440
ganariya
0
310
sylk
0
230
redhatopenshift
0
610
hgsgtk
4
960
kraj
0
5.2k
yoshiki0705
0
330
Featured
See All Featured
chriscoyier
499
130k
iamctodd
17
1.9k
tmm1
61
8.5k
trallard
13
650
tenderlove
52
3.4k
colly
187
14k
deanohume
295
27k
addyosmani
1348
190k
morganepeng
92
14k
brianwarren
83
4.7k
addyosmani
494
110k
edds
56
9.3k
Transcript
How to Motion Editor Report from Android Dev Summit 2019
@mochico
About me mochico(@_mochicon_) Android / Java / Kotlin Techbooster /
技術書典
Memory of Android Dev Summit 2019
What's New in Android Studio Design Tools https://youtu.be/vqDwSK5t7Hk?t=1172
What is Motion Editor
What is the MotionLayout Subclass of ConstraintLayout Define motions by
XML Included in ConstraintLayout2.0
How to use Motion Editor
Prepare to use Motion Editor Android Studio 4.0+ implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta3'
classpath 'com.android.tools.build:gradle:4.0.0-alpha03'
None
layout.xml <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/fragment_first_scene" tools:context=".FirstFragment">
fragment_first_scene.xml <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <KeyFrameSet> </KeyFrameSet>
</Transition> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
Motion Scene
None
start to end
None
Action Icons Create ConstraintSet Create Transition Create Handler
Create from Action Icons
Create Handler <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <OnClick motion:targetId="@+id/imageButton" /> </Transition>
None
KeyFrames KeyPosition KeyAttribute KeyTrigger KeyCycle KeyTimeCycle
KeyCycle <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <KeyFrameSet> <KeyCycle motion:motionTarget="@+id/imageButton" motion:framePosition="0" motion:wavePeriod="1"
android:scaleX="0.3" motion:waveOffset="1" />
Selection Panel
None
Attributes Select Transition Select KeyFrame
demo (if I can)
Wrap up Motion Editor Cool visualization for KeyFrames Not for
CoordinatorLayout, DrawerLayout etc Easy to add properties for animation as XML AS4.0 still canary, Motion Editor still beta
References What's New in Android Studio Design Tools (Android Dev
Summit '19) - YouTube : https:// www.youtube.com/watch?v=vqDwSK5t7Hk Defining motion paths in MotionLayout - Google Developers - Medium : https://medium.com/ google-developers/defining-motion-paths-in-motionlayout-6095b874d37 Manage motion and widget animation with MotionLayout : https://developer.android.com/ training/constraint-layout/motionlayout googlearchive/android-ConstraintLayoutExamples: Migrated: : https://github.com/googlearchive/ android-ConstraintLayoutExamples Animation with MotionLayout : https://codelabs.developers.google.com/codelabs/motion- layout/#0 DroidKaigi 2019 - Deep dive into MotionLayout / thagikura, John Hoford, Nicolas Roard - YouTube : https://www.youtube.com/watch?v=r8cYDlBOPaA Thank you!