Appleのアニメーション.pdf

Transcript

1. 1 AppleͷΞχϝʔγϣϯ͸ͳͥඒ͍͠ͷ͔ߟ͑Δ ~ίϯτϩʔϧηϯλʔͷ؍࡯~ ೔ຊܦࡁ৽ฉࣾɹத઒ ສᣦಸ iOSDC2018 AppleͷΞχϝʔγϣϯ͸ͳͥඒ͍͠ͷ͔ߟ͑Δ ίϯτϩʔϧηϯλʔͷ؍࡯Λൃද͠·͢
2. 2 Marina Nakagawa @marina10172013(·Γʔͳ) ೔ຊܦࡁ৽ฉࣾͷiOSΤϯδχΞ ిࢠ൛ΞϓϦɼࢴ໘ϏϡʔΞʔΞϓϦͷ։ൃ Adobe੡඼޷͖Ͱ͢ ͸͡Ί·ͯ͠೔ຊܦࡁ৽ฉࣾͰΤϯδχΞͯ͠·͢த઒Ͱ͢ ೔ܦ৽ฉͷిࢠ൛ΞϓϦͱࢴ໘ϏϡʔΞʔΛ࡞͍ͬͯ·͢ ΤϯδχΞΛ͸͡Ίͯ̍೥൒Ͱ͢ Adobe੡඼΋޷͖Ͱ͢ ͜͜ʹొஃ͢Δͷࡢ೥͔Βͷ໨ඪͩͬͨͷͰ΄Μͱʹخ͍͠Ͱ͢ ΑΖ͓͘͠Ͷ͕͍͠·͢
3. 3 AppleͷΞχϝʔγϣϯͬͯඒ͍͠ɾɾɾ ಥવͰ͕͢ AppleͷΞχϝʔγϣϯͬͯඒ͍͠Ͱ͢ΑͶɾɾɾ ;ͩΜ౰ͨΓલͷΑ͏ʹ࢖͍ͬͯΔ iPhone ΍ iPadɺͲ͏ͯ͜͠Μͳʹؾ࣋ͪͷ͍͍࢖͍৺஍ʹͳΔͷ͔ؾʹͳΓ·ͨ͠
4. 4 iOS10 iOS11 iOS11ΑΓେ͖͘ίϯτϩʔϧηϯλʔ͕มΘͬͨ ͜͜Ͱ஫໨ͨ͠ͷ͕ίϯτϩʔϧηϯλʔͰ͢
 iOS11ΑΓ͢΂ͯͷػೳΛҰͭͷ΢Οϯυ΢ʹ·ͱΊɺ Ի੠΍ը໘ͷ໌Δ͞ͳͲΞϓϦΛ্ཱͪ͛ͳͯ͘΋ɺ؆୯ʹૢ࡞Ͱ͖ΔΑ͏ʹมߋ͞Ε·ͨ͠ɻ
5. 5 Ի੠΍ը໘ͷ໌Δ͞ ΞϓϦΛ্ཱͪ͛ͳͯ͘΋ɺखܰʹૢ࡞Ͱ͖Δ ͭ·Γมߋ͕ߦΘΕͨͱ͍͏͜ͱ͸ͦΕ͚ͩधཁ͕͋ͬͨͱ͍͏͜ͱͰ͢ΑͶ
6. 6 ίϯτϩʔϧηϯλʔ͸࢖͍উख΍৮Γ৺஍ʹରͯ͠ Ұ൪ؾΛ࢖ͬͨͱ͜ΖͳͷͰ͸ɾɾɾʁ ͦ͜Ͱࢲ͸ɺApple͕࢖͍উख΍৮Γ৺஍ʹରͯ͠Ұ൪ؾΛ࢖ͬͨͱ͜ΖͰ͸ͳ͍͔ͱߟ͑ɺ
7. 7 ίϯτϩʔϧηϯλʔ͸࢖͍উख΍৮Γ৺஍ʹରͯ͠ Ұ൪ؾΛ࢖ͬͨͱ͜ΖͳͷͰ͸ɾɾɾʁ ΞχϝʔγϣϯͱϞʔγϣϯΤϑΣΫτΛ ؍࡯ͯ͠ΈΑ͏ʂ ࠓճண໨ͯ͠ΞχϝʔγϣϯΛ؍࡯͢Δ͜ͱʹ͠·ͨ͠
8. 8 ຊ೔࿩͢͜ͱ iOSͷAnimationͷ໾ׂ ΞχϝʔγϣϯͱϞʔγϣϯΛ؍࡯͢Δ 1 2 Appleͷ໨ࢦ͢ํ޲ͱ͸ 3 ຊ೔͓࿩͢Δ͜ͱ͸Լه̏ͭͷςʔϚͰ͢
9. 9 iOSͷAnimationͷ໾ׂ 1 ·ͣ͸ϞʔγϣϯΛղੳ͢Δલʹ iOSͷAnimationͷ໾ׂΛ֬ೝ͢ΔͨΊ
 Human Interface GuidelineͷAnimationΛݟ͓͖ͯ·͠ΐ͏
