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

2016/04/26 @ LIGFES

Transcript

1. ϑ ϩ ϯ τ Τ ϯ υ ͩ ͔ Β ͜ ͦ ؾ Λ ഑ Γ ͨ ͍
   Ξ χ ϝ ʔ γ ϣ ϯ          
   ! - * ( ' & 4 : 6 4 6 , &
   0 . *
   
   ' S P O U  F O E
   & O H J O F S
2. খ ݟ
   ༞ հ ೥͔Β-*(ͷϑϩϯτΤϯυΤϯδχΞͱͯ͠δϣΠϯɻ
   ࠷ۙ͸ίʔϙϨʔτɾϓϩϞʔγϣϯαΠτΛத৺ʹ੍࡞ɻ
   $44ઃܭͱޮ཰Λߟ͑ͨ։ൃΛಘҙͱ͍ͯ͠Δɻ ' S PO U  & O E
   & O H J O F S !*N @
   
   
   
   
   
   
   
   ! *N  
3. ٕ ज़ త ͳ ࿩ ͸ ࠓ ճ ΄ ΅ ͠ · ͤ Μ ʜ Τ ϯ δ χ Ξ ͷ ษ ڧ ձ Ͱ ͢ ͕
4. 8 F C α Π τ ͸ ಈ ͘ ͷ ͕ ౰ ͨ Γ લ
5. 8FC
   4JUF %FTJOHOFS 1T "J 'SPOUFOE
   &OHJOFS
   " O J N B U J P O %FTJOH
6. " O J N B U J P O ' S P O U  F O E ʷ
7. ͳ ͥ 8 F C ͸ ಈ ͘ Α ͏ ʹ ͳ ͬ ͨ ͷ ͔ ʁ
8. ϒ ϥ ΢ β ͷ ਐ Խ
9. $ 4 4 Ξ χ ϝ ʔ γ ϣ ϯ ͷ ొ ৔ ϒ ϥ ΢ β ͷ Ϩ ϯ μ Ϧ ϯ ά ε ϐ ʔ υ ͷ ޲ ্ $ B O W B T 8 F C ( -
10. ϒ ϥ ΢ β ͷ ਐ Խ ͸
    σ β Π ϯ ʹ ΋ Ө ڹ Λ ༩ ͑ ͨ
11. M a t e r i a l D e s i g n
12. Ϣ ʔ β ʔ ͕ Կ ͔ Ξ Ϋ γ ϣ ϯ Λ ى ͜ ͢ ͜ ͱ ͸ ί ϯ ς ϯ π ͷ ม ׵ ఺ Ͱ ͢ ɻ
    ࣗ ෼ ͷ ͓ ͜ ͳ ͬ ͨ Ξ Ϋ γ ϣ ϯ ʹ ର ͠ ͯ ҙ ຯ ͷ ͋ Δ Ϟ ʔ γ ϣ ϯ ͕ ى ͜ Δ ͜ ͱ Ͱ ɺ ஫ ҙ Λ Ҿ ͍ ͨ Γ ɺ 6 * ͷ ཧ ղ Λ ॿ ͚ ͨ Γ ɺ Ϣ ʔ β ʔ ʹ ࿈ ଓ త ͳ ମ ݧ Λ ఏ ڙ ͢ Δ ख ॿ ͚ Λ ͢ Δ ͜ ͱ ͕ Ͱ ͖ · ͢ ɻ Introduction – Material design – Google design guidelines https://www.google.com/design/spec/material-design/introduction.html
13. ͳ ͥ Ξ χ ϝ ʔ γ ϣ ϯ ͞ ͤ Δ ͷ ʁ
14. ง ғ ؾ Λ ఻ ͑ Δ ͨ Ί ͷ Ξ χ ϝ ʔ γ ϣ ϯ Ϣ ʔ β ʔ Π ϯ λ ʔ ϑ Σ ʔ ε ͱ ͠ ͯ ͷ
    Ξ χ ϝ ʔ γ ϣ ϯ
    
15. Ϣ ʔ β ʔ Π ϯ λ ʔ ϑ Σ ʔ ε ͱ ͠ ͯ ͷ
    Ξ χ ϝ ʔ γ ϣ ϯ
    
16. Ϣ ʔ β ʔ ͷ Ξ Ϋ γ ϣ ϯ ʹ ର ͠ ͯ
    ൓ Ԡ ͢ Δ Ξ χ ϝ ʔ γ ϣ ϯ
    
17. ϗ ό ʔ
    
    Ϋ Ϧ ο Ϋ
    
    λ ο ϓ
    
    ε ϫ Π ϓ
    Ի ੠ ೖ ྗ
    
    ը ૾ ೖ ྗ ͳ Μ Β ͔ ͷ ൓ Ԡ Λ ى ͜ ͢
18. 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 
19. ৘ ใ ͷ ཧ ղ Λ ख ॿ ͚ ͢ Δ Ξ χ ϝ ʔ γ ϣ ϯ
    
20. ಈ ͖ Λ ͭ ͚ Δ ͜ ͱ Ͱ Ϣ ʔ β ʔ ͷ ཧ ղ ͕ ਂ · Δ ໨ ઢ Λ ༠ ಋ ͢ Δ
21. ࣍ ͷ ৘ ใ Λ ϑ Σ ʔ υ Π ϯ ͞ ͤ Δ ͜ ͱ Ͱ ໨ ઢ ͷ ༠ ಋ Λ ߦ ͏ 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 
22. Ϣ ʔ β ʔ ମ ݧ Λ ͭ ͳ ͙ Ξ χ ϝ ʔ γ ϣ ϯ
23. ը ໘ ભ Ҡ ࣌ ʹ ɺ γ ʔ Ϝ Ϩ ε ʹ ભ Ҡ ͞ ͤ Δ
    Ϣ ʔ β ʔ ͷ ؔ ৺ ɾ ஫ ҙ Λ ͦ Β ͞ ͳ ͍
24. γ ʔ Ϝ Ϩ ε ʹ ͭ ͳ ͙ ͜ ͱ Ͱ Ϣ ʔ β ʔ ͷ ҙ ࣝ Λ ్ ੾ Ε ͞ ͤ ͳ ͍ 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 
25. ง ғ ؾ Λ ఻ ͑ Δ ͨ Ί ͷ
    Ξ χ ϝ ʔ γ ϣ ϯ
    
26. ง ғ ؾ Λ ఻ ͑ Δ ͨ Ί ͷ
    Ξ χ ϝ ʔ γ ϣ ϯ
    " / * . " - I U U Q    X X X  B O J N B M N B E F  D P N 
27. ง ғ ؾ Λ ఻ ͑ Δ ͨ Ί ͷ
    Ξ χ ϝ ʔ γ ϣ ϯ
    ௒ ಛ ક
    ന ௽
    ఱ ۭ 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 
28. ͦ Ε ͧ Ε α Π τ ʹ ߹ Θ ͤ ͨ ද ݱ ͕ ͋ Δ
29. ε ϐ ʔ υ
30. S l o w F a s t ϙ ο ϓ ͳ ͢ Δ Ͳ ͍ ͔ ͨ ͍ ػ ց త ε λ Π Ϧ ο γ ϡ ͓ ͪ ͭ ͍ ͨ ΍ ͞ ͠ ͍ ΍ Θ Β ͔ ͍ ࣗ વ ͳ ༗ ػ త
31. Π ʔ δ ϯ ά
32. s w i n g l i n e a r ࣗ વ ͳ ಈ ͖ ػ ց త
33. ೃ છ Έ ͷ ͋ Δ ಈ ͖
    ࣗ વ ͳ ಈ ͖ Ϣ ʔ β ʔ ͕ ཧ ղ ͠ ΍ ͢ ͍ ਌ ͠ Έ ΍ ͢ ͍ ಈ ͖
34. & 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
35. Ξ χ ϝ ʔ γ ϣ ϯ Λ ͢ Δ ࡍ ʹ ؾ Λ ͭ ͚ Δ ΂ ͖ ͜ ͱ ͸ ʁ
36. ͸ ͍ ͑ ͳ ͳ ͠ ͠ · ͏ · · Μ ͝ ʔ ͝ Γ Β Β ͣ ΂ Γ ʔ
37. ͸ ͍ ͑ ͳ ͳ ͠ ͠ · ͏ · · Μ ͝ ʔ ͝ Γ Β Β ͣ ΂ Γ ʔ
38. ͸ ͍ ͑ ͳ ͳ ͠ ͠ · ͏ · · Μ ͝ ʔ ͝ Γ Β Β ͣ ΂ Γ ʔ
39. ͸ ͍ ͑ ͳ ͳ ͠ ͠ · ͏ · · Μ ͝ ʔ ͝ Γ Β Β ͣ ΂ Γ ʔ
40. Կ Λ ఻ ͑ ͨ ͍ ͷ ͔ ʁ
    Կ Λ ݟ ͤ ͨ ͍ ͷ ͔ ʁ
41. ε τ ʔ Ϧ ʔ
42. Ξ χ ϝ ʔ γ ϣ ϯ Λ ͠ ͨ ࣌ ʹ
    Ϣ ʔ β ʔ ʹ Ͳ Μ ͳ ෩ ʹ ࢥ ͬ ͯ ΋ Β ͍ ͨ ͍ ͷ ͔
43. ͱ Γ ͋ ͑ ͣ ͔ ͬ ͜ ͍ ͍ ಈ ͖
    ແ ବ ʹ ಈ ͘
    ง ғ ؾ ʹ ߹ ͬ ͯ ͍ ͳ ͍
44. ง ғ ؾ Λ ఻ ͑ Δ ͨ Ί ͷ
    Ξ χ ϝ ʔ γ ϣ ϯ Ϣ ʔ β ʔ Π ϯ λ ʔ ϑ Σ ʔ ε ͱ ͠ ͯ ͷ
    Ξ χ ϝ ʔ γ ϣ ϯ
    
45. 8FC
    %FTJOHOFS 'SPOUFOE
    &OHJOFS
46. Ξ χ ϝ ʔ γ ϣ ϯ ͷ ͦ ͷ ઌ Λ
47. ݟ Δ ਓ ͕ ৺ ஍ Α ͍ Ξ χ ϝ ʔ γ ϣ ϯ Λ
48. ͝ ੩ ௌ ͋ Γ ͕ ͱ ͏ ͝ ͟ ͍ · ͠ ͨ ɻ 5 X J U U F S
    ! * N  @ 
    ( J U I V C
    ! * N