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
45. None

46. 动画调试

47. ۖըᐽՍ҃޻۩

48. None

49.  $44
    "OJNBUJPO
    5PPMT
    'SBNFXPSLT
    
    5VUPSJBMT
     DTTBOJNBUJPOSPDLT
     $PEFQFO
    $44
    "OJNBUJPO
     8DQMVT
    "OJNBUJPO ଖଞᩒݯ

50. THANK YOU

51. @w3cplus.य़ᄏ