わかった気になる！ Webアニメーション基礎知識

2017/11/29開催の【cloudpack デ部会】初心者歓迎! 第7回 UI改善に効果的！webアニメーション入門　で発表した登壇資料になります。

Transcript

1. 
   8FE  Θ͔ͬͨؾʹͳΔʂ
   8FCΞχϝʔγϣϯجૅ஌ࣝ
2.  DMPVEQBDLࣄۀ෦
   σβΠϯηΫγϣϯ
   Ϧʔμʔ
   ೥݄ೖࣾ ౦ژ౎ੜ·Εɹ
   σβΠϯηΫγϣϯى্ͪ͛ͱͱ΋ʹDMPVEQBDLʹࢀՃɻ
   ੈքฏ࿨ͷͨΊɺ೔໷ɺ৯ཉͱதੑࢷ๱ͱઓ͏ɻ
   8FCσβΠφʔ
   ˠ
   'MBTIσϕϩούʔ
   ˠ
   σΟϨΫλʔ
   ˠ
   ΫϦΤΠςΟϒσ ΟϨΫλʔ தଜ
   ݩي
3.  ໨࣍ ɹΞχϝʔγϣϯͷجૅ஌ࣝ ɹͬ͘͟ΓৼΓฦΔ8FCΞχϝʔγϣϯ ɹࡢࠓͷσβΠϯτϨϯυ ɹΞχϝʔγϣϯΛੜΈग़͢ίπ ɹ8FCʹ͓͚ΔΞχϝʔγϣϯ׆༻ύλʔϯ
4.  Ξχϝʔγϣϯͷجૅ஌ࣝ 1
5.  ΞχϝʔγϣϯͬͯԿʁ ʲBOJNBUJPOʳ ࿈ଓͯ͠มԽ͢Δֆ΍෺ʹΑΓൃੜ͢Δ
   ԾݱӡಈΛར༻ͨ͠ө૾ख๏Ͱ͋Δɻ
6.  ΞχϝʔγϣϯͬͯԿʁ ੈքॳͷΞχϝ
   ʰѩΕͳϐΤϩʱʢ೥ʹϑϥϯεʣ ٕ๏ͱͯ͠ͷʮΞχϝʔγϣϯʯʹύϥύϥϚϯΨ Ծݱӡಈ
   ͔͋ͨ΋࣮ࡍʹӡಈ͍ͯ͠ΔΑ͏ʹݟ͑Δݱ৅ Ҿ༻ɿIUUQBMBOTNJUIFFQWMBOEUPEBNFIUNM
   Ҿ༻ɿIUUQTZPVUVCFQW58PK2%
7.  Ξχϝʔγϣϯͷޠݯ ϥςϯޠͰྶࠢΛҙຯ͢ΔBOJNBʢΞχϚʣʹ༝དྷ͓ͯ͠Γɺ
   ੜ໋ͷͳ͍ಈ͔ͳ͍΋ͷʹ໋Λ༩͑ͯಈ͔͢͜ͱΛҙຯ͢Δɻ ʲBOJNBUJPOʳ
8.  ΞχϝʔγϣϯΛ࡞Δ͜ͱͬͯ ͏Ε͍͠ɾָ͍͠ɾؾ͍͍࣋ͪ ಈ͔ͳ͍΋ͷʹੜ໋Λ༩͑Δ͜ͱ Ξχϝʔγϣϯ   ਆతࢹ఺ʹΑΔແ৚݅ͷتͼʣ
9.  ͬ͘͟ΓৼΓฦΔ8FC্Ͱͷ
   Ξχϝʔγϣϯදݱͷมભ 2
10.      $44
    קࠂ )5.-
    קࠂ (PPHMF
     ೔ຊॳ)1
     ϒϩά
     JϞʔυ
     σβΠϯ 8FCٕज़ αʔϏε σόΠε 'MBTI
     'MBTIΞχϝظ
    ೥લ൒ Ξχϝͷීٴ Ξχϝදݱ
