Musicアプリのトランジションを再現する

iOSDC Japan 2018/8/31 TrackC 15:10~15:40

Transcript

1. .VTJDΞϓϦͷ
   τϥϯδγϣϯΛ࠶ݱ͢Δ
   ,":"$ٕज़෦
   ,B[VNBTB/"("%0
   J04%$+BQBO5SBDL$d
   JPTEDDے೑ΤϯδχΞ
   
   
   

   View Slide

2. /BNF,B[VNBTB/"("%0
   8PSL,":"$d
   5XJUUFS!L[NTOHE
   /1$+/FX(FOFSBUJPO$MBTTJD
   1IZTJRVF/PWJDFDN
   
   
   1SPpMF
   

   View Slide

3. ࠓ೔͔Βग़དྷΔےංେΫΠζ
   2 τϨʔχϯά࣌ؒ͸୹͍΄͏͕ྑ͍ʁ
   ௕͍΄͏͕ྑ͍ʁ
   

   View Slide

4. ࠓ೔͔Βग़དྷΔےංେΫΠζ
   " τϨʔχϯά࣌ؒ͸୹͍΄͏͕ྑ͍
   ɹˠʙ෼͘Β͍͕ͪΐ͏Ͳ͍͍ͱ͞Ε͍ͯΔ
   τϨʔχϯά͕࣌ؒ௕͍ͱʜ
   ɾے෼ղ͕ਐΈ͗ͯ͢͠·͏
   ɹˠے෼ղΛଅਐ͢ΔͱݴΘΕ͍ͯΔίϧνκʔϧ͕૿Ճ͢Δ
   ɾΦʔόʔτϨʔχϯάʹͳΔ
   ɹˠճ෮͕௥͍͔ͭͳ͘ͳΔ
   ɾूதྗ͕อͯͳ͍
   ɹˠոզͷϦεΫ
   

   View Slide

5. 
   
   ˎJ5VOFT"QQ4UPSF
   IUUQTJUVOFTBQQMFDPNKQBQQMPCJϩϏʔJE NU
   ˎ"OESPJE
   IUUQTQMBZHPPHMFDPNTUPSFBQQTEFUBJMT JEDPNLBZBDOBLBNBQIMKB
   ˎ8FC൛
   IUUQTXFCMPCJDP
   ήʔϜ߈ུνϟοτ4/4
   -PCJ
   

   View Slide

6. Ϟʔμϧʹ͍ͭͯ
   
   
   

   View Slide

7. 
   
   Ϟʔμϧͱ͸
   8IFOBNPEBMWJFXBQQFBSTPOTDSFFO UIFVTFSNVTUNBLF
   BDIPJDFCZUBQQJOHBCVUUPOPSPUIFSXJTFFYJUJOHUIF
   NPEBMFYQFSJFODF
   "QQMF)VNBO*OUFSGBDF(VJEFMJOF.PEBMJUZΑΓ
   

   View Slide

8. 
   
   Ϟʔμϧͱ͸
   ϞʔμϧϏϡʔ͸ɺҰ࣌తͳঢ়ଶʢϞʔυʣΛ࡞ͬͯ
   ಛఆͷΞΫγϣϯΛϢʔβʔʹଅ͢ɻ
   ˠ͍ͭͰ΋લͷঢ়ଶɾը໘ʹ໭ΕΔ͜ͱ͕
   Θ͔Δ6*͕ٻΊΒΕΔ
   

   View Slide

9. 
   
   Ϟʔμϧͷྫ
   ϑϧεΫϦʔϯ
   

   View Slide

10. 
    
    Ϟʔμϧͷྫ
    Ξϥʔτܕ
    

    View Slide

11. 
    
    Ϟʔμϧͷྫ
    .VTJDͷϞʔμϧϏϡʔ
    

    View Slide

12. 
    
    Ϟʔμϧͷྫ
    ϛϡʔδοΫϓϨΠϠʔ
    ˠΠϯλϥΫςΟϒʹ։ด
    ˠԻָͷ࠶ੜͱݕࡧ͕ಉ࣌ʹͰ͖Δ
    

    View Slide

13. 
    
    Ϟʔμϧͷྫ
    ΠϯλϥΫςΟϒͳཁૉ
    ˎഎܠը໘ͷଘࡏ
    ˎεϫΠϓͷྔʹԠͨ͡
    ɹϞʔμϧϏϡʔͷτϥϯδγϣϯ
    ˎϞʔμϧϏϡʔ্෦ͷ
    ɹόλϑϥΠϋϯυϧ
    

    View Slide

14. 
    
    ࣮ݱ͍ͨ͜͠ͱ
    

    View Slide

15. 
    
    ࣮ݱ͍ͨ͜͠ͱ
    -PCJͷಛ௃
    ήʔϜʹಛԽͨ͠ίϛϡχςΟ
    

    View Slide

16. 
    
    ࣮ݱ͍ͨ͜͠ͱ
    ήʔϜΛ͕͢͞ը໘ΛϦχϡʔΞϧ
    

    View Slide

17. 
    
    ࣮ݱ͍ͨ͜͠ͱ
    ᶃؾʹͳΔήʔϜ΍͓ؾʹೖΓͷήʔϜΛ͕͢͞
    .VTJDΞϓϦͷΑ͏ʹɺΠϯλϥΫςΟϒͳ
    ϞʔμϧϏϡʔʹ͍ͨ͠
    ᶄήʔϜͷίϛϡχςΟ΍ίϯςϯπΛ͕͢͞
    ϝΠϯίϯςϯπ
    

    View Slide

18. 
    
    ࣮ݱ͍ͨ͜͠ͱ
    

    View Slide

19. 
    
    ࣮ݱ͍ͨ͜͠ͱ
    ϞʔμϧϏϡʔτϥϯδγϣϯ
    ΠϯλϥΫςΟϒͳτϥϯδγϣϯ
    6*5BCMF7JFX6*4FBSDI$POUSPMMFS
    ֎෦ϥΠϒϥϦΛ࢖ΘͣʹɺͰ͖Δ͚ͩγϯϓϧɾ࠷௿ݶͷ
    ࣮૷Ͱ΍Γ͍ͨ
    

    View Slide

20. 
    
    αϯϓϧίʔυ
    IUUQTHJUIVCDPNL/BHBEPV.PEBM1SFTFOUBUJPO$VTUPN
    ্ख͍͔͘ͳͯ͘ϋϚͬͨύλʔϯ΋͋Γ·͢
    

    View Slide

21. 
    
    ΠϯλϥΫςΟϒͳτϥϯδγϣϯ
    ࣮ݱ·Ͱͷεςοϓ
    ̍ɼϞʔμϧτϥϯδγϣϯΛ࣮૷
    ̎ɼΞχϝʔλʔΦϒδΣΫτΛ࣮૷
    ̏ɼΠϯλϥΫςΟϒΞχϝʔλʔΦϒδΣΫτΛ࣮૷
    

    View Slide

22. 
    
    ϞʔμϧϏϡʔτϥϯδγϣϯ
    ϞʔμϧτϥϯδγϣϯΛ༗ޮʹ͢Δ
    αϯϓϧίʔυɿ7JFX$POUSPMMFSN
    6*.PEBM1SFTFOUBUJPO$VTUPNΛ7$ʹηοτ͢Δ
    

    View Slide

23. 
    
    ϞʔμϧϏϡʔτϥϯδγϣϯ
    ϞʔμϧϏϡʔͷഎ໘ʹӨΛ෇͚Δ
    αϯϓϧίʔυɿ7JFX$POUSPMMFSN
    6*1SFTFOUBUJPO$POUSPMMFSͷαϒΫϥεΛ࡞੒͠ɺ
    USBOTJUJPO%FMFHBUFͰฦ͢
    ˠ࣮૷͍ͯ͠ͳ͍ͱɺඪ४ͷ6*1SFTFOUBUJPO$POUSPMMFS͕ར༻
    ͞ΕΔɻ
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJWJFXDPOUSPMMFSUSBOTJUJPOJOHEFMFHBUF
    QSFTFOUBUJPODPOUSPMMFSGPSQSFTFOU MBOHVBHFPCKD
    

    View Slide

24. 
    
    ϞʔμϧϏϡʔτϥϯδγϣϯ
    ϞʔμϧϏϡʔͷഎ໘ʹӨΛ෇͚Δ
    αϯϓϧίʔυɿ7JFX$POUSPMMFSN
    6*1SFTFOUBUJPO$POUSPMMFSͷαϒΫϥεΛ࡞੒͠ɺ
    USBOTJUJPO%FMFHBUFͰฦ͢
    ˠ࣮૷͍ͯ͠ͳ͍ͱɺඪ४ͷ6*1SFTFOUBUJPO$POUSPMMFS͕ར༻
    ͞ΕΔɻ
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJWJFXDPOUSPMMFSUSBOTJUJPOJOHEFMFHBUF
    QSFTFOUBUJPODPOUSPMMFSGPSQSFTFOU MBOHVBHFPCKD
    

    View Slide

25. 
    
    ΠϯλϥΫςΟϒͳτϥϯδγϣϯ
    ΞχϝʔλʔΦϒδΣΫτΛ࣮૷͢Δ
    αϯϓϧίʔυɿ$VTUPN.PEBM"OJNBUPSN I
    
    6*7JFX$POUSPMMFS"OJNBUFE5SBOTJUJPOJOHϓϩτίϧ
    

    View Slide

26. 
    
    ΠϯλϥΫςΟϒͳτϥϯδγϣϯ
    ΞχϝʔλʔΦϒδΣΫτΛ࣮૷͢Δ
    αϯϓϧίʔυɿ$VTUPN.PEBM"OJNBUPSN I
    
    JT1SFTFOUJOH
    QSFTFOUͱEJTNJTTͷΞχϝʔγϣϯΛ
    ࢖͍෼͚ΔͨΊͷϑϥά
    

    View Slide

27. 
    
    ΠϯλϥΫςΟϒͳτϥϯδγϣϯ
    ΠϯλϥΫςΟϒΞχϝʔλʔΦϒδΣΫτΛ࣮૷͢Δ
    αϯϓϧίʔυɿ
    %SBHHBCMF1FSDFOU%SJWFO*OUFSBDUJWF5SBOTJUJPON I
    
    6*1FSDFOU%SJWFO*OUFSBDUJWF5SBOTJUJPOͷαϒΫϥε
    

    View Slide

28. 
    
    ΠϯλϥΫςΟϒͳτϥϯδγϣϯ
    ΠϯλϥΫςΟϒΞχϝʔλʔΦϒδΣΫτΛ࣮૷͢Δ
    αϯϓϧίʔυɿ
    %SBHHBCMF1FSDFOU%SJWFO*OUFSBDUJWF5SBOTJUJPON I
    
    ϞʔμϧϏϡʔʹύϯδΣενϟʔΛ௥Ճ
    εϫΠϓྔʹԠͯ͡ɺϞʔμϧϏϡʔͷEJTNJTTΞχϝʔ
    γϣϯΛਐΊΔ
    

    View Slide

29. 
    
    ΠϯλϥΫςΟϒͳτϥϯδγϣϯ
    ΠϯλϥΫςΟϒΞχϝʔλʔΦϒδΣΫτΛ࣮૷͢Δ
    αϯϓϧίʔυɿ
    %SBHHBCMF1FSDFOU%SJWFO*OUFSBDUJWF5SBOTJUJPON I
    
    EJTBCMF*OUFSBDUJWF5SBOTJUJPO
    ΠϯλϥΫςΟϒτϥϯδγϣϯͷແޮϑϥά
    ˠύϯδΣενϟʔΛೝࣝͨ͠৔߹ͷΈΠϯλϥΫςΟϒ
    τϥϯδγϣϯΛ༗ޮʹ͢ΔͨΊ
    

    View Slide

30. 
    
    6*5BCMF7JFX6*4FBSDI$POUSPMMFS
    ΧελϜͷϞʔμϧϏϡʔͰ
    6*5BCMF7JFX6*4FBSDI$POUSPMMFS
    ͷ૊Έ߹ΘͤΛར༻͠Α͏ͱͨ͠ͱ͜ΖɺࢥΘ͵མͱ͕݀͠ɻ
    

    View Slide

31. 
    
    6*5BCMF7JFX6*4FBSDI$POUSPMMFS
    མͱ݀̍͠
    ϞʔμϧϏϡʔͷࠨӈʹϚʔδϯΛ෇͚Α͏ͱ͢Δ
    J04Ͱ6*4FBSDI$POUSPMMFS6*4FBSDI#BS͕
    ্ʹͣΕΔ
    

    View Slide

32. 
    
    6*5BCMF7JFX6*4FBSDI$POUSPMMFS
    མͱ݀̎͠
    "OJNBUPSͰϞʔμϧϏϡʔͷGSBNFΛม͑Α͏ͱ͢Δ
    ʢྫ͑͹ɺ೚ҙͷZʹϞʔμϧϏϡʔΛදࣔ͢ΔɺͳͲʣ
    ˠJ04Ͱ6*4FBSDI$POUSPMMFS6*4FBSDI#BS͕ͣΕΔ
    

    View Slide

33. 
    
    6*5BCMF7JFX6*4FBSDI$POUSPMMFS
    ͍Ζ͍ΖͱϞʔμϧϏϡʔΛΧελϚΠζ͠Α͏ͱ͢Δͱɺ
    6*4FBSDI$POUSPMMFS͕࢖͍ͮΒ͘ͳ͍ͬͯ͘ʜ
    

    View Slide

34. 
    
    6*5BCMF7JFX6*4FBSDI$POUSPMMFS
    6*5BCMF7JFX6*4FBSDI#BS6*4FBSDI#BS%FMFHBUF
    ͱ͍͏ख΋͋Δɻ
    ˠͲͷམͱ݀͠ύλʔϯͰ΋ɺ
    6*4FBSDI#BSͳΒਖ਼͘͠දࣔͰ͖ͦ͏
    

    View Slide

35. 
    
    ·ͱΊ
    

    View Slide

36. 
    
    ΠϯλϥΫςΟϒτϥϯδγϣϯ
    ࣮ݱ·Ͱͷεςοϓ
    ̍ɼϞʔμϧτϥϯδγϣϯΛ࣮૷
    6*.PEBM1SFTFOUBUJPO$VTUPN
    USBOTJUJPO%FMFHBUF
    6*1SFTFOUBUJPO$POUSPMMFSͷαϒΫϥε
    ̎ɼΞχϝʔλʔΦϒδΣΫτΛ࣮૷
    6*7JFX$POUSPMMFS"OJNBUFE5SBOTJUJPOJOHΛ࣮૷
    ̏ɼΠϯλϥΫςΟϒΞχϝʔλʔΦϒδΣΫτΛ࣮૷
    6*1FSDFOU%SJWFO*OUFSBDUJWF5SBOTJUJPOͷαϒΫϥε
    

    View Slide

37. 
    
    ΧελϜϞʔμϧϏϡʔͰ6*4FBSDI$POUSPMMFSΛ࢖͏৔߹͸
    গ͠޻෉͕ඞཁ͔΋͠Εͳ͍
    ˠఘΊͯɺ6*4FBSDI#BSͰ࣮૷ͯ͠͠·͏ͷ΋ΞϦͩͱࢥ͏
    

    View Slide

38. 
    
    J04ɺ"OESPJEɺͳͲͳͲ
    ΤϯδχΞઈࢍืूதʂ
    

    View Slide

39. 
    
    ߹ಉτϨʔχϯά΋ઈࢍืूதʂ
    

    View Slide

40. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide

41. Ҿ༻ɾࢀߟ
    <>IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFTJPTBQQ
    BSDIJUFDUVSFNPEBMJUZ
    <>IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJU
    VJWJFXDPOUSPMMFSUSBOTJUJPOJOHEFMFHBUF MBOHVBHFPCKD
    <>IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJU
    VJWJFXDPOUSPMMFSBOJNBUFEUSBOTJUJPOJOH MBOHVBHFPCKD
    <>IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJU
    VJWJFXDPOUSPMMFSJOUFSBDUJWFUSBOTJUJPOJOH MBOHVBHFPCKD
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJQSFTFOUBUJPODPOUSPMMFS
    MBOHVBHFPCKD
    <>IUUQTEFWFMPQFSBQQMFDPNKQEPDVNFOUBUJPOGFBUVSFEBSUJDMFT
    7JFX$POUSPMMFS1(GPSJ1IPOF04$VTUPNJ[JOHUIF5SBOTJUJPO"OJNBUJPOT
    $VTUPNJ[JOHUIF5SBOTJUJPO"OJNBUJPOTIUNMBQQMF@SFGEPDVJE51
    $)48
    <>IUUQTOPUFNVVTBHJNBSVNBOODDFD
    
    
    

    View Slide