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

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

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

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

Transcript

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

   View Slide

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

   View Slide

3. 3
   AppleͷΞχϝʔγϣϯͬͯඒ͍͠ɾɾɾ
   

   View Slide

4. 4
   iOS10 iOS11
   iOS11ΑΓେ͖͘ίϯτϩʔϧηϯλʔ͕มΘͬͨ
   

   View Slide

5. 5
   Ի੠΍ը໘ͷ໌Δ͞
   ΞϓϦΛ্ཱͪ͛ͳͯ͘΋ɺखܰʹૢ࡞Ͱ͖Δ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. 9
   iOSͷAnimationͷ໾ׂ
   1
   

   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
    ஈ֊Ͱࣔ͢
    

    View Slide

15. 15
    ࢹࠩޮՌΛ֦ு͢Δख๏
    

    View Slide

16. 16
    ίϯτϩʔϧηϯλʔͷग़͠ೖΕΛղੳ
    

    View Slide

17. 17
    AfterEffectsͰτϨʔεͯ͠ཁૉΛ෼ղ͠·ͨ͠
    

    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. View Slide

30. 30
    ཁૉͷಁ໌౓ͷಈ͖
    ্͔Β׈Γग़ͯ͘ΔΑ͏ͳײ͕֮૿͢
    ࣮ࡍͷେ͖͞Λม͑ΔͷͰ͸ͳ͘
    ಁ໌౓ͷมԽͷλΠϛϯάΛม͑Δ
    

    View Slide

31. 31
    ࢹࠩޮՌΛ֦ு͢ΔͨΊͷҙਤ
    ߟ࡯
    

    View Slide

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

    View Slide

33. 33
    ·ͱΊ
    4
    

    View Slide

34. 34
    ҙਤʹԠͯ͡ద੾ͳΞχϝʔγϣϯΛ
    ͔͍ͭͬͯΔ͔ΒͳͷͰ͸ɾɾɾ
    ͳͥAppleͷΞχϝʔγϣϯ͕ඒ͍͠ͷ͔
    

    View Slide

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

    View Slide

36. 36
    iPhoneͱ͍͏πʔϧࣗମ͕
    ࣗ෼ͷ਎ମͷԆ௕ͱײ͡ΔΑ͏ͳײ֮Λ໨ࢦ͍ͯ͠Δ
    https://developer.apple.com/videos/play/wwdc2018/803/?time=221(3:34ඵ෇ۙΑΓҾ༻)
    WWDC2018 Designing Fluid InterfacesΑΓ
    

    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ͷ಺༰Λߋʹৄ͘͠ॻ͍ͨ࿩Λࡌͤ·͢
    

    View Slide

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

    View Slide

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

    View Slide