Appleのアニメーション.pdf

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 Marina Nakagawa @marina10172013(·Γʔͳ) ೔ຊܦࡁ৽ฉࣾͷiOSΤϯδχΞ ిࢠ൛ΞϓϦɼࢴ໘ϏϡʔΞʔΞϓϦͷ։ൃ Adobe੡඼޷͖Ͱ͢ ͸͡Ί·ͯ͠೔ຊܦࡁ৽ฉࣾͰΤϯδχΞͯ͠·͢த઒Ͱ͢ ೔ܦ৽ฉͷిࢠ൛ΞϓϦͱࢴ໘ϏϡʔΞʔΛ࡞͍ͬͯ·͢ ΤϯδχΞΛ͸͡Ίͯ̍೥൒Ͱ͢ Adobe੡඼΋޷͖Ͱ͢ ͜͜ʹొஃ͢Δͷࡢ೥͔Βͷ໨ඪͩͬͨͷͰ΄Μͱʹخ͍͠Ͱ͢ ΑΖ͓͘͠Ͷ͕͍͠·͢

Slide 3

Slide 3 text

3 AppleͷΞχϝʔγϣϯͬͯඒ͍͠ɾɾɾ ಥવͰ͕͢ AppleͷΞχϝʔγϣϯͬͯඒ͍͠Ͱ͢ΑͶɾɾɾ ;ͩΜ౰ͨΓલͷΑ͏ʹ࢖͍ͬͯΔ iPhone ΍ iPadɺͲ͏ͯ͜͠Μͳʹؾ࣋ͪͷ͍͍࢖͍৺஍ʹͳΔͷ͔ؾʹͳΓ·ͨ͠

Slide 4

Slide 4 text

4 iOS10 iOS11 iOS11ΑΓେ͖͘ίϯτϩʔϧηϯλʔ͕มΘͬͨ ͜͜Ͱ஫໨ͨ͠ͷ͕ίϯτϩʔϧηϯλʔͰ͢  iOS11ΑΓ͢΂ͯͷػೳΛҰͭͷ΢Οϯυ΢ʹ·ͱΊɺ Ի੠΍ը໘ͷ໌Δ͞ͳͲΞϓϦΛ্ཱͪ͛ͳͯ͘΋ɺ؆୯ʹૢ࡞Ͱ͖ΔΑ͏ʹมߋ͞Ε·ͨ͠ɻ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

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 ·ͣ͸ϞʔγϣϯΛղੳ͢Δલʹ iOSͷAnimationͷ໾ׂΛ֬ೝ͢ΔͨΊ  Human Interface GuidelineͷAnimationΛݟ͓͖ͯ·͠ΐ͏

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 ஈ֊Ͱࣔ͢ ͪ͜Β͚ͩ঺հ͠·͢ ຊ೔ͷొஃࢿྉͱͱ΋ʹ࢒Γͷ಺༰΋twitterͰެ։͢ΔͷͰؾʹͳͬͨํ͸ݟͯΈ͍ͯͩ͘͞

Slide 15

Slide 15 text

15 ࢹࠩޮՌΛ֦ு͢Δख๏ ࢹࠩޮՌΛ֦ு͢Δख๏ʹ͍ͭͯ঺հ͠·͢

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 AfterEffectsͰτϨʔεͯ͠ཁૉΛ෼ղ͠·ͨ͠ AfterEﬀectsͰಈըͷUIτϨʔεΛߦ͍·ͨ͠ ࠨ͔Βॱ൪ʹݩಈըɺઃఆը໘ͷഎܠͷಈ͖ɺ্͔Β͔Ϳ͞Δίϯςϯπͷಈ͖ͱಁ໌౓ͷมԽͰͦΕͧΕͷཁૉΛ෼ղ͠·ͨ͠

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

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

Slide 30

Slide 30 text

30 ཁૉͷಁ໌౓ͷಈ͖ ্͔Β׈Γग़ͯ͘ΔΑ͏ͳײ͕֮૿͢ ࣮ࡍͷେ͖͞Λม͑ΔͷͰ͸ͳ͘ ಁ໌౓ͷมԽͷλΠϛϯάΛม͑Δ ಁ໌౓Λม͑ΔλΠϛϯάΛม͑ΔͱͲ͏͍͏ޮՌ͕ੜΈग़͞ΕΔͷͰ͠ΐ͏͔ʁ ઌఔͷίϯςϯπͷಈ͖ͷ߲໨Ͱ঺հͨ͠ͱ͓Γ࣮ࡍʹίϯςϯπ͕޿͕ΔλΠϛϯά͸มΘ͍ͬͯ·ͤΜɺ͔͠͠ಁ໌౓͕มԽ͢ΔλΠϛϯάΛม͑Δ͜ͱͰɺ࣍ʑ ͱίϯςϯπ্͕͔Β׈Γग़ͯ͘ΔΑ͏ͳײ͕֮૿͞Ε͍ͯΔ͜ͱ͕Θ͔Γ·͢

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

33 ·ͱΊ 4 ࠷ޙʹ·ͱΊͰ͢

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

36 iPhoneͱ͍͏πʔϧࣗମ͕ ࣗ෼ͷ਎ମͷԆ௕ͱײ͡ΔΑ͏ͳײ֮Λ໨ࢦ͍ͯ͠Δ https://developer.apple.com/videos/play/wwdc2018/803/?time=221(3:34ඵ෇ۙΑΓҾ༻) WWDC2018 Designing Fluid InterfacesΑΓ ·ΔͰ͔͋ͨ΋ࣗ෼ͷ਎ମͷԆ௕ͱײ͡ΔΑ͏ͳ࢖͍৺஍Λ໨ࢦ͍ͯ͠Δͱಈը಺Ͱ঺հ͞Ε͍ͯ·ͨ͠ ͜ͷΑ͏ʹOSࣗମ͕ɺࣗ෼ͷ਎ମͷҰ෦ͱײ͡ΔΑ͏ͳײ֮Λ໨ࢦͯ͠࡞ΒΕ͍ͯΔͨΊɺAppleͷΞχϝʔγϣϯ͸ඒ͍͠ͱࢥ͏ͷͩͱࢥ͍·͢ɻ

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ͷ಺༰Λߋʹৄ͘͠ॻ͍ͨ࿩Λࡌͤ·͢ ·ٕͨज़ॻయͰ೔ܦͷΤϯδχΞ͕ू·ٕͬͯज़ॻΛग़͠·͢ ͜ͷLTͷ಺༰Λߋʹৄ͘͠ॻ͍ͨ࿩΋ܝࡌ͠·͢ ੋඇؾʹͳͬͨํݟ͍ͯͩ͘͞

Slide 40

Slide 40 text

40 ೔ຊܦࡁ৽ฉࣾओ࠵ େखொSwiftษڧձ΍ͬͯ·͢ ࣍ճ͸10݄16೔ʢՐʣେखொ೔ܦϏϧ಺Ͱ։࠵ʂ એ఻Ͱ͕͢ ೔ຊܦࡁ৽ฉࣾओ࠵SwiftษڧձΛ10݄16೔ʹ։࠵༧ఆͰ͢ ੋඇ༡ͼʹདྷ͍ͯͩ͘͞

Slide 41

Slide 41 text

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