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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 iOSͷAnimationͷ໾ׂ 1

Slide 10

Slide 10 text

10 AppleͷHGIͷAnimetionΑΓ Human Interface GuidelineͷAnimationΑΓҾ༻

Slide 11

Slide 11 text

11 ҰݴͰݴ͏ͱ ΞχϝʔγϣϯͰϢʔβʔͱίϯςϯπΛͭͳ͗·͠ΐ͏

Slide 12

Slide 12 text

12 ΞχϝʔγϣϯͱϞʔγϣϯΛ؍࡯͢Δ 2

Slide 13

Slide 13 text

Ϣʔβʔͷಈ͖ʹԠ͡ΔϞʔγϣϯ ยखͰ࢖͍΍͍͢ઃܭ ࢹࠩޮՌΛ֦ு͢Δख๏ 13 ஈ֊Ͱࣔ͢

Slide 14

Slide 14 text

Ϣʔβʔͷಈ͖ʹԠ͡ΔϞʔγϣϯ ยखͰ࢖͍΍͍͢ઃܭ ࢹࠩޮՌΛ֦ு͢Δख๏ 14 ஈ֊Ͱࣔ͢

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

18 എܠͷಈ͖ ίϯτϩʔϧηϯλʔ্͕ʹ͍Δ ͱ͍͏Ԟߦ͖දݱ

Slide 19

Slide 19 text

19 ίϯςϯπͷಈ͖ Ճ଎౓Λঃʑʹ૿͢͜ͱͰ Ԟ͔Βු͖ग़ͯ͘ΔΑ͏ͳग़ݱΛͤ͞Δ

Slide 20

Slide 20 text

20 ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘ ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖

Slide 21

Slide 21 text

21 ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘ ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖

Slide 22

Slide 22 text

22 ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘

Slide 23

Slide 23 text

23 ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘

Slide 24

Slide 24 text

24 ग़ݱ࣌ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓͕Լ͕͍ͬͯ͘

Slide 25

Slide 25 text

25 ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘ ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖

Slide 26

Slide 26 text

26 ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘ ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖

Slide 27

Slide 27 text

27 ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘

Slide 28

Slide 28 text

28 ফࣦ࣌ ໌Δ͞ͱԻ੠ͷಁ໌౓͸Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌౓ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌౓্͕͕͍ͬͯ͘

Slide 29

Slide 29 text

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

33 ·ͱΊ 4

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

37 ΤϯδχΞɾσβΠφʔͳͲͷ৬छΛ໰Θͣ ࣮ੈքΛ؍࡯ͯ͠  ਎ମײ֮ʹ͍ۙϓϩμΫτΛ໨ࢦ͍͖͍ͯͨ͠ ͍͞͝ʹ

Slide 38

Slide 38 text

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 ࢀߟจݙͱࢿྉ

Slide 39

Slide 39 text

39 ٕज़ॻయͰ೔ܦΤϯδχΞͷٕज़ॻΛग़͠·͢ ͜ͷLTͷ಺༰Λߋʹৄ͘͠ॻ͍ͨ࿩Λࡌͤ·͢

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

41 ͋Γ͕ͱ͏͍͟͝·ͨ͠