Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Appleのアニメーション.pdf
Search
Marina Nakagawa
September 02, 2018
0
43
Appleのアニメーション.pdf
Marina Nakagawa
September 02, 2018
Tweet
Share
More Decks by Marina Nakagawa
See All by Marina Nakagawa
業務改善の面白さ~毎日更新されるビジュアルコンテンツの差分を わかりやすくするためのプロトタイプを作るまで~
marina1017
4
6.1k
通知にプレースホルダーを入れてみたら開封率がちょっと良くなった話
marina1017
1
1.8k
アプリ流入用広告のデータ分析基盤を整える ~FirebaseとiAd.frameworkの連携~
marina1017
2
3.4k
ABテストが上手く行かなかった話
marina1017
1
560
「開発初心者は何がわからないのか」 わからないを言語化するヒント
marina1017
2
900
Appleのアニメーションはなぜ美しいか考える
marina1017
1
2k
gitの裏側をさぐる
marina1017
0
450
Lottieによるリッチアニメーション実装のためのAfterEffectsハマりどころ
marina1017
3
10k
Bitriseことはじめ
marina1017
12
3.3k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Being A Developer After 40
akosma
87
590k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Happy Clients
brianwarren
98
6.7k
How GitHub (no longer) Works
holman
310
140k
KATA
mclloyd
29
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
We Have a Design System, Now What?
morganepeng
50
7.2k
Transcript
1 AppleͷΞχϝʔγϣϯͳͥඒ͍͠ͷ͔ߟ͑Δ ~ίϯτϩʔϧηϯλʔͷ؍~ ຊܦࡁ৽ฉࣾɹத ສᣦಸ iOSDC2018 AppleͷΞχϝʔγϣϯͳͥඒ͍͠ͷ͔ߟ͑Δ ίϯτϩʔϧηϯλʔͷ؍Λൃද͠·͢
2 Marina Nakagawa @marina10172013(·Γʔͳ) ຊܦࡁ৽ฉࣾͷiOSΤϯδχΞ ిࢠ൛ΞϓϦɼࢴ໘ϏϡʔΞʔΞϓϦͷ։ൃ Adobe͖Ͱ͢ ͡Ί·ͯ͠ຊܦࡁ৽ฉࣾͰΤϯδχΞͯ͠·͢தͰ͢ ܦ৽ฉͷిࢠ൛ΞϓϦͱࢴ໘ϏϡʔΞʔΛ࡞͍ͬͯ·͢ ΤϯδχΞΛ͡Ίͯ̍Ͱ͢
Adobe͖Ͱ͢ ͜͜ʹొஃ͢Δͷࡢ͔ΒͷඪͩͬͨͷͰ΄Μͱʹخ͍͠Ͱ͢ ΑΖ͓͘͠Ͷ͕͍͠·͢
3 AppleͷΞχϝʔγϣϯͬͯඒ͍͠ɾɾɾ ಥવͰ͕͢ AppleͷΞχϝʔγϣϯͬͯඒ͍͠Ͱ͢ΑͶɾɾɾ ;ͩΜͨΓલͷΑ͏ʹ͍ͬͯΔ iPhone iPadɺͲ͏ͯ͜͠Μͳʹؾ࣋ͪͷ͍͍͍৺ʹͳΔͷ͔ؾʹͳΓ·ͨ͠
4 iOS10 iOS11 iOS11ΑΓେ͖͘ίϯτϩʔϧηϯλʔ͕มΘͬͨ ͜͜Ͱͨ͠ͷ͕ίϯτϩʔϧηϯλʔͰ͢ iOS11ΑΓͯ͢ͷػೳΛҰͭͷΟϯυʹ·ͱΊɺ Իը໘ͷ໌Δ͞ͳͲΞϓϦΛ্ཱͪ͛ͳͯ͘ɺ؆୯ʹૢ࡞Ͱ͖ΔΑ͏ʹมߋ͞Ε·ͨ͠ɻ
5 Իը໘ͷ໌Δ͞ ΞϓϦΛ্ཱͪ͛ͳͯ͘ɺखܰʹૢ࡞Ͱ͖Δ ͭ·Γมߋ͕ߦΘΕͨͱ͍͏͜ͱͦΕ͚ͩधཁ͕͋ͬͨͱ͍͏͜ͱͰ͢ΑͶ
6 ίϯτϩʔϧηϯλʔ͍উख৮Γ৺ʹରͯ͠ Ұ൪ؾΛͬͨͱ͜ΖͳͷͰɾɾɾʁ ͦ͜ͰࢲɺApple͕͍উख৮Γ৺ʹରͯ͠Ұ൪ؾΛͬͨͱ͜ΖͰͳ͍͔ͱߟ͑ɺ
7 ίϯτϩʔϧηϯλʔ͍উख৮Γ৺ʹରͯ͠ Ұ൪ؾΛͬͨͱ͜ΖͳͷͰɾɾɾʁ ΞχϝʔγϣϯͱϞʔγϣϯΤϑΣΫτΛ ؍ͯ͠ΈΑ͏ʂ ࠓճணͯ͠ΞχϝʔγϣϯΛ؍͢Δ͜ͱʹ͠·ͨ͠
8 ຊ͢͜ͱ iOSͷAnimationͷׂ ΞχϝʔγϣϯͱϞʔγϣϯΛ؍͢Δ 1 2 Appleͷࢦ͢ํͱ 3 ຊ͓͢Δ͜ͱԼه̏ͭͷςʔϚͰ͢
9 iOSͷAnimationͷׂ 1 ·ͣϞʔγϣϯΛղੳ͢Δલʹ iOSͷAnimationͷׂΛ֬ೝ͢ΔͨΊ Human Interface GuidelineͷAnimationΛݟ͓͖ͯ·͠ΐ͏
10 AppleͷHGIͷAnimetionΑΓ Human Interface GuidelineͷAnimationΑΓҾ༻ υΩϡϝϯτʹ͜ͷΑ͏ʹհ͞Ε͍ͯ·͢
11 ҰݴͰݴ͏ͱ ΞχϝʔγϣϯͰϢʔβʔͱίϯςϯπΛͭͳ͗·͠ΐ͏ ҰݴͰݴ͏ͱɹΞχϝʔγϣϯͰϢʔβʔͱίϯςϯπΛͭͳ͗·͠ΐ͏ͱ͍͏͜ͱͰ͢
12 ΞχϝʔγϣϯͱϞʔγϣϯΛ؍͢Δ 2 ͦΕͰ؍Λ࢝Ί·͠ΐ͏
Ϣʔβʔͷಈ͖ʹԠ͡ΔϞʔγϣϯ ยखͰ͍͍͢ઃܭ ࢹࠩޮՌΛ֦ு͢Δख๏ 13 ஈ֊Ͱࣔ͢ ϞʔγϣϯΛղੳͯ͠Θ͔ͬͨ͜ͱΛ̐ͭͷʹྨͨ͠ΜͰ͕͢ ࣌ؒͷ߹্ຊ
Ϣʔβʔͷಈ͖ʹԠ͡ΔϞʔγϣϯ ยखͰ͍͍͢ઃܭ ࢹࠩޮՌΛ֦ு͢Δख๏ 14 ஈ֊Ͱࣔ͢ ͪ͜Β͚ͩհ͠·͢ ຊͷొஃࢿྉͱͱʹΓͷ༰twitterͰެ։͢ΔͷͰؾʹͳͬͨํݟͯΈ͍ͯͩ͘͞
15 ࢹࠩޮՌΛ֦ு͢Δख๏ ࢹࠩޮՌΛ֦ு͢Δख๏ʹ͍ͭͯհ͠·͢
16 ίϯτϩʔϧηϯλʔͷग़͠ೖΕΛղੳ ͪ͜ΒͷίϯτϩʔϧηϯλʔΛ։͍ͯด͡ΔಈըΛըͯ͠εϩʔʹͯ͠
17 AfterEffectsͰτϨʔεͯ͠ཁૉΛղ͠·ͨ͠ AfterEffectsͰಈըͷUIτϨʔεΛߦ͍·ͨ͠ ࠨ͔Βॱ൪ʹݩಈըɺઃఆը໘ͷഎܠͷಈ͖ɺ্͔Β͔Ϳ͞Δίϯςϯπͷಈ͖ͱಁ໌ͷมԽͰͦΕͧΕͷཁૉΛղ͠·ͨ͠
18 എܠͷಈ͖ ίϯτϩʔϧηϯλʔ্͕ʹ͍Δ ͱ͍͏Ԟߦ͖දݱ ·ͣഎܠͷಈ͖ʹணͯ͠Έ·͠ΐ͏ ըͱτϨʔεͨ͠ը໘ΛݟൺͯΈΔͱ ઃఆը໘ͷίϯςϯπ্͕͔Β͔Ϳ͞Δίϯτϩʔϧηϯλʔͷදࣔʹ߹Θͤͯগ͠খ͘͞ͳΔ͜ͱ͕Θ͔Γ·͢ɻ ͜ΕԞߦ͖ײΛഎܠͷಈ͖ʹΑͬͯ࡞Γग़͍ͯ͠Δͱߟ͑ΒΕ·͢
19 ίϯςϯπͷಈ͖ ՃΛঃʑʹ૿͢͜ͱͰ Ԟ͔Βු͖ग़ͯ͘ΔΑ͏ͳग़ݱΛͤ͞Δ ͦΕͰ࣍ʹίϯςϯπͷಈ͖ʹணͯ͠Έ·͠ΐ͏ɻ ίϯςϯπͷಈ͖ΛΑ͘ݟͯΈΔͱՃΛঃʑʹ૿͠ͳ͕Βɺ໘ੵΛ͛දࣔ͞Ε͍ͯΔ͜ͱ͕Θ͔Γ·͢ɻ ͜ΕΛࢹ֮Խ͢ΔͱӈଆͷਤͷΑ͏ʹͳΓ·͢ ίϯςϯπ͕Ԟ͔Βු͖ग़ͯ͘ΔΑ͏ͳผͷϨΠϠʔ͕͋ΔΑ͏ͳײ͕֮૿͢͜ͱ͕Θ͔Γ·͢ɻ ·ͨ͏Ұͭண͍ͯ͠΄͍͠ͷ͕ɺίϯςϯπͷ͕ΔλΠϛϯά͕ಉ͡ͱ͍͏͜ͱͰ͢ ͜Ε࣍ʹհ͢Δಁ໌ͷมԽͷλΠϛϯάͷͱେ͖ؔ͘Θ͖ͬͯ·͢
20 ্͔ΒԼͷཁૉͷॱͰಁ໌͕Լ͕͍ͬͯ͘ ग़ݱ࣌ ཁૉͷಁ໌ͷಈ͖ ͦΕͰཁૉͷಁ໌ͷಈ͖ํʹணͯ͠Έ·͢ ͪ͜ΒͷεϥΠυͰࠨଆ͔Βॱ൪ʹ࣌ܥྻ͕ਐΜͰ͍͖·͢ɻ ·ͣίϯςϯπ͕ग़ݱ͢Δͱ͜ΖΛͬ͘͡Γ؍ͯ͠Έ·͠ΐ͏
21 ্͔ΒԼͷཁૉͷॱͰಁ໌͕Լ͕͍ͬͯ͘ ग़ݱ࣌ ཁૉͷಁ໌ͷಈ͖ ࣮ػͷࢹͰ֬ೝͮ͠Β͍ͷͰ্͕࣮͔͢ΒԼͷॱ൪Ͱπʔϧͷಁ໌͕Լ͕͍͖ͬͯ·͢
22 ग़ݱ࣌ ཁૉͷಁ໌ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌͕Լ͕͍ͬͯ͘ ࣮ػͷࢹͰ֬ೝͮ͠Β͍ͷͰ্͕࣮͔͢ΒԼͷॱ൪Ͱπʔϧͷಁ໌͕Լ͕͍͖ͬͯ·͢
23 ग़ݱ࣌ ཁૉͷಁ໌ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌͕Լ͕͍ͬͯ͘ ͜ͷ͋ͨΓͷஈ֊ʹͳͬͯ͘Δͱͯ͢ͷπʔϧ͕ಉ͘͡Β͍ͷಁ໌ʹͳΓ
24 ग़ݱ࣌ ཁૉͷಁ໌ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌͕Լ͕͍ͬͯ͘ ࠷ޙͷஈ֊Ͱͯ͢ͷಁ໌͕ἧ͏Α͏ͳಈ͖ํΛ͍ͯ͠·ͨ͠
25 ্͔ΒԼͷཁૉͷॱͰಁ໌্͕͕͍ͬͯ͘ ফࣦ࣌ ໌Δ͞ͱԻͷಁ໌Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌ͷಈ͖ ফࣦ͢Δͱ͖ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌͕͕͍͋ͬͯ͘ΜͰ͕͢
26 ্͔ΒԼͷཁૉͷॱͰಁ໌্͕͕͍ͬͯ͘ ফࣦ࣌ ໌Δ͞ͱԻͷಁ໌Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌ͷಈ͖ ফࣦ͢Δͱ͖ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌͕͕͍͋ͬͯ͘ΜͰ͕͢
27 ফࣦ࣌ ໌Δ͞ͱԻͷಁ໌Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌্͕͕͍ͬͯ͘ ফࣦ͢Δͱ͖ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌͕͕͍͋ͬͯ͘ΜͰ͕͢
28 ফࣦ࣌ ໌Δ͞ͱԻͷಁ໌Ұ൪࠷ޙʹফ͑Δ ཁૉͷಁ໌ͷಈ͖ ্͔ΒԼͷཁૉͷॱͰಁ໌্͕͕͍ͬͯ͘ ফࣦ͢Δͱ͖ಉ༷ʹ্͔ΒԼͷཁૉͷॱ൪Ͱಁ໌͕͕͍͋ͬͯ͘ΜͰ͕͢
29 Կނ͔Θ͔Γ·ͤΜ͕ɺ࣮Իྔͱը໘ϥΠτͷಁ໌͕Ұ൪࠷ޙʹফ͑Δͱ͍͏͜ͱ͕ൃݟͰͨ͠
30 ཁૉͷಁ໌ͷಈ͖ ্͔ΒΓग़ͯ͘ΔΑ͏ͳײ͕֮૿͢ ࣮ࡍͷେ͖͞Λม͑ΔͷͰͳ͘ ಁ໌ͷมԽͷλΠϛϯάΛม͑Δ ಁ໌Λม͑ΔλΠϛϯάΛม͑ΔͱͲ͏͍͏ޮՌ͕ੜΈग़͞ΕΔͷͰ͠ΐ͏͔ʁ ઌఔͷίϯςϯπͷಈ͖ͷ߲Ͱհͨ͠ͱ͓Γ࣮ࡍʹίϯςϯπ͕͕ΔλΠϛϯάมΘ͍ͬͯ·ͤΜɺ͔͠͠ಁ໌͕มԽ͢ΔλΠϛϯάΛม͑Δ͜ͱͰɺ࣍ʑ ͱίϯςϯπ্͕͔ΒΓग़ͯ͘ΔΑ͏ͳײ͕֮૿͞Ε͍ͯΔ͜ͱ͕Θ͔Γ·͢
31 ࢹࠩޮՌΛ֦ு͢ΔͨΊͷҙਤ ߟ iOS7͔Βಋೖ͞ΕͨࢹࠩޮՌͰ͕͢ɺAppleͲ͏ͯ͠ࢹࠩޮՌΛ֦ு͢ΔΑ͏ͳϞʔγϣϯΛऔΓೖΕ͖ͯͨͷͰ͠ΐ͏͔ ؾʹͳͬͯௐͯΈ·ͨ͠ɻ
32 ࢹࠩޮՌΛͳͥڧௐ͢Δͷ͔ ༥͚ΔσβΠϯΑΓҾ༻ όʔνϟϧͳ࣭ײදݱ ίοϓͳͲͷΛखʹ͚࣋ͪΔͱޫͷࣹʹΑͬͯ ࡐ࣭ͷ࣭ײ͕Θ͔Δ AppleͦΕΛը໘ͷதͰ࣭ײදݱͰ͖ΔՄೳੑΛࣔͨ͠ ΠϯλʔϑΣΠεʗΠϯλϥΫγϣϯσβΠϯΛݚڀ͍ͯ͠Δล͞Μ͕ॻ͍ͨ ༹͚ΔσβΠϯʹΑΔͱɺ ͳΜͰ͍͍ΜͰ͕͢ɺͳʹ͔Λ্࣋ͪ͛ͨΓ৮ͬͨΓ͢ΔͱޫͷࣹʹΑͬͯࡐ࣭ͷ࣭ײ͕Θ͔Γ·͢ΑͶɻ
AppleࢹࠩޮՌΛ͚ͭΔ͜ͱͰɺը໘ͷதͰόʔνϟϧͳ࣭ײදݱͱͯ͠දݱͰ͖ΔՄೳੑΛࣔͨ͠ͷͰͳ͍͔ͱ͍͏આ͕͋Γ·ͨ͠
33 ·ͱΊ 4 ࠷ޙʹ·ͱΊͰ͢
34 ҙਤʹԠͯ͡దͳΞχϝʔγϣϯΛ ͔͍ͭͬͯΔ͔ΒͳͷͰɾɾɾ ͳͥAppleͷΞχϝʔγϣϯ͕ඒ͍͠ͷ͔ ࠓճղੳΛͨ݁͠Ռ͔ΒAppleͷΞχϝʔγϣϯ͕ͳͥඒ͍͔͠Λߟ͑ͯΈͨ݁ՌɺҙਤʹԠͯ͡దͳΞχϝʔγϣϯΛ͍ͬͯΔ͔ΒͳͷͰͳ͍͔ͱࢥ͍·ͨ͠
35 ίϯϐϡʔλ(iPhone)ͱ͍͏ಓ۩Λ ͍ͬͯΔ͜ͱΛҙࣝͤ͞ͳ͍ https://developer.apple.com/videos/play/wwdc2018/803/?time=221ΑΓҾ༻ WWDC2018 Designing Fluid InterfacesΑΓ WWDC2018 Designing
Fluid InterfacesʹΑΔͱ iPhoneͱ͍͏ಓ۩Λ͍ͬͯΔ͜ͱΛҙࣝͤ͞ͳ͍
36 iPhoneͱ͍͏πʔϧࣗମ͕ ࣗͷମͷԆͱײ͡ΔΑ͏ͳײ֮Λࢦ͍ͯ͠Δ https://developer.apple.com/videos/play/wwdc2018/803/?time=221(3:34ඵۙΑΓҾ༻) WWDC2018 Designing Fluid InterfacesΑΓ ·ΔͰ͔͋ͨࣗͷମͷԆͱײ͡ΔΑ͏ͳ͍৺Λࢦ͍ͯ͠ΔͱಈըͰհ͞Ε͍ͯ·ͨ͠ ͜ͷΑ͏ʹOSࣗମ͕ɺࣗͷମͷҰ෦ͱײ͡ΔΑ͏ͳײ֮Λࢦͯ͠࡞ΒΕ͍ͯΔͨΊɺAppleͷΞχϝʔγϣϯඒ͍͠ͱࢥ͏ͷͩͱࢥ͍·͢ɻ
37 ΤϯδχΞɾσβΠφʔͳͲͷ৬छΛΘͣ ࣮ੈքΛ؍ͯ͠ ମײ֮ʹ͍ۙϓϩμΫτΛࢦ͍͖͍ͯͨ͠ ͍͞͝ʹ ͜Ε͔ΒɺΤϯδχΞɾσβΠφʔͳͲͷ৬छΛΘͣ ࣮ੈքΛ؍ͯ͠ମײ֮ʹ͍ۙϓϩμΫτΛࢦ͍͖͍ͯͨ͠Ͱ͢
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 ٕज़ॻయͰܦΤϯδχΞͷٕज़ॻΛग़͠·͢ ͜ͷLTͷ༰Λߋʹৄ͘͠ॻ͍ͨΛࡌͤ·͢ ·ٕͨज़ॻయͰܦͷΤϯδχΞ͕ू·ٕͬͯज़ॻΛग़͠·͢ ͜ͷLTͷ༰Λߋʹৄ͘͠ॻ͍ͨܝࡌ͠·͢ ੋඇؾʹͳͬͨํݟ͍ͯͩ͘͞
40 ຊܦࡁ৽ฉࣾओ࠵ େखொSwiftษڧձͬͯ·͢ ࣍ճ10݄16ʢՐʣେखொܦϏϧͰ։࠵ʂ એͰ͕͢ ຊܦࡁ৽ฉࣾओ࠵SwiftษڧձΛ10݄16ʹ։࠵༧ఆͰ͢ ੋඇ༡ͼʹདྷ͍ͯͩ͘͞
41 ͋Γ͕ͱ͏͍͟͝·ͨ͠