Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Appleのアニメーション.pdf

Marina Nakagawa
September 02, 2018
28

 Appleのアニメーション.pdf

Marina Nakagawa

September 02, 2018
Tweet

More Decks by Marina Nakagawa

Transcript

  1. 1
    AppleͷΞχϝʔγϣϯ͸ͳͥඒ͍͠ͷ͔ߟ͑Δ
    ~ίϯτϩʔϧηϯλʔͷ؍࡯~
    ೔ຊܦࡁ৽ฉࣾɹத઒ ສᣦಸ
    iOSDC2018
    AppleͷΞχϝʔγϣϯ͸ͳͥඒ͍͠ͷ͔ߟ͑Δ

    ίϯτϩʔϧηϯλʔͷ؍࡯Λൃද͠·͢

    View Slide

  2. 2
    Marina Nakagawa
    @marina10172013(·Γʔͳ)
    ೔ຊܦࡁ৽ฉࣾͷiOSΤϯδχΞ
    ిࢠ൛ΞϓϦɼࢴ໘ϏϡʔΞʔΞϓϦͷ։ൃ
    Adobe੡඼޷͖Ͱ͢
    ͸͡Ί·ͯ͠೔ຊܦࡁ৽ฉࣾͰΤϯδχΞͯ͠·͢த઒Ͱ͢

    ೔ܦ৽ฉͷిࢠ൛ΞϓϦͱࢴ໘ϏϡʔΞʔΛ࡞͍ͬͯ·͢

    ΤϯδχΞΛ͸͡Ίͯ̍೥൒Ͱ͢

    Adobe੡඼΋޷͖Ͱ͢

    ͜͜ʹొஃ͢Δͷࡢ೥͔Βͷ໨ඪͩͬͨͷͰ΄Μͱʹخ͍͠Ͱ͢

    ΑΖ͓͘͠Ͷ͕͍͠·͢

    View Slide

  3. 3
    AppleͷΞχϝʔγϣϯͬͯඒ͍͠ɾɾɾ
    ಥવͰ͕͢

    AppleͷΞχϝʔγϣϯͬͯඒ͍͠Ͱ͢ΑͶɾɾɾ

    ;ͩΜ౰ͨΓલͷΑ͏ʹ࢖͍ͬͯΔ iPhone ΍ iPadɺͲ͏ͯ͜͠Μͳʹؾ࣋ͪͷ͍͍࢖͍৺஍ʹͳΔͷ͔ؾʹͳΓ·ͨ͠

    View Slide

  4. 4
    iOS10 iOS11
    iOS11ΑΓେ͖͘ίϯτϩʔϧηϯλʔ͕มΘͬͨ
    ͜͜Ͱ஫໨ͨ͠ͷ͕ίϯτϩʔϧηϯλʔͰ͢

    iOS11ΑΓ͢΂ͯͷػೳΛҰͭͷ΢Οϯυ΢ʹ·ͱΊɺ

    Ի੠΍ը໘ͷ໌Δ͞ͳͲΞϓϦΛ্ཱͪ͛ͳͯ͘΋ɺ؆୯ʹૢ࡞Ͱ͖ΔΑ͏ʹมߋ͞Ε·ͨ͠ɻ

    View Slide

  5. 5
    Ի੠΍ը໘ͷ໌Δ͞
    ΞϓϦΛ্ཱͪ͛ͳͯ͘΋ɺखܰʹૢ࡞Ͱ͖Δ
    ͭ·Γมߋ͕ߦΘΕͨͱ͍͏͜ͱ͸ͦΕ͚ͩधཁ͕͋ͬͨͱ͍͏͜ͱͰ͢ΑͶ

    View Slide

  6. 6
    ίϯτϩʔϧηϯλʔ͸࢖͍উख΍৮Γ৺஍ʹରͯ͠
    Ұ൪ؾΛ࢖ͬͨͱ͜ΖͳͷͰ͸ɾɾɾʁ
    ͦ͜Ͱࢲ͸ɺApple͕࢖͍উख΍৮Γ৺஍ʹରͯ͠Ұ൪ؾΛ࢖ͬͨͱ͜ΖͰ͸ͳ͍͔ͱߟ͑ɺ

    View Slide

  7. 7
    ίϯτϩʔϧηϯλʔ͸࢖͍উख΍৮Γ৺஍ʹରͯ͠
    Ұ൪ؾΛ࢖ͬͨͱ͜ΖͳͷͰ͸ɾɾɾʁ
    ΞχϝʔγϣϯͱϞʔγϣϯΤϑΣΫτΛ
    ؍࡯ͯ͠ΈΑ͏ʂ
    ࠓճண໨ͯ͠ΞχϝʔγϣϯΛ؍࡯͢Δ͜ͱʹ͠·ͨ͠

    View Slide

  8. 8
    ຊ೔࿩͢͜ͱ
    iOSͷAnimationͷ໾ׂ
    ΞχϝʔγϣϯͱϞʔγϣϯΛ؍࡯͢Δ
    1
    2
    Appleͷ໨ࢦ͢ํ޲ͱ͸
    3
    ຊ೔͓࿩͢Δ͜ͱ͸Լه̏ͭͷςʔϚͰ͢

    View Slide

  9. 9
    iOSͷAnimationͷ໾ׂ
    1
    ·ͣ͸ϞʔγϣϯΛղੳ͢Δલʹ

    iOSͷAnimationͷ໾ׂΛ֬ೝ͢ΔͨΊ

    Human Interface GuidelineͷAnimationΛݟ͓͖ͯ·͠ΐ͏

    View Slide

  10. 10
    AppleͷHGIͷAnimetionΑΓ
    Human Interface GuidelineͷAnimationΑΓҾ༻
    υΩϡϝϯτʹ͸͜ͷΑ͏ʹ঺հ͞Ε͍ͯ·͢

    View Slide

  11. 11
    ҰݴͰݴ͏ͱ
    ΞχϝʔγϣϯͰϢʔβʔͱίϯςϯπΛͭͳ͗·͠ΐ͏
    ҰݴͰݴ͏ͱɹΞχϝʔγϣϯͰϢʔβʔͱίϯςϯπΛͭͳ͗·͠ΐ͏ͱ͍͏͜ͱͰ͢

    View Slide

  12. 12
    ΞχϝʔγϣϯͱϞʔγϣϯΛ؍࡯͢Δ
    2
    ͦΕͰ͸؍࡯Λ࢝Ί·͠ΐ͏


    View Slide

  13. Ϣʔβʔͷಈ͖ʹԠ͡ΔϞʔγϣϯ
    ยखͰ࢖͍΍͍͢ઃܭ
    ࢹࠩޮՌΛ֦ு͢Δख๏
    13
    ஈ֊Ͱࣔ͢
    ϞʔγϣϯΛղੳͯ͠Θ͔ͬͨ͜ͱΛ̐ͭͷ෼໺ʹ෼ྨͨ͠ΜͰ͕͢

    ࣌ؒͷ౎߹্ຊ೔͸

    View Slide

  14. Ϣʔβʔͷಈ͖ʹԠ͡ΔϞʔγϣϯ
    ยखͰ࢖͍΍͍͢ઃܭ
    ࢹࠩޮՌΛ֦ு͢Δख๏
    14
    ஈ֊Ͱࣔ͢
    ͪ͜Β͚ͩ঺հ͠·͢

    ຊ೔ͷొஃࢿྉͱͱ΋ʹ࢒Γͷ಺༰΋twitterͰެ։͢ΔͷͰؾʹͳͬͨํ͸ݟͯΈ͍ͯͩ͘͞

    View Slide

  15. 15
    ࢹࠩޮՌΛ֦ு͢Δख๏
    ࢹࠩޮՌΛ֦ு͢Δख๏ʹ͍ͭͯ঺հ͠·͢

    View Slide

  16. 16
    ίϯτϩʔϧηϯλʔͷग़͠ೖΕΛղੳ
    ͪ͜ΒͷίϯτϩʔϧηϯλʔΛ։͍ͯด͡ΔಈըΛ࿥ըͯ͠εϩʔʹͯ͠

    View Slide

  17. 17
    AfterEffectsͰτϨʔεͯ͠ཁૉΛ෼ղ͠·ͨ͠
    AfterEffectsͰಈըͷUIτϨʔεΛߦ͍·ͨ͠

    ࠨ͔Βॱ൪ʹݩಈըɺઃఆը໘ͷഎܠͷಈ͖ɺ্͔Β͔Ϳ͞Δίϯςϯπͷಈ͖ͱಁ໌౓ͷมԽͰͦΕͧΕͷཁૉΛ෼ղ͠·ͨ͠

    View Slide

  18. 18
    എܠͷಈ͖
    ίϯτϩʔϧηϯλʔ্͕ʹ͍Δ
    ͱ͍͏Ԟߦ͖දݱ
    ·ͣ͸എܠͷಈ͖ʹண໨ͯ͠Έ·͠ΐ͏

    ࿥ըͱτϨʔεͨ͠ը໘Λݟൺ΂ͯΈΔͱ

    ઃఆը໘ͷίϯςϯπ্͕͔Β͔Ϳ͞Δίϯτϩʔϧηϯλʔͷදࣔʹ߹Θͤͯগ͠খ͘͞ͳΔ͜ͱ͕Θ͔Γ·͢ɻ

    ͜Ε͸Ԟߦ͖ײΛഎܠͷಈ͖ʹΑͬͯ࡞Γग़͍ͯ͠Δͱߟ͑ΒΕ·͢

    View Slide

  19. 19
    ίϯςϯπͷಈ͖
    Ճ଎౓Λঃʑʹ૿͢͜ͱͰ
    Ԟ͔Βු͖ग़ͯ͘ΔΑ͏ͳग़ݱΛͤ͞Δ
    ͦΕͰ͸࣍ʹίϯςϯπͷಈ͖ʹண໨ͯ͠Έ·͠ΐ͏ɻ

    ίϯςϯπͷಈ͖ΛΑ͘ݟͯΈΔͱՃ଎౓Λঃʑʹ૿͠ͳ͕Βɺ໘ੵΛ޿͛දࣔ͞Ε͍ͯΔ͜ͱ͕Θ͔Γ·͢ɻ

    ͜ΕΛࢹ֮Խ͢ΔͱӈଆͷਤͷΑ͏ʹͳΓ·͢

    ίϯςϯπ͕Ԟ͔Βු͖ग़ͯ͘ΔΑ͏ͳผͷϨΠϠʔ૚͕͋ΔΑ͏ͳײ͕֮૿͢͜ͱ͕Θ͔Γ·͢ɻ

    ·ͨ΋͏Ұͭண໨͍ͯ͠΄͍͠ͷ͕ɺίϯςϯπͷ޿͕ΔλΠϛϯά͕ಉ͡ͱ͍͏͜ͱͰ͢

    ͜Ε͸࣍ʹ঺հ͢Δಁ໌౓ͷมԽͷλΠϛϯάͷ࿩ͱେ͖ؔ͘Θ͖ͬͯ·͢

    View Slide

  20. 20
    ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘
    ग़ݱ࣌
    ཁૉͷಁ໌౓ͷಈ͖
    ͦΕͰ͸ཁૉͷಁ໌౓ͷಈ͖ํʹண໨ͯ͠Έ·͢

    ͪ͜ΒͷεϥΠυͰ͸ࠨଆ͔Βॱ൪ʹ࣌ܥྻ͕ਐΜͰ͍͖·͢ɻ

    ·ͣ͸ίϯςϯπ͕ग़ݱ͢Δͱ͜ΖΛͬ͘͡Γ؍࡯ͯ͠Έ·͠ΐ͏

    View Slide

  21. 21
    ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘
    ग़ݱ࣌
    ཁૉͷಁ໌౓ͷಈ͖
    ࣮ػͷ໨ࢹͰ͸֬ೝͮ͠Β͍ͷͰ͕࣮͢͸্͔ΒԼͷॱ൪Ͱπʔϧͷಁ໌౓͕Լ͕͍͖ͬͯ·͢

    View Slide

  22. 22
    ग़ݱ࣌
    ཁૉͷಁ໌౓ͷಈ͖
    ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘
    ࣮ػͷ໨ࢹͰ͸֬ೝͮ͠Β͍ͷͰ͕࣮͢͸্͔ΒԼͷॱ൪Ͱπʔϧͷಁ໌౓͕Լ͕͍͖ͬͯ·͢

    View Slide

  23. 23
    ग़ݱ࣌
    ཁૉͷಁ໌౓ͷಈ͖
    ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘
    ͜ͷ͋ͨΓͷஈ֊ʹͳͬͯ͘Δͱ͢΂ͯͷπʔϧ͕ಉ͘͡Β͍ͷಁ໌౓ʹͳΓ

    View Slide

  24. 24
    ग़ݱ࣌
    ཁૉͷಁ໌౓ͷಈ͖
    ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘
    ࠷ޙͷஈ֊Ͱ͢΂ͯͷಁ໌౓͕ἧ͏Α͏ͳಈ͖ํΛ͍ͯ͠·ͨ͠

    View Slide

  25. 25
    ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘
    ফࣦ࣌
    ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ
    ཁૉͷಁ໌౓ͷಈ͖
    ফࣦ͢Δͱ͖΋ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌౓͕͕͍͋ͬͯ͘ΜͰ͕͢

    View Slide

  26. 26
    ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘
    ফࣦ࣌
    ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ
    ཁૉͷಁ໌౓ͷಈ͖
    ফࣦ͢Δͱ͖΋ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌౓͕͕͍͋ͬͯ͘ΜͰ͕͢

    View Slide

  27. 27
    ফࣦ࣌
    ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ
    ཁૉͷಁ໌౓ͷಈ͖
    ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘
    ফࣦ͢Δͱ͖΋ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌౓͕͕͍͋ͬͯ͘ΜͰ͕͢

    View Slide

  28. 28
    ফࣦ࣌
    ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ
    ཁૉͷಁ໌౓ͷಈ͖
    ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘
    ফࣦ͢Δͱ͖΋ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌౓͕͕͍͋ͬͯ͘ΜͰ͕͢

    View Slide

  29. 29
    Կނ͔Θ͔Γ·ͤΜ͕ɺ࣮͸Իྔͱը໘ϥΠτͷಁ໌౓͕Ұ൪࠷ޙʹফ͑Δͱ͍͏͜ͱ͕ൃݟͰͨ͠

    View Slide

  30. 30
    ཁૉͷಁ໌౓ͷಈ͖
    ্͔Β׈Γग़ͯ͘ΔΑ͏ͳײ͕֮૿͢
    ࣮ࡍͷେ͖͞Λม͑ΔͷͰ͸ͳ͘
    ಁ໌౓ͷมԽͷλΠϛϯάΛม͑Δ
    ಁ໌౓Λม͑ΔλΠϛϯάΛม͑ΔͱͲ͏͍͏ޮՌ͕ੜΈग़͞ΕΔͷͰ͠ΐ͏͔ʁ

    ઌఔͷίϯςϯπͷಈ͖ͷ߲໨Ͱ঺հͨ͠ͱ͓Γ࣮ࡍʹίϯςϯπ͕޿͕ΔλΠϛϯά͸มΘ͍ͬͯ·ͤΜɺ͔͠͠ಁ໌౓͕มԽ͢ΔλΠϛϯάΛม͑Δ͜ͱͰɺ࣍ʑ
    ͱίϯςϯπ্͕͔Β׈Γग़ͯ͘ΔΑ͏ͳײ͕֮૿͞Ε͍ͯΔ͜ͱ͕Θ͔Γ·͢

    View Slide

  31. 31
    ࢹࠩޮՌΛ֦ு͢ΔͨΊͷҙਤ
    ߟ࡯
    iOS7͔Βಋೖ͞ΕͨࢹࠩޮՌͰ͕͢ɺApple͸Ͳ͏ͯ͠ࢹࠩޮՌΛ֦ு͢ΔΑ͏ͳϞʔγϣϯΛऔΓೖΕ͖ͯͨͷͰ͠ΐ͏͔

    ؾʹͳͬͯௐ΂ͯΈ·ͨ͠ɻ

    View Slide

  32. 32
    ࢹࠩޮՌΛͳͥڧௐ͢Δͷ͔
    ༥͚ΔσβΠϯΑΓҾ༻
    όʔνϟϧͳ࣭ײදݱ
    ίοϓͳͲ΋ͷΛखʹ࣋ͪ܏͚Δͱޫͷ൓ࣹʹΑͬͯ
    ࡐ࣭ͷ࣭ײ͕Θ͔Δ
    Apple͸ͦΕΛը໘ͷதͰ΋࣭ײදݱͰ͖ΔՄೳੑΛࣔͨ͠
    ΠϯλʔϑΣΠεʗΠϯλϥΫγϣϯσβΠϯΛݚڀ͍ͯ͠Δ౉ล͞Μ͕ॻ͍ͨ

    ༹͚ΔσβΠϯʹΑΔͱɺ

    ͳΜͰ΋͍͍ΜͰ͕͢ɺͳʹ͔Λ্࣋ͪ͛ͨΓ৮ͬͨΓ͢Δͱޫͷ൓ࣹʹΑͬͯࡐ࣭ͷ࣭ײ͕Θ͔Γ·͢ΑͶɻ

    Apple͸ࢹࠩޮՌΛ͚ͭΔ͜ͱͰɺը໘ͷதͰ΋όʔνϟϧͳ࣭ײදݱͱͯ͠දݱͰ͖ΔՄೳੑΛࣔͨ͠ͷͰ͸ͳ͍͔ͱ͍͏આ͕͋Γ·ͨ͠

    View Slide

  33. 33
    ·ͱΊ
    4
    ࠷ޙʹ·ͱΊͰ͢

    View Slide

  34. 34
    ҙਤʹԠͯ͡ద੾ͳΞχϝʔγϣϯΛ
    ͔͍ͭͬͯΔ͔ΒͳͷͰ͸ɾɾɾ
    ͳͥAppleͷΞχϝʔγϣϯ͕ඒ͍͠ͷ͔
    ࠓճղੳΛͨ݁͠Ռ͔ΒAppleͷΞχϝʔγϣϯ͕ͳͥඒ͍͔͠Λߟ͑ͯΈͨ݁ՌɺҙਤʹԠͯ͡ద੾ͳΞχϝʔγϣϯΛ࢖͍ͬͯΔ͔ΒͳͷͰ͸ͳ͍͔ͱࢥ͍·ͨ͠

    View Slide

  35. 35
    ίϯϐϡʔλ(iPhone)ͱ͍͏ಓ۩Λ
    ࢖͍ͬͯΔ͜ͱΛҙࣝͤ͞ͳ͍
    https://developer.apple.com/videos/play/wwdc2018/803/?time=221ΑΓҾ༻
    WWDC2018 Designing Fluid InterfacesΑΓ
    WWDC2018 Designing Fluid InterfacesʹΑΔͱ

    iPhoneͱ͍͏ಓ۩Λ࢖͍ͬͯΔ͜ͱΛҙࣝͤ͞ͳ͍

    View Slide

  36. 36
    iPhoneͱ͍͏πʔϧࣗମ͕
    ࣗ෼ͷ਎ମͷԆ௕ͱײ͡ΔΑ͏ͳײ֮Λ໨ࢦ͍ͯ͠Δ
    https://developer.apple.com/videos/play/wwdc2018/803/?time=221(3:34ඵ෇ۙΑΓҾ༻)
    WWDC2018 Designing Fluid InterfacesΑΓ
    ·ΔͰ͔͋ͨ΋ࣗ෼ͷ਎ମͷԆ௕ͱײ͡ΔΑ͏ͳ࢖͍৺஍Λ໨ࢦ͍ͯ͠Δͱಈը಺Ͱ঺հ͞Ε͍ͯ·ͨ͠

    ͜ͷΑ͏ʹOSࣗମ͕ɺࣗ෼ͷ਎ମͷҰ෦ͱײ͡ΔΑ͏ͳײ֮Λ໨ࢦͯ͠࡞ΒΕ͍ͯΔͨΊɺAppleͷΞχϝʔγϣϯ͸ඒ͍͠ͱࢥ͏ͷͩͱࢥ͍·͢ɻ

    View Slide

  37. 37
    ΤϯδχΞɾσβΠφʔͳͲͷ৬छΛ໰Θͣ
    ࣮ੈքΛ؍࡯ͯ͠

    ਎ମײ֮ʹ͍ۙϓϩμΫτΛ໨ࢦ͍͖͍ͯͨ͠
    ͍͞͝ʹ
    ͜Ε͔ΒɺΤϯδχΞɾσβΠφʔͳͲͷ৬छΛ໰Θͣ

    ࣮ੈքΛ؍࡯ͯ͠਎ମײ֮ʹ͍ۙϓϩμΫτΛ໨ࢦ͍͖͍ͯͨ͠Ͱ͢

    View Slide

  38. 38
    ●WWDC2018ɹDesigning Fluid Interfaces
    https://developer.apple.com/videos/play/wwdc2018/803/
    ●༹͚ΔσβΠϯɹϋʔυ×ιϑτ×ωοτ࣌୅ͷ৽ͨͳઃܭ࿦ɹஶ ౉ᬑܙଠ
    ●iPhoneͷࢹࠩޮՌΛݮΒ͢ͱͲ͏ͳΔͷʁࢹࠩޮՌΛݮΒ͢ઃఆͷղઆʂ
    https://techno-monkey.com/iphone-shisa-kouka-herasu-setting-kaisetsu/
    ●Inside the technology behind iOS 7's parallax effect
    https://www.macworld.com/article/2042808/inside-the-technology-behind-ios-7s-
    parallax-effect.html
    ࢀߟจݙͱࢿྉ

    View Slide

  39. 39
    ٕज़ॻయͰ೔ܦΤϯδχΞͷٕज़ॻΛग़͠·͢
    ͜ͷLTͷ಺༰Λߋʹৄ͘͠ॻ͍ͨ࿩Λࡌͤ·͢
    ·ٕͨज़ॻయͰ೔ܦͷΤϯδχΞ͕ू·ٕͬͯज़ॻΛग़͠·͢

    ͜ͷLTͷ಺༰Λߋʹৄ͘͠ॻ͍ͨ࿩΋ܝࡌ͠·͢

    ੋඇؾʹͳͬͨํݟ͍ͯͩ͘͞

    View Slide

  40. 40
    ೔ຊܦࡁ৽ฉࣾओ࠵ େखொSwiftษڧձ΍ͬͯ·͢
    ࣍ճ͸10݄16೔ʢՐʣେखொ೔ܦϏϧ಺Ͱ։࠵ʂ
    એ఻Ͱ͕͢

    ೔ຊܦࡁ৽ฉࣾओ࠵SwiftษڧձΛ10݄16೔ʹ։࠵༧ఆͰ͢

    ੋඇ༡ͼʹདྷ͍ͯͩ͘͞

    View Slide

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

    View Slide