Web Animation

E2a4044058c9d32770da590571e956b8?s=47 w3cplus
September 07, 2016

Web Animation

Web Animation

E2a4044058c9d32770da590571e956b8?s=128

w3cplus

September 07, 2016
Tweet

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. (SPVQTWT4FRVFODFT

  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"OJNBUJPO74+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
  45. None
  46. 动画调试

  47. ۖըᐽՍ҃޻۩

  48. None
  49.  $44"OJNBUJPO5PPMT 'SBNFXPSLT5VUPSJBMT  DTTBOJNBUJPOSPDLT  $PEFQFO$44"OJNBUJPO  8DQMVT"OJNBUJPO ଖଞᩒݯ

  50. THANK YOU

  51. @w3cplus.य़ᄏ