11.  'MBTIΞχϝظʢ೥લ൒ʣ ݕࡧϥϯΫҐ :BIPP
    +"1"/
    ݕࡧϫʔυϥϯΩϯά
    ʢ೥ʣ 'MBTIʹΑΓ҆ՁͰ੍࡞Ͱ͖Δʮ͓΋͠Ζ'MBTIʯ͕େྲྀߦʂ Ҿ༻ɿIUUQOMBCJUNFEJBDPKQOMBSUJDMFTOFXTIUNM
12.  தଜ
    ༐ޗ͞Μ 'MBTIΛۦ࢖ֵͨ͠৽తͳ8FCදݱΛ࣍ʑͱల։ɻ
    6*։ൃπʔϧͱͯ͠ͷՄೳੑΛ੾Γ։͍ͨɻ
13.     .BD049
     8FC
      $44
    קࠂ )5.-
    קࠂ 5XJUUFS
     (PPHMF
     ೔ຊॳ)1
     ϒϩά
     JϞʔυ
     :PV5VCF
     'BDFCPPL
     σβΠϯ 8FCٕज़ αʔϏε σόΠε 'MBTI
     "4
     'MBTIΞχϝظ
    ೥લ൒ ϑϧ'MBTIظ
    ೥୅த൫ εΩϡʔϞϑΟζϜ
     Ξχϝͷීٴ Ϧον6*ϒʔϜ Ξχϝදݱ ߴ౓ͳදݱՄೳʹ
14.  ϑϧ'MBTIظʢ೥୅த൫ʣ ੈքதͷϑϧ'MBTIαΠτ͕'8"ͳͲͰ೔ʑ঺հ͞Εɺ
    8FCදݱ͕രൃతʹਐԽɻ
15.  ϑϧ'MBTIظʢ೥લޙʣ ϑϧ'MBTIظऴᖼͷ͖͔͚ͬ͸ʲεϚʔτϑΥϯʳͷ஀ੜʢʣ
16.     J1BE
     .BD049
     )5.-
    קࠂ 8FC
     8FC
      J04
     $44
    קࠂ )5.-
    קࠂ 5XJUUFS
     (PPHMF
     ೔ຊॳ)1
     ϒϩά
     JϞʔυ
     :PV5VCF
     -*/&
     J1IPOF
     $44
    קࠂ 'BDFCPPL
     σβΠϯ 8FCٕज़ αʔϏε σόΠε *P5
     "*
     'MBTI
     "8BUDI
     "OESPJE
     8JO
     "4
     'MBTIΞχϝظ
    ೥લ൒ ϑϧ'MBTIظ
    ೥୅த൫ 6*ɾ69ظ
    ೥தظʙ εΩϡʔϞϑΟζϜ
     ϑϥοτσβΠϯ
     Ξχϝͷීٴ σβΠϯͷస׵ Ϧον6*ϒʔϜ Ξχϝදݱ εϚϗ஀ੜ ߴ౓ͳදݱՄೳʹ
17.  6*ɾ69ظʢ೥தظʙʣ ೥Ҏ߱धཁ͕ٸ଎ʹݮগ͠ɺ೥ʹʮ"OJNBUFʯʹվ໊ɻ εϚϗʹΑΔͭͷมԽ ϚϧνσόΠεରԠ J1IPOFͷ'MBTIඇରԠ ϑϥοτσβΠϯ
18.  εϚʔτϑΥϯීٴͷεϐʔυ εϚϗͱϑΟʔνϟʔϑΥϯͷൺ཰͸໿ Ҿ༻ɿIUUQTWEBUBOJLLFJDPNEBUBEJTDPWFSZ
19.  ͜Ε͔ΒٻΊΒΕΔσβΠϯ ͢ͰʹεϚϗϑΝʔετͷ֓೦͕ఆணͨ͜͠ͷઌɺ
    εϚϗ͓Αͼͦͷઌͷ6*ɾ69σβΠϯ͕ٻΊΒΕͯ͘Δ࣌୅΁
