Appleのアニメーションはなぜ美しいか考える

2018年iOSDCでLTで登壇して発表したスライドです。

概要
ふだん当たり前のように使っている iPhone や iPad、どうしてこんなに気持ちのいい使い心地になるのでしょうかコントロールセンターのアイコンたちのアニメーションや UI のパーツに着目し、AfterEffects でアニメーショントレースを行い、得た知見を共有します。

完全版はこちら
https://note.mu/marina1017/n/n7cbacc65b839

Transcript

1. 1 AppleͷΞχϝʔγϣϯ͸ͳͥඒ͍͠ͷ͔ߟ͑Δ ~ίϯτϩʔϧηϯλʔͷ؍࡯~ ೔ຊܦࡁ৽ฉࣾɹத઒ ສᣦಸ iOSDC2018
2. 2 Marina Nakagawa @marina10172013(·Γʔͳ) ೔ຊܦࡁ৽ฉࣾͷiOSΤϯδχΞ ిࢠ൛ΞϓϦɼࢴ໘ϏϡʔΞʔΞϓϦͷ։ൃ Adobe੡඼޷͖Ͱ͢
3. 3 AppleͷΞχϝʔγϣϯͬͯඒ͍͠ɾɾɾ
4. 4 iOS10 iOS11 iOS11ΑΓେ͖͘ίϯτϩʔϧηϯλʔ͕มΘͬͨ
5. 5 Ի੠΍ը໘ͷ໌Δ͞ ΞϓϦΛ্ཱͪ͛ͳͯ͘΋ɺखܰʹૢ࡞Ͱ͖Δ
6. 6 ίϯτϩʔϧηϯλʔ͸࢖͍উख΍৮Γ৺஍ʹରͯ͠ Ұ൪ؾΛ࢖ͬͨͱ͜ΖͳͷͰ͸ɾɾɾʁ
7. 7 ίϯτϩʔϧηϯλʔ͸࢖͍উख΍৮Γ৺஍ʹରͯ͠ Ұ൪ؾΛ࢖ͬͨͱ͜ΖͳͷͰ͸ɾɾɾʁ ΞχϝʔγϣϯͱϞʔγϣϯΤϑΣΫτΛ ؍࡯ͯ͠ΈΑ͏ʂ
8. 8 ຊ೔࿩͢͜ͱ iOSͷAnimationͷ໾ׂ ΞχϝʔγϣϯͱϞʔγϣϯΛ؍࡯͢Δ 1 2 Appleͷ໨ࢦ͢ํ޲ͱ͸ 3
9. 9 iOSͷAnimationͷ໾ׂ 1
10. 10 AppleͷHGIͷAnimetionΑΓ Human Interface GuidelineͷAnimationΑΓҾ༻
11. 11 ҰݴͰݴ͏ͱ ΞχϝʔγϣϯͰϢʔβʔͱίϯςϯπΛͭͳ͗·͠ΐ͏
12. 12 ΞχϝʔγϣϯͱϞʔγϣϯΛ؍࡯͢Δ 2
13. Ϣʔβʔͷಈ͖ʹԠ͡ΔϞʔγϣϯ ยखͰ࢖͍΍͍͢ઃܭ ࢹࠩޮՌΛ֦ு͢Δख๏ 13 ஈ֊Ͱࣔ͢
14. Ϣʔβʔͷಈ͖ʹԠ͡ΔϞʔγϣϯ ยखͰ࢖͍΍͍͢ઃܭ ࢹࠩޮՌΛ֦ு͢Δख๏ 14 ஈ֊Ͱࣔ͢
15. 15 ࢹࠩޮՌΛ֦ு͢Δख๏
16. 16 ίϯτϩʔϧηϯλʔͷग़͠ೖΕΛղੳ
17. 17 AfterEffectsͰτϨʔεͯ͠ཁૉΛ෼ղ͠·ͨ͠
18. 18 എܠͷಈ͖ ίϯτϩʔϧηϯλʔ্͕ʹ͍Δ ͱ͍͏Ԟߦ͖දݱ
19. 19 ίϯςϯπͷಈ͖ Ճ଎౓Λঃʑʹ૿͢͜ͱͰ Ԟ͔Βු͖ग़ͯ͘ΔΑ͏ͳग़ݱΛͤ͞Δ
20. 20 ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘ ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖
21. 21 ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘ ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖
22. 22 ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘
23. 23 ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘
24. 24 ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘
25. 25 ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘ ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖
26. 26 ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘ ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖
27. 27 ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘
28. 28 ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘
30. 30 ཁૉͷಁ໌౓ͷಈ͖ ্͔Β׈Γग़ͯ͘ΔΑ͏ͳײ͕֮૿͢ ࣮ࡍͷେ͖͞Λม͑ΔͷͰ͸ͳ͘ ಁ໌౓ͷมԽͷλΠϛϯάΛม͑Δ
31. 31 ࢹࠩޮՌΛ֦ு͢ΔͨΊͷҙਤ ߟ࡯
32. 32 ࢹࠩޮՌΛͳͥڧௐ͢Δͷ͔ ༥͚ΔσβΠϯΑΓҾ༻ όʔνϟϧͳ࣭ײදݱ ίοϓͳͲ΋ͷΛखʹ࣋ͪ܏͚Δͱޫͷ൓ࣹʹΑͬͯ ࡐ࣭ͷ࣭ײ͕Θ͔Δ Apple͸ͦΕΛը໘ͷதͰ΋࣭ײදݱͰ͖ΔՄೳੑΛࣔͨ͠
33. 33 ·ͱΊ 4
34. 34 ҙਤʹԠͯ͡ద੾ͳΞχϝʔγϣϯΛ ͔͍ͭͬͯΔ͔ΒͳͷͰ͸ɾɾɾ ͳͥAppleͷΞχϝʔγϣϯ͕ඒ͍͠ͷ͔
35. 35 ίϯϐϡʔλ(iPhone)ͱ͍͏ಓ۩Λ ࢖͍ͬͯΔ͜ͱΛҙࣝͤ͞ͳ͍ https://developer.apple.com/videos/play/wwdc2018/803/?time=221ΑΓҾ༻ WWDC2018 Designing Fluid InterfacesΑΓ
36. 36 iPhoneͱ͍͏πʔϧࣗମ͕ ࣗ෼ͷ਎ମͷԆ௕ͱײ͡ΔΑ͏ͳײ֮Λ໨ࢦ͍ͯ͠Δ https://developer.apple.com/videos/play/wwdc2018/803/?time=221(3:34ඵ෇ۙΑΓҾ༻) WWDC2018 Designing Fluid InterfacesΑΓ
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ͷ಺༰Λߋʹৄ͘͠ॻ͍ͨ࿩Λࡌͤ·͢
40. 40 ೔ຊܦࡁ৽ฉࣾओ࠵ େखொSwiftษڧձ΍ͬͯ·͢ ࣍ճ͸10݄16೔ʢՐʣେखொ೔ܦϏϧ಺Ͱ։࠵ʂ
41. 41 ͋Γ͕ͱ͏͍͟͝·ͨ͠