10. 10 AppleͷHGIͷAnimetionΑΓ Human Interface GuidelineͷAnimationΑΓҾ༻ υΩϡϝϯτʹ͸͜ͷΑ͏ʹ঺հ͞Ε͍ͯ·͢
11. 11 ҰݴͰݴ͏ͱ ΞχϝʔγϣϯͰϢʔβʔͱίϯςϯπΛͭͳ͗·͠ΐ͏ ҰݴͰݴ͏ͱɹΞχϝʔγϣϯͰϢʔβʔͱίϯςϯπΛͭͳ͗·͠ΐ͏ͱ͍͏͜ͱͰ͢
12. 12 ΞχϝʔγϣϯͱϞʔγϣϯΛ؍࡯͢Δ 2 ͦΕͰ͸؍࡯Λ࢝Ί·͠ΐ͏

13. Ϣʔβʔͷಈ͖ʹԠ͡ΔϞʔγϣϯ ยखͰ࢖͍΍͍͢ઃܭ ࢹࠩޮՌΛ֦ு͢Δख๏ 13 ஈ֊Ͱࣔ͢ ϞʔγϣϯΛղੳͯ͠Θ͔ͬͨ͜ͱΛ̐ͭͷ෼໺ʹ෼ྨͨ͠ΜͰ͕͢ ࣌ؒͷ౎߹্ຊ೔͸
14. Ϣʔβʔͷಈ͖ʹԠ͡ΔϞʔγϣϯ ยखͰ࢖͍΍͍͢ઃܭ ࢹࠩޮՌΛ֦ு͢Δख๏ 14 ஈ֊Ͱࣔ͢ ͪ͜Β͚ͩ঺հ͠·͢ ຊ೔ͷొஃࢿྉͱͱ΋ʹ࢒Γͷ಺༰΋twitterͰެ։͢ΔͷͰؾʹͳͬͨํ͸ݟͯΈ͍ͯͩ͘͞
15. 15 ࢹࠩޮՌΛ֦ு͢Δख๏ ࢹࠩޮՌΛ֦ு͢Δख๏ʹ͍ͭͯ঺հ͠·͢
16. 16 ίϯτϩʔϧηϯλʔͷग़͠ೖΕΛղੳ ͪ͜ΒͷίϯτϩʔϧηϯλʔΛ։͍ͯด͡ΔಈըΛ࿥ըͯ͠εϩʔʹͯ͠
17. 17 AfterEffectsͰτϨʔεͯ͠ཁૉΛ෼ղ͠·ͨ͠ AfterEffectsͰಈըͷUIτϨʔεΛߦ͍·ͨ͠ ࠨ͔Βॱ൪ʹݩಈըɺઃఆը໘ͷഎܠͷಈ͖ɺ্͔Β͔Ϳ͞Δίϯςϯπͷಈ͖ͱಁ໌౓ͷมԽͰͦΕͧΕͷཁૉΛ෼ղ͠·ͨ͠
18. 18 എܠͷಈ͖ ίϯτϩʔϧηϯλʔ্͕ʹ͍Δ ͱ͍͏Ԟߦ͖දݱ ·ͣ͸എܠͷಈ͖ʹண໨ͯ͠Έ·͠ΐ͏
 ࿥ըͱτϨʔεͨ͠ը໘Λݟൺ΂ͯΈΔͱ ઃఆը໘ͷίϯςϯπ্͕͔Β͔Ϳ͞Δίϯτϩʔϧηϯλʔͷදࣔʹ߹Θͤͯগ͠খ͘͞ͳΔ͜ͱ͕Θ͔Γ·͢ɻ ͜Ε͸Ԟߦ͖ײΛഎܠͷಈ͖ʹΑͬͯ࡞Γग़͍ͯ͠Δͱߟ͑ΒΕ·͢
