Web Animation

Web Animation

Transcript

1. 8FC
   "OJNBUJPO !େയ 
2. ԅॄ㜮ཁ࢖༻ۖը
3. 为什么要使用动画？ WebۖኮӧՐՐฎᤰ᷶ ۖኮԻ԰޾ํ఺ԎጱᬦჁฎWeb๚๶ጱӞԆᥝ᩽۠ ୽ߥአಁ඙֢ኴᶎ ݢզᦖඳԪ޾ݢᥤ۸
4. Web动画怎样实现 ？
5. Web动画实现原理 ڥአԧՈ፲ጱ“ᥤᥧฮኸ”ሿ᨝҅ࣁᎨ෸ᳵٖᬳᖅඎනහଏᶉྊጱኮ ᶎֵ҅ᙂ፲ࢩᥤᥧྜ᨝ԾኞᲙᥧ҅ᘒ᧏զԅኮᶎࣁ“ۖ”
6. Web动画本质 ၨᥦ࢏/GPUጱ჉ວᬦᑕ ਧ෸࢏දݒزᔰં௔
7. Web动画主要概念 ଄ሲғܨྯᑁᰦඎනጱᶉྊኮᶎጱහᰁ҅ܔ֖ฎfps(Frame per second) ଄ғࣁۖኮᬦᑕӾ҅ྯӞଏᶉྊኮᶎܨԅӞ“଄” ଄෸ᳩғܨྯӞଏᶉྊኮᶎጱ؊ኸ෸ᳵ҅ܔ֖Ӟᛱฎms(ྺᑁ) ᪡଄(ധ଄/Ӷ଄)ғࣁ଄ሲࢴਧጱۖኮӾ҅຤Ӟ଄ጱ෸ᳩᬱṛԭଘ࣐଄෸ ᳩ҅੕ᛘٌݸᖅහ଄ᤩ೿ܴᘒӶ०ጱሿ᨝
8. Web动画形式 Flashۖኮ Gifۖපࢶ ᥤ᷇ۖኮ SVG Animation CSS Animation JavaScript Animation
9. Web Animations
10. CSS Animations
11. SVG Animations
12. JS Animations
13. $44
    "OJNBUJPO
14. CSS Animation CSS Animation CSS Transition
15. !LFZGSBNFT
16. !LFZGSBNFT
17. !LFZGSBNFT http://www.w3cplus.com/demo/calculator.html http://tid.tenpay.com/?p=5983
18. BOJNBUJPO
19. $44
    "OJNBUJPO
    ಛ఺ Ꮭկے᭛ ्กۖኮ ӧฃഴګᕟݳۖኮ ෫ဩۖாഴګۖኮ ෫ဩಋۖഴګۖኮᇫா
20. +BWB4DSJQU
    "OJNBUJPO
21. SFRVFTU"OJNBUJPO'SBNF ᬩᤈࣁԆᕚᑕӤ JSಗᤈྯӞ଄ ᯿ᦇᓒ
22. 8""1* 8FC
    "OJNBUJPO
    "1* http://w3c.github.io/web-animations/
23. 8""1* 8FC
    "OJNBUJPO
    "1* element.animate(effect, options); effects ==> @keyframes options ==> animation-*
24. 8""1* 8FC
    "OJNBUJPO
    "1*
25. 8""1* 8FC
    "OJNBUJPO
    "1*