20.  ࡢࠓͷ*'σβΠϯͷτϨϯυ 3
21.  6*σβΠϯͷมભ εΩϡʔϞϑΟζϜσβΠϯ ϑϥοτσβΠϯ ϚςϦΞϧσβΠϯ ݱ࣮ͷ࣭ײΛར༻͠ϦονͰ௚ײతʹ ແବͳ૷০ɾ࣭ײΛഉআͯܰ͠շͳҹ৅ʹ ਓؒத৺ઃܭʹΑΔ࢖͍΍͍͢6*Λۛຯ
22.  ೥ʹ(PPHMFఏএͨ͠ʲϚςϦΞϧσβΠϯʳͭͷݪଇ ϚςϦΞϧ͸ϝλϑΝʔ ʢൺᄻʣͰ͋Δ େ୾Ͱੜ͖ੜ͖ͱͨ͠
    ҙࣝతͳσβΠϯ ҙຯͷ͋Δಈ͖Λ
    औΓೖΕΔ .PUJPOʹ͍͚ͭͯͩͰ΋ϖʔδΛ௒͑ΔΨΠυϥΠϯΛఆٛʂ Ҿ༻ɿIUUQTNBUFSJBMJPHVJEFMJOFTNPUJPO
23.  ϚςϦΞϧσβΠϯͷఆٛ͢ΔϞʔγϣϯͷޮՌ ཁૉͷۭؒతͳؔ܎ɺૢ࡞ʹΑΔྲྀΕͳͲΛ௚ײతʹ೺Ѳͤ͞Δ Ҿ༻ɿIUUQTNBUFSJBMJPHVJEFMJOFTNPUJPO
24.  'MVFOU
    %FTJHO
    4ZTUFN -JHIUʢޫʣ %FQUIʢԞߦ͖ʣ .PUJPOʢಈ͖ʣ .BUFSJBMʢૉࡐʣ 4DBMFʢεέʔϧʣ .JDSPTPGU͕ఏএ͢Δ8JOEPXσόΠεʹ͓͚ΔΞϓϦ੍࡞ΨΠυϥΠϯ Ҿ༻ɿIUUQTqVFOUNJDSPTPGUDPN
25.  'MVFOU
    %FTJHO
    4ZTUFN σεΫτοϓ΍εϚʔτϑΥϯɺ
    λϒϨοτ͸΋ͪΖΜɺ
    "3ɾ73ɾ.3΍΢ΣΞϥϒϧɺήʔϜίϯιʔϧͳͲΛؚΊͨΨΠυϥΠϯ Ҿ༻ɿIUUQTqVFOUNJDSPTPGUDPN
26. ࠓͲͷΑ͏ͳঢ়گͰɺ࣍ʹͲ͏ߦಈ͢Ε͹ྑ͍ͷ͔Λ
    ௚ײతͳ
    6*Ͱ఻͑Δ  ͭͷΨΠυϥΠϯʹ͓͚ΔϞʔγϣϯͷҙຯ  ਓؒத৺ઃܭͰσβΠϯΛߦ͏
27.  ϚΠΫϩΠϯλϥΫγϣϯͱ͍͏֓೦ ʲ.JDSP
    *OUFSBDUJPOʳ ༏Εͨ6*ɾ࣭ͷߴ͍69Λ࣮ݱ͢Δʹ͸
    Ξχϝʔγϣϯ͕ෆՄܽʹͳ͖͍ͬͯͯΔ ͻͱͭͷ࡞ۀΛ͜ͳ͢࠷খ୯ҐͷΠϯλϥΫγϣϯ Ҿ༻ɿIUUQTNBUFSJBMJPHVJEFMJOFTNPUJPO
28.  8FCʹ͓͚ΔΞχϝʔγϣϯͷ׆༻ύλʔϯ 4
29.  8FCͰΞχϝʔγϣϯΛ࡞Δํ๏ )5.- $44 +4 $"/7"4 47( 8FC(- "OJNBUF "OJNF
    (JG
30.  ओͳ׆༻ํ๏ ࢴࣳډܕ ΠϯλϥΫγϣϯܕ ղઆΞχϝ
    ϧʔϓΞχϝ
    ͳͲ ϚΠΫϩΠϯλϥΫγϣϯ ͳͲ
31.  ࢴࣳډܕ ʲ-*/&
    EFWFMPQFSTʳ
    IUUQTEFWFMPQFSTMJOFNFKB ʲ+0:406/%
    ΧϥΦέനॻʳ
    IUUQTDBNQKPZTPVOEDPNXIJUFQBQFS
32.  ෳ߹ܕ ʲ#MPPN
    
    4BZ
    )FMMP
    UP
    *ODMVTJWF
    $SFEJUʳ
    IUUQTIFMMPCMPPNJP ʲ"*3'3"/$&
    .64*$ʳ
    IUUQTNVTJDBJSGSBODFDPNFO
33.  ؾ࣋ͪྑ͍ΞχϝʔγϣϯΛੜΈग़͢ίπ 5
34.  ΞχϝʔγϣϯͷόΠϒϧ σΟζχʔΞχϝʔγϣϯ
    ੜ໋Λਧ͖ࠐΉຐ๏
    5IF
    *MMVTJPO
    PG
    -JGF
    σΟζχʔөըͷશ੝ظΛங͍ͨʮφΠϯɾΦʔϧυɾ ϝϯ ̕ਓͷࣆ ʯͱݺ͹ΕΔ༏ΕͨΞχϝʔλʔ͕ɺ
    ̍̔̍̕೥ʹग़൛ͨ͠ʮΞχϝʔγϣϯͷόΠϒϧʯɻ
35.  σ ΟζχʔʹΑΔΞχϝʔγϣϯͷݪଇ ɽԡ͠௵͠ͱ৳ॖ ɽ༧උಈ࡞ ɽԋग़ ɽஞ࣍ඳ͖ͱݪըʹΑΔઃܭ ɽܧଓ͢Δಈ͖ͱޙ௥͍ͷಈ͖ ɽεϩʔΠϯͱεϩʔΞ΢τ ɽӡಈۂઢ ɽ෭࣍తͳಈ࡞ ɽλΠϛϯά ɽތு ɽཱମײͷ͋Δඳը ɽΞϐʔϧ Ҿ༻ɿIUUQUIFQSJODJQMFTUVNCMSDPN
36.  Ͳ͕ͬͪؾ࣋ͪྑ͍Ξχϝʔγϣϯʁ ਖ਼͍͠ಈ͖Λ࠶ݱ͢Δͷ͕ඞͣ͠΋ਖ਼ղͰ͸ͳ͍ɻ
    ؾ࣋ͪΑ͍ಈ͖Λ௥ٻ͠Α͏ʂ
37.  ࣮ࡍͷࣄྫ ʲגࣜձࣾ%"$ϗʔϧσΟϯάεʳ
    IUUQTXXXEBDHSPVQDPKQCVTJOFTT
38.  "OJNBUFͰૉࡐΛ੍࡞ ؆୯ͳΞχϝʔγϣϯΛ"OJNBUFͰ෇͚ͯ$BOWBTͰॻ͖ग़͢
39.  $BOWBTૉࡐʹKTͰಈ͖Λ͚ͭΔ ϥϯμϜɾ׈Β͔͞ɾؾ࣋ͪΑ͞
40.  8FCΞχϝʔγϣϯΛ࡞ͬͯΈΑ͏ IUUQCPVODFKTDPN σβΠφʔ͕෇͚ͨಈ͖ΛΤϯδχΞͱڞ༗Ͱ͖Δ
41.  ·ͱΊ 8FCදݱ͸ϋʔυɾιϑτͷਐԽʹ߹Θͤͯมભ͖ͯͨ͠
    )5.-
    ˠ
    'MBTI
    ˠ
    )5.-ˍ$44ˍ+4 1$͔ΒϞόΠϧ΁ར༻γʔϯ͕มΘΔࣄͰਓؒத৺ઃܭ͕ॏཁʹ
    σβΠϯτʔϯ͚ͩͰ͸ͳ͍σβΠϯγεςϜͷఏএ΁ ༏Εͨ6*ɾ࣭ͷߴ͍69ͷ࣮ݱʹ͸Ξχϝʔγϣϯ͕ඞਢͱͳΔ
    ҙຯͷ͋Δಈ͖ͱؾ࣋ͪΑ͞ΛσβΠϯ͢Δʂ