フロントエンドだからこそ気を配りたいアニメーション

by yusuke omi

Slide 1

Slide 1 text

ϑ ϩ ϯ τ Τ ϯ υ ͩ ͔ Β ͜ ͦ ؾ Λ ഑ Γ ͨ ͍ Ξ χ ϝ ʔ γ ϣ ϯ ! - * ( ' & 4 : 6 4 6 , & 0 . * ' S P O U F O E & O H J O F S

Slide 2

Slide 2 text

খ ݟ ༞ հ ೥͔Β-*(ͷϑϩϯτΤϯυΤϯδχΞͱͯ͠δϣΠϯɻ ࠷ۙ͸ίʔϙϨʔτɾϓϩϞʔγϣϯαΠτΛத৺ʹ੍࡞ɻ $44ઃܭͱޮ཰Λߟ͑ͨ։ൃΛಘҙͱ͍ͯ͠Δɻ ' S PO U & O E & O H J O F S !*N @ ! *N

Slide 3

Slide 3 text

ٕ ज़ త ͳ ࿩ ͸ ࠓ ճ ΄ ΅ ͠ · ͤ Μ ʜ Τ ϯ δ χ Ξ ͷ ษ ڧ ձ Ͱ ͢ ͕

Slide 4

Slide 4 text

8 F C α Π τ ͸ ಈ ͘ ͷ ͕ ౰ ͨ Γ લ

Slide 5

Slide 5 text

8FC4JUF %FTJOHOFS 1T "J 'SPOUFOE&OHJOFS " O J N B U J P O %FTJOH

Slide 6

Slide 6 text

" O J N B U J P O ' S P O U F O E ʷ

Slide 7

Slide 7 text

ͳ ͥ 8 F C ͸ ಈ ͘ Α ͏ ʹ ͳ ͬ ͨ ͷ ͔ ʁ

Slide 8

Slide 8 text

ϒ ϥ ΢ β ͷ ਐ Խ

Slide 9

Slide 9 text

$ 4 4 Ξ χ ϝ ʔ γ ϣ ϯ ͷ ొ ৔ ϒ ϥ ΢ β ͷ Ϩ ϯ μ Ϧ ϯ ά ε ϐ ʔ υ ͷ ޲ ্ $ B O W B T 8 F C ( -

Slide 10

Slide 10 text

ϒ ϥ ΢ β ͷ ਐ Խ ͸ σ β Π ϯ ʹ ΋ Ө ڹ Λ ༩ ͑ ͨ

Slide 11

Slide 11 text

M a t e r i a l D e s i g n

Slide 12

Slide 12 text

Ϣ ʔ β ʔ ͕ Կ ͔ Ξ Ϋ γ ϣ ϯ Λ ى ͜ ͢ ͜ ͱ ͸ ί ϯ ς ϯ π ͷ ม ׵ ఺ Ͱ ͢ ɻ ࣗ ෼ ͷ ͓ ͜ ͳ ͬ ͨ Ξ Ϋ γ ϣ ϯ ʹ ର ͠ ͯ ҙ ຯ ͷ ͋ Δ Ϟ ʔ γ ϣ ϯ ͕ ى ͜ Δ ͜ ͱ Ͱ ɺ ஫ ҙ Λ Ҿ ͍ ͨ Γ ɺ 6 * ͷ ཧ ղ Λ ॿ ͚ ͨ Γ ɺ Ϣ ʔ β ʔ ʹ ࿈ ଓ త ͳ ମ ݧ Λ ఏ ڙ ͢ Δ ख ॿ ͚ Λ ͢ Δ ͜ ͱ ͕ Ͱ ͖ · ͢ ɻ Introduction – Material design – Google design guidelines https://www.google.com/design/spec/material-design/introduction.html

Slide 13

Slide 13 text

ͳ ͥ Ξ χ ϝ ʔ γ ϣ ϯ ͞ ͤ Δ ͷ ʁ

Slide 14

Slide 14 text

ง ғ ؾ Λ ఻ ͑ Δ ͨ Ί ͷ Ξ χ ϝ ʔ γ ϣ ϯ Ϣ ʔ β ʔ Π ϯ λ ʔ ϑ Σ ʔ ε ͱ ͠ ͯ ͷ Ξ χ ϝ ʔ γ ϣ ϯ

Slide 15

Slide 15 text

Ϣ ʔ β ʔ Π ϯ λ ʔ ϑ Σ ʔ ε ͱ ͠ ͯ ͷ Ξ χ ϝ ʔ γ ϣ ϯ

Slide 16

Slide 16 text

Ϣ ʔ β ʔ ͷ Ξ Ϋ γ ϣ ϯ ʹ ର ͠ ͯ ൓ Ԡ ͢ Δ Ξ χ ϝ ʔ γ ϣ ϯ

Slide 17

Slide 17 text

ϗ ό ʔ Ϋ Ϧ ο Ϋ λ ο ϓ ε ϫ Π ϓ Ի ੠ ೖ ྗ ը ૾ ೖ ྗ ͳ Μ Β ͔ ͷ ൓ Ԡ Λ ى ͜ ͢

Slide 18

Slide 18 text

5 X J U U F S ͷ ϋ ʔ τ Ϙ λ ϯ ( P P H M F Ի ੠ ݕ ࡧ I U U Q T U X J U U F S D P N I U U Q T X X X H P P H M F D P K Q ϗ ό ʔ Ξ χ ϝ ʔ γ ϣ ϯ I U U Q O V S U V S F E J H J U B M D P N X P S L

Slide 19

Slide 19 text

৘ ใ ͷ ཧ ղ Λ ख ॿ ͚ ͢ Δ Ξ χ ϝ ʔ γ ϣ ϯ

Slide 20

Slide 20 text

ಈ ͖ Λ ͭ ͚ Δ ͜ ͱ Ͱ Ϣ ʔ β ʔ ͷ ཧ ղ ͕ ਂ · Δ ໨ ઢ Λ ༠ ಋ ͢ Δ

Slide 21

Slide 21 text

࣍ ͷ ৘ ใ Λ ϑ Σ ʔ υ Π ϯ ͞ ͤ Δ ͜ ͱ Ͱ ໨ ઢ ͷ ༠ ಋ Λ ߦ ͏ I U U Q X F F L F O E T F O E B J D P N I B O Z V I U N M Լ ͷ ํ ޲ ΁ Ξ χ ϝ ʔ γ ϣ ϯ ͢ Δ ͜ ͱ Ͱ ε Ϋ ϩ ʔ ϧ Λ ଅ ͢ I U U Q E B E B E B U B O F U

Slide 22

Slide 22 text

Ϣ ʔ β ʔ ମ ݧ Λ ͭ ͳ ͙ Ξ χ ϝ ʔ γ ϣ ϯ

Slide 23

Slide 23 text

ը ໘ ભ Ҡ ࣌ ʹ ɺ γ ʔ Ϝ Ϩ ε ʹ ભ Ҡ ͞ ͤ Δ Ϣ ʔ β ʔ ͷ ؔ ৺ ɾ ஫ ҙ Λ ͦ Β ͞ ͳ ͍

Slide 24

Slide 24 text

γ ʔ Ϝ Ϩ ε ʹ ͭ ͳ ͙ ͜ ͱ Ͱ Ϣ ʔ β ʔ ͷ ҙ ࣝ Λ ్ ੾ Ε ͞ ͤ ͳ ͍ I U U Q N B T T B S U K Q Q S P K F D U T γ ʔ Ϝ Ϩ ε ʹ ͭ ͳ ͙ ͜ ͱ Ͱ Ϣ ʔ β ʔ ͷ ҙ ࣝ Λ ్ ੾ Ε ͞ ͤ ͳ ͍ I U U Q N B T T B S U K Q Q S P K F D U T

Slide 25

Slide 25 text

ง ғ ؾ Λ ఻ ͑ Δ ͨ Ί ͷ Ξ χ ϝ ʔ γ ϣ ϯ

Slide 26

Slide 26 text

ง ғ ؾ Λ ఻ ͑ Δ ͨ Ί ͷ Ξ χ ϝ ʔ γ ϣ ϯ " / * . " - I U U Q X X X B O J N B M N B E F D P N

Slide 27

Slide 27 text

ง ғ ؾ Λ ఻ ͑ Δ ͨ Ί ͷ Ξ χ ϝ ʔ γ ϣ ϯ ௒ ಛ ક ന ௽ ఱ ۭ I U U Q X X X I B L V U T V S V D P K Q U F O L V

Slide 28

Slide 28 text

ͦ Ε ͧ Ε α Π τ ʹ ߹ Θ ͤ ͨ ද ݱ ͕ ͋ Δ

Slide 29

Slide 29 text

ε ϐ ʔ υ

Slide 30

Slide 30 text

S l o w F a s t ϙ ο ϓ ͳ ͢ Δ Ͳ ͍ ͔ ͨ ͍ ػ ց త ε λ Π Ϧ ο γ ϡ ͓ ͪ ͭ ͍ ͨ ΍ ͞ ͠ ͍ ΍ Θ Β ͔ ͍ ࣗ વ ͳ ༗ ػ త

Slide 31

Slide 31 text

Π ʔ δ ϯ ά

Slide 32

Slide 32 text

s w i n g l i n e a r ࣗ વ ͳ ಈ ͖ ػ ց త

Slide 33

Slide 33 text

ೃ છ Έ ͷ ͋ Δ ಈ ͖ ࣗ વ ͳ ಈ ͖ Ϣ ʔ β ʔ ͕ ཧ ղ ͠ ΍ ͢ ͍ ਌ ͠ Έ ΍ ͢ ͍ ಈ ͖

Slide 34

Slide 34 text

& B T J O H ' V O D U J P O ૣ ݟ ද I U U Q F B T J O H T O F U K B

Slide 35

Slide 35 text

Ξ χ ϝ ʔ γ ϣ ϯ Λ ͢ Δ ࡍ ʹ ؾ Λ ͭ ͚ Δ ΂ ͖ ͜ ͱ ͸ ʁ

Slide 36

Slide 36 text

͸ ͍ ͑ ͳ ͳ ͠ ͠ · ͏ · · Μ ͝ ʔ ͝ Γ Β Β ͣ ΂ Γ ʔ

Slide 37

Slide 37 text

͸ ͍ ͑ ͳ ͳ ͠ ͠ · ͏ · · Μ ͝ ʔ ͝ Γ Β Β ͣ ΂ Γ ʔ

Slide 38

Slide 38 text

͸ ͍ ͑ ͳ ͳ ͠ ͠ · ͏ · · Μ ͝ ʔ ͝ Γ Β Β ͣ ΂ Γ ʔ

Slide 39

Slide 39 text

͸ ͍ ͑ ͳ ͳ ͠ ͠ · ͏ · · Μ ͝ ʔ ͝ Γ Β Β ͣ ΂ Γ ʔ

Slide 40

Slide 40 text

Կ Λ ఻ ͑ ͨ ͍ ͷ ͔ ʁ Կ Λ ݟ ͤ ͨ ͍ ͷ ͔ ʁ

Slide 41

Slide 41 text

ε τ ʔ Ϧ ʔ

Slide 42

Slide 42 text

Ξ χ ϝ ʔ γ ϣ ϯ Λ ͠ ͨ ࣌ ʹ Ϣ ʔ β ʔ ʹ Ͳ Μ ͳ ෩ ʹ ࢥ ͬ ͯ ΋ Β ͍ ͨ ͍ ͷ ͔

Slide 43

Slide 43 text

ͱ Γ ͋ ͑ ͣ ͔ ͬ ͜ ͍ ͍ ಈ ͖ ແ ବ ʹ ಈ ͘ ง ғ ؾ ʹ ߹ ͬ ͯ ͍ ͳ ͍

Slide 44

Slide 44 text

ง ғ ؾ Λ ఻ ͑ Δ ͨ Ί ͷ Ξ χ ϝ ʔ γ ϣ ϯ Ϣ ʔ β ʔ Π ϯ λ ʔ ϑ Σ ʔ ε ͱ ͠ ͯ ͷ Ξ χ ϝ ʔ γ ϣ ϯ

Slide 45

Slide 45 text

8FC %FTJOHOFS 'SPOUFOE&OHJOFS

Slide 46

Slide 46 text

Ξ χ ϝ ʔ γ ϣ ϯ ͷ ͦ ͷ ઌ Λ

Slide 47

Slide 47 text

ݟ Δ ਓ ͕ ৺ ஍ Α ͍ Ξ χ ϝ ʔ γ ϣ ϯ Λ

Slide 48

Slide 48 text

͝ ੩ ௌ ͋ Γ ͕ ͱ ͏ ͝ ͟ ͍ · ͠ ͨ ɻ 5 X J U U F S ! * N @ ( J U I V C ! * N