Android Transition - Speaker Deck

Android Transition

by takahirom

Slide 1

Slide 1 text

"OESPJE5SBOTJUJPO UBLBIJSPN !OFX@SVOOBCMF

Slide 2

Slide 2 text

荈䊹稱➜ ˖ UBLBIJSPNהְֲせ⵸ד2JJUBהַ剅ְגְתׅկ ˖ %SPJE,BJHJחג  ˑ)PXUPJNQMFNFOU.BUFSJBM%FTJHO"OJNBUJPO˒ד 涪邌׃תׅ 勻גי

Slide 3

Slide 3 text

5SBOTJUJPOהכ ˖ BOESPJEUSBOTJUJPO5SBOTJUJPOؙٓأ ˖ 醱侧ך4DFOFהְֲٖ؎،ؐز⽃⡘ח㼎׃גծ  ،صً٦ءّٝ׾⡲׏גֻ׸׷

Slide 4

Slide 4 text

5SBOTJUJPOהכ ˖ ًٔحز ˖ ֿ׸׾갹䓸׷הְ׹׿זوذٔ،ٕرؠ ؎ٝך،صً٦ءָّٝ㹋鄲דֹ׷  ̔(PPHMFךوذٔ،ٕرؠ؎ٝך⿫罋㹋鄲ך1MBJEד׮׋ֻׁ׿ⵃ欽ׁ׸גְ׷ ˖ "1*-FWFM "OESPJE ˖ 4VQQPSU-JCSBSZד׮⢪ִ׷״ֲחז׏׋ך ד"1*-FWFM תד⢪ִ׷  植朐駈׶זְ堣腉ָⶴה㢳ְ (PPHMFͷ044 1MBJEΞϓϦΑΓ

Slide 5

Slide 5 text

5SBOTJUJPOך珏겲 ˖ ⽃♧ך5SBOTJUJPO ˖ 'BEF鷲僇䏝ך،صً٦ءָّٝדֹ׷ ˖ $IBOHF#PVOET7JFXך⹛ֹה7JFXך㣐ֹׁךٔ؟؎ؤ ˖ זוזו ˖ 5SBOTJUJPO4FUְֻ̔אַろ׭׵׸׷ ˖ "VUP5SBOTJUJPO⡦׮5SBOTJUJPO׾䭷㹀׃זְ儗ךرؿٕؓزך 5SBOTJUJPOկ$IBOHF#PVOETה'BEFָろת׸גְ׷ ˖ $VTUPN5SBOTJUJPO荈ⴓד㹀纏׃׋5SBOTJUJPO

Slide 6

Slide 6 text

5SBOTJUJPOך⡲䧭倯岀 ɾίʔυ͔Βੜ੒ final Transition transition = new ChangeBounds() .setDuration(350) .setInterpolator(new FastOutSlowInInterpolator()); ˖ YNMַ׵欰䧭 Transition transition = TransitionInflater .from(context) .inflateTransition(R.transition.change_bounds); // res/transition/change_bounds.xml

Slide 7

Slide 7 text

5SBOTJUJPO׾ؕأةو؎ؤ ˖ 5SBOTJUJPOBEE5BSHFU 7JFXװJEזו   ،صً٦ءّׅٝ׷7JFX׾せ⵸זודⵖꣲׅ׷ ˖ 5SBOTJUJPOTFU1BUI.PUJPOזו׾⢪ִל嘴ⰼ䕎ך،صً٦ءّٝ ׮〳腉 "1*-FWFM ˖ ،صً٦ءّٝ禸ך%VSBUJPOװ*OUFSQPMBUPSזו׮♧鸐׶⢪ִ׷ ﬁnal Transition transition = new ChangeBounds() .setDuration(350) .setInterpolator(new FastOutSlowInInterpolator()); transition.setPathMotion(new ArcMotion());

Slide 8

Slide 8 text

5SBOTJUJPO׾ⵃ欽ׅ׷倯岀 ˖   ֿ׸ָ㛇劤ծ4DFOF׾ⴖ׶剏ִ׷ ˖ 5SBOTJUJPO.BOBHFSCFHJO%FMBZFE5SBOTJUJPO  ٖ؎،ؐزך㢌刿ד荈⹛ד،صً٦ءّٝ׾אֽ׷ ˖ 8JOEPX5SBOTJUJPO  4IBSFE&MFNFOU5SBOTJUJPO׮ֿ׸➙כֿ׸ָ㢳ְ ˖ 4DFOF׾⢪ֲ

Slide 9

Slide 9 text

4DFOF׾⢪ֲ ٖ؎،ؐزה秡➰ֽ׋TDFOF׾ⴖ׶剏ִ׷ך׫ TDFOF" TDFOF# MBZPVU@BYNM MBZPVU@CYNM 5SBOTJUJPO.BOBHFS HP TDFOF#

Slide 10

Slide 10 text

4DFOF׾⢪ֲ // Transition࡞੒ final Transition transition = TransitionInflater .from(context) .inflateTransition(R.transition.transition_arc); // TransitionΛར༻ͯ͠scene2ʹભҠ TransitionManager.go(arcScene1, transition); 鼂獳儗ח5SBOTJUJPO׾䭷㹀דֹ׷

Slide 11

Slide 11 text

5SBOTJUJPO׾ⵃ欽ׅ׷倯岀 ˖   ֿ׸ָ㛇劤 ˖   ٖ؎،ؐزך㢌刿ד荈⹛ד،صً٦ءّٝ׾אֽ׷ ˖ 8JOEPX5SBOTJUJPO  4IBSFE&MFNFOU5SBOTJUJPO׮ֿ׸➙כֿ׸ָ㢳ְ w 4DFOFΛ࢖͏ ˖ 5SBOTJUJPO.BOBHFSCFHJO%FMBZFE5SBOTJUJPO

Slide 12

Slide 12 text

5SBOTJUJPO.BOBHFSCFHJO%FMBZF E5SBOTJUJPO ˖ 5SBOTJUJPO׾䭷㹀ׇ׆חⵃ欽ׅ׷㜥さծ㛇劤涸ח⟃♴׌ֽד، صً٦ءّٝ⳿勻׷ 痥✳䒷侧ד䭷㹀〳腉   TransitionManager.beginDelayedTransition(mSceneRoot); // mSceneRoot಺ͷViewΛLayoutParamsΛ͍ͬͯ͡Ҡಈ͞ ͤΔ // params.addRule(…) mFirstButton.setLayoutParams(params);

Slide 13

Slide 13 text

5SBOTJUJPO.BOBHFSCFHJO %FMBZFE5SBOTJUJPO ˖ ➬穈׫ ˖ CFHJO%FMBZFE5SBOTJUJPOًاحسָㄎל׸׋儗׾剑ⴱך4DFOFה׃ծ ˖ ٖ؎،ؐزך㢌刿ד7JFXSFRVFTU-BZPVU ָㄎל׸׷ ˖ 如ח0O1SF%SBX-JTUFOFSPO1SF%SBX ָㄎל׸׋儗׾如ך4DFOFהׅ׷䠬ׄד㹋鄲ׁ ׸גְ׷ 㹋ꥷחכ4DFOFכ⢪׻זְ 5SBOTJUJPO.BOBHFSCFHJO %FMBZFE5SBOTJUJPO TDFOF 0O1SF%SBX-JTUFOFS PO1SF%SBX WJFXTFU-BZPVU1BSBNT TDFOF "VUP5SBOTJUJPO

Slide 14

Slide 14 text

5SBOTJUJPO.BOBHFSCFHJO %FMBZFE5SBOTJUJPO ˖ BOESPJEVJUPPMLJUEFNPT  IUUQTHJUIVCDPNHPPHMFBOESPJEVJUPPMLJUEFNPT ˖ ֿך؟ٝفٕ،فָٔ4VQQPSU-JCSBSZח״׏ג؟ٝفٕ 㹋鄲ׁ׸גְגֶׅׅ׭דׅկ

Slide 15

Slide 15 text

5SBOTJUJPO׾ⵃ欽ׅ׷倯岀 ˖   ֿ׸ָ㛇劤 ˖   ٖ؎،ؐزך㢌刿ד荈⹛ד،صً٦ءّٝ׾אֽ׷ ˖   4IBSFE&MFNFOU5SBOTJUJPO׮ֿ׸➙כֿ׸ָ㢳ְ ˖ 4DFOF׾⢪ֲ w 5SBOTJUJPO.BOBHFSCFHJO%FMBZFE5SBOTJUJPO w 8JOEPX5SBOTJUJPO

Slide 16

Slide 16 text

8JOEPX5SBOTJUJPO "1*-FWFM "OESPJE։ 㛇劤כ珏겲 ˖ ׋׌ך8JOEPX5SBOTJUJPO  "DUJWJUZך剑ⴱך朐䡾ַ׵ծ邌爙ׁ׸׋䖓ך朐䡾תד׾،صً٦ ءّٝ圫㶨 ➙㔐כⶴ䠥 ˖   ⵸ך"DUJWJUZַ׵Ⱏ鸐ך׮ך׾5SBOTJUJPOדֹ׷ w 4IBSFE&MFNFOU5SBOTJUJPO

Slide 17

Slide 17 text

4IBSFE&MFNFOU5SBOTJUJPO ɾࢦఆํ๏ ςʔϚʹΑΔࢦఆ @transition/ shared_element ίʔυʹΑΔࢦఆ activity.getWindow().setSharedElementEnterTransition(sharedEnter);

Slide 18

Slide 18 text

4IBSFE&MFNFOU5SBOTJUJPO ࣮૷ํ๏ৄࡉ

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

4IBSFE&MFNFOU5SBOTJUJPO ࣮૷ํ๏ৄࡉ

Slide 22

Slide 22 text

4IBSFE&MFNFOU5SBOTJUJPO ך➬穈׫ EFDPS7JFXOE/BNFE7JFXT TIBSFE&MFNFOUT דUSBOTJUJPO/BNFָאְ׋7JFX׾Ⰻג《׶⳿ׅ &OUFS5SBOTJUJPO$PPSEJOBUPS 植㖈ךٖ؎،ؐزך7JFXך⡘縧׾⥂㶷 "DUJWJUZ5SBOTJUJPO$PPSEJOBUPS "DUJWJUZ鼂獳ד床׏גֹ׋#VOEMFח״׶ծ⯋ךٖ؎،ؐزך⡘縧ד7JFXMBZPVU ׾ㄎן⳿ׅ "DUJWJUZ5SBOTJUJPO$PPSEJOBUPS 5SBOTJUJPO.BOBHFSCFHJO%FMBZFE5SBOTJUJPO ׾5SBOTJUJPO׾䭷㹀׃גㄎן⳿ׅ &OUFS5SBOTJUJPO$PPSEJOBUPS ⯋ך⥂㶷׃גְֶ׋7JFXך⡘縧ד7JFXMBZPVU ׾ㄎן⳿ׅ "DUJWJUZ5SBOTJUJPO$PPSEJOBUPS 5SBOTJUJPO.BOBHFSCFH JO%FMBZFE5SBOTJUJPO TDFOF ભҠݩͷ7JFXͷҐஔ 0O1SF%SBX-JTUFOFS PO1SF%SBX WJFXMBZPVU MFGU UPQ SJHIU CPUUPN TDFOF ભҠઌͷ7JFXͷҐஔ ࢦఆͨ͠5SBOTJUJPO WJFXMBZPVU MFGU UPQ SJHIU CPUUPN [ݺ͹ΕͨଆͷActivityͷ಺෦ͷॲཧ(API Level 25ͷίʔυΑΓ)] ؒҧ͍ͬͯͨΒίϝϯτ͍ͩ͘͞

Slide 23

Slide 23 text

ֿֿתדד⳿勻׷ֿה .BUFSJBM%FTJHOך$IPSFPHSBQIZ 䮶׶➰ֽ ָ 㹋鄲׃װֻׅז׷ ꟼ⤘䚍׾僇澗חׅ׷

Slide 24

Slide 24 text

ֿֿתדד⳿勻׷ֿה

Slide 25

Slide 25 text

$VTUPN5SBOTJUJPO 044ך(PPHMF1MBJE،فٔ״׶ ˖ 歗꬗鼂獳儗ך5SBOTJUJPO ˖ 'MPBUJOH"DUJPO#VUUPOך5SBOTJUJPO ˖ 嗚稊璞ך5SBOTJUJPO ̔%SPJE,BJHJדֶ鑧׃תׅ ׋ע׿

Slide 26

Slide 26 text

⿫罋项俱 ˖ "OJNBUJOH7JFXT6TJOH4DFOFTBOE5SBOTJUJPOTIUUQTEFWFMPQFSBOESPJEDPNUSBJOJOH USBOTJUJPOTJOEFYIUNM ˖ %FW#ZUFIUUQTXXXZPVUVCFDPNXBUDI GFBUVSFQMBZFS@FNCFEEFEW4)O+2B% ˖ ⹛ַׅ %FW'FTU,BOTBJ IUUQZBSBLJHJUIVCJPTMJEFTEFWGFTULBOTBJ JOEFYIUNM ˖ 5SBOTJUJPOTJOUIF"OESPJE4VQQPSU-JCSBSZIUUQTNFEJVNDPNHPPHMFEFWFMPQFST USBOTJUJPOTJOUIFBOESPJETVQQPSUMJCSBSZCDBEFGFTVIE ˖ BOESPJEVJUPPMLJUEFNPTIUUQTHJUIVCDPNHPPHMFBOESPJEVJUPPMLJUEFNPT ˖ 4VQQPSU-JCSBSZGPS5SBOTJUJPOT0WFSWJFXBOEDPNQBSJTPOXJUI5SBOTJUJPOT&WFSZXIFSF IUUQTNFEJVNDPN!BOELVMJLPWTVQQPSUMJCSBSZGPSUSBOTJUJPOTPWFSWJFXBOE DPNQBSJTPODCFDGDCVED[ONVZ