26. "OJNBUJPO(SPVQ  GroupEffects [gruːp,ɪ'fekts] SequenceEffects ['siːkw(ə)ns,ɪ'fekts]
27. (SPVQT
    WT
    4FRVFODFT
28. (SPVQ&⒎FDUT http://codepen.io/pawelgrzybek/full/WwBXxb/
29. 4FRVFODF&⒎FDUT http://codepen.io/pawelgrzybek/full/wGbpWg/
30. 1MBZFS
    $POUSPMT player.play() player. pause() player. reverse() player. finish() player. cancel() http://codepen.io/pawelgrzybek/full/EKJqxG/
31. $44
    "OJNBUJPO
    74
    +BWB4DSJQU
    "OJNBUJPO CSSᗌ੝ᇿᒈጱഴګ ᤒሿ௔ᚆ(CSSӧӞਧྲJavaScriptঅ) GPU ጱֵአҁGPU ے᭛ӧՐՐฎԅ CSS ۖኮٵ॓ጱ҅JavaScript ۖኮӞ໏ݢզݑፅ҂ ਖ਼ᦇᓒ᫨ᑏᕳӧݶጱᕚᑕ ᬩᤈ෸ጱഴګ޾Ԫկ ํᴴጱපຎ ّ਻௔޾ᭇᯈ௔ http://www.w3cplus.com/animation/myth-busting-css-animations-vs-javascript.html
32. ዎ㜮ᭌೠ੍࡞ۖըํࣜ
33. ᕪḵ๏ڞ ୮఍ԅ UI زᔰ᯻አ᫾ੜጱᇿᒈᇫா෸ֵ҅አ CSS ࣁᵱᥝ੒ۖኮᬰᤈय़ᰁഴګ෸ֵ҅አ JavaScript CSS ᫨ഘ޾ۖኮᶋଉᭇݳԭ՗׆ᶎ୚ف੕ᛯោܔ҅౲ดᐏૡٍ൉ᐏ̶ ๋ᕣ҅ݢզֵአ JavaScript ๶ഴګᇫா҅֕ۖኮ๜᫝ฎ᯻አ CSS ۖா᪙᪵᥶ൾ֖ᗝጱۖኮ҅౲ᵱᥝ؊ྊ̵ฮ؊̵ٺ᭛౲ׯᭅጱۖኮӞᛱᵱᥝֵአ JavaScript̶ ইຎ఍૪ֵአ۱ೡԧۖኮۑᚆጱ jQuery ౲ JavaScript ໛ຝ҅ڞݢᚆݎሿᖀ ᖅֵአᧆොဩ๶؉ۖኮࣁ௛֛Ӥๅො׎҅ᘒӧฎڔഘک CSS̶
34. ۖըᖨۖവ਺
35. ᬦ౉വ਺
36. ᖨۖവ਺ http://cubic-bezier.com/
37. ᖨۖവ਺ http://codepen.io/airen/full/xObNQQ/
38. ᖨۖവ਺ by @์୽ http://matrix.h5jun.com/slide/show?id=117#/ http://www.w3cplus.com/animaton/animations-you-should-know.html
39. ۖըݪڞ
40. ۖըݪڞ ೿ܴ޾೉֐ (Squash and stretch) ᶼ֢॓ۖ (Anticipation) ᄍڊ૲ੴ (Staging) ᬳᖅᬩۖ޾঵ா੒ଫ (Straight-Ahead Action and Pose-to-Pose) ᪙ᵋ޾᯿ݖ֢ۖ (Follow Through and Overlapping Action) ᖨفᖨڊ (Slow In and Slow Out) ୢᕚᬩۖ (Arc) ེᥝ֢ۖ (Secondary Action) ෸ᳵᜓॵ (Timing) ३ୟಋဩ (Exaggeration) ಎਫጱൈᕲ (Solid drawing) ޕ୚ێ (Appeal) http://www.w3cplus.com/css3/animation-principles-for-the-web.html
41. ۖըੑೳ
42. ଄཰ೳ൓өۖըతྲྀ኱ఔ౓ ࣁᗑᶭӾ҅଄ሲᚆड़ᬡک50~60fpsጱۖኮਖ਼տፘ୮ၞ኱҅ᦏՈ׭ఽᛥᭇ ଄ሲࣁ30ӗ50fpsԏᳵጱۖኮ҅ࢩݱՈභఽᑕଶӧݶ҅ᛥᭇଶࢩՈᘒ୑̶ ଄ሲူۖஉय़ጱۖኮ҅ԽտֵՈఽᥧکܜᶷ̶ ଄ሲࣁ30fpsզӥጱۖኮ҅ᦏՈఽᥧکกดጱܜᶷ޾ӧᭇఽ̶
43. ۖը᧣սతࡦུ࿨ٕ޼ ൉܋ྯӞ଄௔ᚆҁᖽᎨ଄෸ᳩ҅൉ṛ଄ሲ҂ כᦤ଄ሲଘᑞҁ᭿ع᪡଄҂ ᰒ੒Ꮭկے᭛჉ວ᭗᭲ጱս۸ ᭿ع᷇ᔺጱ᯿ഭ̵᭿عय़ᶎᑌጱ᯿ᕲ̵ս۸JSᬩᤈ௔ᚆ ӧࣁᬳᖅጱۖኮᬦᑕӾ؉ṛᘙ෸ጱ඙֢ҁইय़ᶎᑌ᯿ᕲ̵᯿ഭ̵॔๥JSಗᤈ҂҅᭿عݎኞ᪡଄̶ ᝑṛᘙ෸඙֢෫ဩ᭿ع҅ڞ੤ᦶ۸ᥴ҅ྲইғਖ਼ṛᘙ෸඙֢නࣁۖኮ୏ত౲ᕮੲ̶॒ਖ਼ṛᘙ෸඙ ֢ړ൶ᛗۖኮጱྯӞ଄Ӿ॒ቘ ᭗ᬦ੶ጱݒ۸පຎ(ইtransform)ਫሿ֖ᑏ̵ᖽනᒵۖኮ҅ݢ᭿ع᯿ᕲ̶ ݳቘښړ੶҅ۖᶉړᐶ҅ݢ᭿عय़ᶎᑌ᯿ᕲ̶ ֵአړ੶ս۸ۖኮ෸҅ᵱᥝኸ఺ٖਂၾᘙఘ٭ҁ᭗ᬦSafari᧣ᦶૡٍ҂̶
44. ࢖༻
    '-*1
    དྷఏߴ
    8FC
    ۖըతੑೳ ӧᥝ᩻ڊአಁݍଫ෸ᳵ 100ms̶ވڞአಁտᥧ஑֦ጱଫአဌํᒈܨߥଫ҅᭗ᬦ DevTools ෸ڰኸ఺ฎߺԶᦇᓒ੕ᛘ᩻ڊԧᬯӻ෸ᳵ ᔜஞᕟᕢ֦ጱۖኮ̶ᦡమӞӥ҅ইຎӞӻ FLIP ۖኮྋࣁᬩᤈ҅ݶ෸֦ള፳మಗ ᤈӥӞӻ FLIP ۖኮ҅ᬯ෸੪ᥝᏟכӥӞӻۖኮጱᶼᦇᓒૡ֢ฎࣁᳳᗝ౲አಁጱ ݍଫ෸ᳵٖᬰᤈ҅ᬯ໏੪ݢզכᦤӷӻۖኮ԰ӧ୽ߥ ٖ਻ݢᚆᤩಜใ̶୮ᬰᤈ຤Զᖽනۖኮ෸ݢᚆ੕ᛘٖ਻ಜใ҅ླᒌᬯฎӞᐿ Hack ದ๞ http://www.w3cplus.com/animation/high-performance-animations.html
46. 动画调试
47. ۖըᐽՍ҃޻۩
49.  $44
    "OJNBUJPO
    5PPMT
    'SBNFXPSLT
    
    5VUPSJBMT
     DTTBOJNBUJPOSPDLT
     $PEFQFO
    $44
    "OJNBUJPO
     8DQMVT
    "OJNBUJPO ଖଞᩒݯ
50. THANK YOU
51. @w3cplus.य़ᄏ