19. 19 ίϯςϯπͷಈ͖ Ճ଎౓Λঃʑʹ૿͢͜ͱͰ Ԟ͔Βු͖ग़ͯ͘ΔΑ͏ͳग़ݱΛͤ͞Δ ͦΕͰ͸࣍ʹίϯςϯπͷಈ͖ʹண໨ͯ͠Έ·͠ΐ͏ɻ ίϯςϯπͷಈ͖ΛΑ͘ݟͯΈΔͱՃ଎౓Λঃʑʹ૿͠ͳ͕Βɺ໘ੵΛ޿͛දࣔ͞Ε͍ͯΔ͜ͱ͕Θ͔Γ·͢ɻ ͜ΕΛࢹ֮Խ͢ΔͱӈଆͷਤͷΑ͏ʹͳΓ·͢ ίϯςϯπ͕Ԟ͔Βු͖ग़ͯ͘ΔΑ͏ͳผͷϨΠϠʔ૚͕͋ΔΑ͏ͳײ͕֮૿͢͜ͱ͕Θ͔Γ·͢ɻ ·ͨ΋͏Ұͭண໨͍ͯ͠΄͍͠ͷ͕ɺίϯςϯπͷ޿͕ΔλΠϛϯά͕ಉ͡ͱ͍͏͜ͱͰ͢ ͜Ε͸࣍ʹ঺հ͢Δಁ໌౓ͷมԽͷλΠϛϯάͷ࿩ͱେ͖ؔ͘Θ͖ͬͯ·͢
20. 20 ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘ ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ͦΕͰ͸ཁૉͷಁ໌౓ͷಈ͖ํʹண໨ͯ͠Έ·͢ ͪ͜ΒͷεϥΠυͰ͸ࠨଆ͔Βॱ൪ʹ࣌ܥྻ͕ਐΜͰ͍͖·͢ɻ ·ͣ͸ίϯςϯπ͕ग़ݱ͢Δͱ͜ΖΛͬ͘͡Γ؍࡯ͯ͠Έ·͠ΐ͏
21. 21 ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘ ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ࣮ػͷ໨ࢹͰ͸֬ೝͮ͠Β͍ͷͰ͕࣮͢͸্͔ΒԼͷॱ൪Ͱπʔϧͷಁ໌౓͕Լ͕͍͖ͬͯ·͢
22. 22 ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘ ࣮ػͷ໨ࢹͰ͸֬ೝͮ͠Β͍ͷͰ͕࣮͢͸্͔ΒԼͷॱ൪Ͱπʔϧͷಁ໌౓͕Լ͕͍͖ͬͯ·͢
23. 23 ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘ ͜ͷ͋ͨΓͷஈ֊ʹͳͬͯ͘Δͱ͢΂ͯͷπʔϧ͕ಉ͘͡Β͍ͷಁ໌౓ʹͳΓ
24. 24 ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘ ࠷ޙͷஈ֊Ͱ͢΂ͯͷಁ໌౓͕ἧ͏Α͏ͳಈ͖ํΛ͍ͯ͠·ͨ͠
25. 25 ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘ ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖ ফࣦ͢Δͱ͖΋ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌౓͕͕͍͋ͬͯ͘ΜͰ͕͢
26. 26 ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘ ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖ ফࣦ͢Δͱ͖΋ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌౓͕͕͍͋ͬͯ͘ΜͰ͕͢
27. 27 ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘ ফࣦ͢Δͱ͖΋ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌౓͕͕͍͋ͬͯ͘ΜͰ͕͢
28. 28 ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘ ফࣦ͢Δͱ͖΋ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌౓͕͕͍͋ͬͯ͘ΜͰ͕͢
29. 29 Կނ͔Θ͔Γ·ͤΜ͕ɺ࣮͸Իྔͱը໘ϥΠτͷಁ໌౓͕Ұ൪࠷ޙʹফ͑Δͱ͍͏͜ͱ͕ൃݟͰͨ͠
30. 30 ཁૉͷಁ໌౓ͷಈ͖ ্͔Β׈Γग़ͯ͘ΔΑ͏ͳײ͕֮૿͢ ࣮ࡍͷେ͖͞Λม͑ΔͷͰ͸ͳ͘ ಁ໌౓ͷมԽͷλΠϛϯάΛม͑Δ ಁ໌౓Λม͑ΔλΠϛϯάΛม͑ΔͱͲ͏͍͏ޮՌ͕ੜΈग़͞ΕΔͷͰ͠ΐ͏͔ʁ ઌఔͷίϯςϯπͷಈ͖ͷ߲໨Ͱ঺հͨ͠ͱ͓Γ࣮ࡍʹίϯςϯπ͕޿͕ΔλΠϛϯά͸มΘ͍ͬͯ·ͤΜɺ͔͠͠ಁ໌౓͕มԽ͢ΔλΠϛϯάΛม͑Δ͜ͱͰɺ࣍ʑ ͱίϯςϯπ্͕͔Β׈Γग़ͯ͘ΔΑ͏ͳײ͕֮૿͞Ε͍ͯΔ͜ͱ͕Θ͔Γ·͢
31. 31 ࢹࠩޮՌΛ֦ு͢ΔͨΊͷҙਤ ߟ࡯ iOS7͔Βಋೖ͞ΕͨࢹࠩޮՌͰ͕͢ɺApple͸Ͳ͏ͯ͠ࢹࠩޮՌΛ֦ு͢ΔΑ͏ͳϞʔγϣϯΛऔΓೖΕ͖ͯͨͷͰ͠ΐ͏͔ ؾʹͳͬͯௐ΂ͯΈ·ͨ͠ɻ
32. 32 ࢹࠩޮՌΛͳͥڧௐ͢Δͷ͔ ༥͚ΔσβΠϯΑΓҾ༻ όʔνϟϧͳ࣭ײදݱ ίοϓͳͲ΋ͷΛखʹ࣋ͪ܏͚Δͱޫͷ൓ࣹʹΑͬͯ ࡐ࣭ͷ࣭ײ͕Θ͔Δ Apple͸ͦΕΛը໘ͷதͰ΋࣭ײදݱͰ͖ΔՄೳੑΛࣔͨ͠ ΠϯλʔϑΣΠεʗΠϯλϥΫγϣϯσβΠϯΛݚڀ͍ͯ͠Δ౉ล͞Μ͕ॻ͍ͨ
 ༹͚ΔσβΠϯʹΑΔͱɺ ͳΜͰ΋͍͍ΜͰ͕͢ɺͳʹ͔Λ্࣋ͪ͛ͨΓ৮ͬͨΓ͢Δͱޫͷ൓ࣹʹΑͬͯࡐ࣭ͷ࣭ײ͕Θ͔Γ·͢ΑͶɻ Apple͸ࢹࠩޮՌΛ͚ͭΔ͜ͱͰɺը໘ͷதͰ΋όʔνϟϧͳ࣭ײදݱͱͯ͠දݱͰ͖ΔՄೳੑΛࣔͨ͠ͷͰ͸ͳ͍͔ͱ͍͏આ͕͋Γ·ͨ͠
