$30 off During Our Annual Pro Sale. View Details »

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

kNagadou
August 31, 2018

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

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

kNagadou

August 31, 2018
Tweet

More Decks by kNagadou

Other Decks in Programming

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