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
1.2k
How to Motion Editor - Report from Android Dev Summit 2019
mochico
November 15, 2019
Tweet
Share
More Decks by mochico
See All by mochico
Invitation for modern Android UI development - Basic of Jetpack Compose
mochico
1
140
Title : Let's Preview! Jetpack Compose
mochico
2
1.1k
Build app fast on Android Studio 4.+
mochico
0
1.5k
Google I/O 2019 WAIWAI Reporting Session Overview
mochico
0
29
Report of Firebase Summit 2018
mochico
1
2.1k
Kotlin Fest 2018 わいわい報告会 / mochicoroutines
mochico
0
160
start from Convert to Kotlin
mochico
2
8.4k
introduce Material Theming ~practice~
mochico
1
1.2k
introduce Material Theming from Google IO 2018
mochico
4
3.8k
Other Decks in Technology
See All in Technology
Periodic Multi-Agent Path Planning
hziwara
0
120
Logbii(ログビー) 会社紹介
logbii
0
170
S3とCloudWatch Logsの見直しから始めるコスト削減 / Cost saving S3 and CloudWatch Logs
shonansurvivors
0
270
JAWS-UG 横浜 #54 資料
takakuni
0
220
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
250
NGINXENG JP#2 - 3-NGINX Plus・プロダクトのアップデート
hiropo20
0
250
KyvernoとRed Hat ACMを用いたマルチクラスターの一元的なポリシー制御
ry
0
230
もし本番ネットワークをまるごと仮想環境に”コピー”できたらうれしいですか? / janog51
corestate55
0
390
創業1年目のスタートアップでAWSコストを抑えるために取り組んでいること / How to Keep AWS Costs Down at a Startup
yuj1osm
3
2.2k
SSMパラメーターストアでクロススタック参照の罠を回避する
shuyakinjo
0
7.9k
cdk deployに必要な権限ってなんだ?
kinyok
0
190
岐路に立つ若手がAmazonianの仕事術を学んできました / learning amazonian productivity hacks as a junior engineer
yayoi_dd
0
160
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Designing for humans not robots
tammielis
245
24k
Building an army of robots
kneath
301
40k
Building Applications with DynamoDB
mza
85
5k
Practical Orchestrator
shlominoach
178
8.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Code Reviewing Like a Champion
maltzj
508
38k
Typedesign – Prime Four
hannesfritz
34
1.5k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
Done Done
chrislema
178
15k
Scaling GitHub
holman
453
140k
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!