33. 33 ·ͱΊ 4 ࠷ޙʹ·ͱΊͰ͢
34. 34 ҙਤʹԠͯ͡ద੾ͳΞχϝʔγϣϯΛ ͔͍ͭͬͯΔ͔ΒͳͷͰ͸ɾɾɾ ͳͥAppleͷΞχϝʔγϣϯ͕ඒ͍͠ͷ͔ ࠓճղੳΛͨ݁͠Ռ͔ΒAppleͷΞχϝʔγϣϯ͕ͳͥඒ͍͔͠Λߟ͑ͯΈͨ݁ՌɺҙਤʹԠͯ͡ద੾ͳΞχϝʔγϣϯΛ࢖͍ͬͯΔ͔ΒͳͷͰ͸ͳ͍͔ͱࢥ͍·ͨ͠
35. 35 ίϯϐϡʔλ(iPhone)ͱ͍͏ಓ۩Λ ࢖͍ͬͯΔ͜ͱΛҙࣝͤ͞ͳ͍ https://developer.apple.com/videos/play/wwdc2018/803/?time=221ΑΓҾ༻ WWDC2018 Designing Fluid InterfacesΑΓ WWDC2018 Designing Fluid InterfacesʹΑΔͱ iPhoneͱ͍͏ಓ۩Λ࢖͍ͬͯΔ͜ͱΛҙࣝͤ͞ͳ͍
36. 36 iPhoneͱ͍͏πʔϧࣗମ͕ ࣗ෼ͷ਎ମͷԆ௕ͱײ͡ΔΑ͏ͳײ֮Λ໨ࢦ͍ͯ͠Δ https://developer.apple.com/videos/play/wwdc2018/803/?time=221(3:34ඵ෇ۙΑΓҾ༻) WWDC2018 Designing Fluid InterfacesΑΓ ·ΔͰ͔͋ͨ΋ࣗ෼ͷ਎ମͷԆ௕ͱײ͡ΔΑ͏ͳ࢖͍৺஍Λ໨ࢦ͍ͯ͠Δͱಈը಺Ͱ঺հ͞Ε͍ͯ·ͨ͠ ͜ͷΑ͏ʹOSࣗମ͕ɺࣗ෼ͷ਎ମͷҰ෦ͱײ͡ΔΑ͏ͳײ֮Λ໨ࢦͯ͠࡞ΒΕ͍ͯΔͨΊɺAppleͷΞχϝʔγϣϯ͸ඒ͍͠ͱࢥ͏ͷͩͱࢥ͍·͢ɻ
37. 37 ΤϯδχΞɾσβΠφʔͳͲͷ৬छΛ໰Θͣ ࣮ੈքΛ؍࡯ͯ͠
 ਎ମײ֮ʹ͍ۙϓϩμΫτΛ໨ࢦ͍͖͍ͯͨ͠ ͍͞͝ʹ ͜Ε͔ΒɺΤϯδχΞɾσβΠφʔͳͲͷ৬छΛ໰Θͣ ࣮ੈքΛ؍࡯ͯ͠਎ମײ֮ʹ͍ۙϓϩμΫτΛ໨ࢦ͍͖͍ͯͨ͠Ͱ͢
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 ࢀߟจݙͱࢿྉ
39. 39 ٕज़ॻయͰ೔ܦΤϯδχΞͷٕज़ॻΛग़͠·͢ ͜ͷLTͷ಺༰Λߋʹৄ͘͠ॻ͍ͨ࿩Λࡌͤ·͢ ·ٕͨज़ॻయͰ೔ܦͷΤϯδχΞ͕ू·ٕͬͯज़ॻΛग़͠·͢ ͜ͷLTͷ಺༰Λߋʹৄ͘͠ॻ͍ͨ࿩΋ܝࡌ͠·͢ ੋඇؾʹͳͬͨํݟ͍ͯͩ͘͞
40. 40 ೔ຊܦࡁ৽ฉࣾओ࠵ େखொSwiftษڧձ΍ͬͯ·͢ ࣍ճ͸10݄16೔ʢՐʣେखொ೔ܦϏϧ಺Ͱ։࠵ʂ એ఻Ͱ͕͢ ೔ຊܦࡁ৽ฉࣾओ࠵SwiftษڧձΛ10݄16೔ʹ։࠵༧ఆͰ͢ ੋඇ༡ͼʹདྷ͍ͯͩ͘͞
41. 41 ͋Γ͕ͱ͏͍͟͝·ͨ͠