Your SlideShare is downloading. ×
0
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Graphic programming in js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Graphic programming in js

2,859

Published on

1 Comment
12 Likes
Statistics
Notes
  • 16-Jogando.net/mu Venha se divertir de verdade
    [b]Mu online Season 6 do Brasil. Produzindo sua Diversão com qualidade,há mais de 5 anos
    TODOS OS SERVERS ficam ON 24 horas por dia,
    Venha conhecer e se divertir com a gente.
    São varios Server esperando por você :
    * Servidor 'MuWar' 1000x/1500x
    * Super - 10.000x
    * Pvp 15.000x
    * Very Easy - 5.000x
    * Hard 100 x
    * Extreme 10x
    **** Agora Servidores EXTREME e WAR SERÃO CLIENTE SEPARADO dos demais Servers.
    CONFIRAM = http://forumjogando.net/index.php?showtopic=59145
    NOVO KIT SUPREMO DIAMOND; http://forumjogando.net/index.php?showtopic=59742
    ** NOVOS KITs DE RINGs E PENDANTs COM SOCKETs; ASAS LVL 3 COM SOCKETs;
    ** NOVOS SHILDs 18 0PTIONAIS , http://www.youtube.com/watch?v=lGfMxTqeSaA -
    ** NOVOS KITs OLDs e FUSION SUPREMO, SEU CHAR AINDA MUITO MAIS FORTE.
    ** CASTLE SIEGE AOS SÁBADOS e DOMINGOS.
    ** NOVA JEWEL JDIAMOND com ela voce compra itens Raros,
    Facebook : http://www.facebook.com/profile.php?id=100002113910611
    Siga o twitter http://twitter.com/#!/
    Site http://www.jogando.net/mu/
    HYCLEN Divulgadora Oficial !!![ b]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,859
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
77
Comments
1
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Graphic Programming in JS 拔赤 bachi@taobao.com http://www.uedagazine.com 2010-10-20
  • 2. 我们已经离不开Animation! Slide,Menu,Tab Floating advertisement…
  • 3. • 动画基础 • Animate的优雅降级 • 更纯粹的图形编程 • 在可预见的未来
  • 4. • 动画基础 • Animate的优雅降级 • 更纯粹的图形编程 • 在可预见的未来
  • 5. /* Jquery 生成一段动画 */ $(element).animate({ opacity: 0.25, left: '+=50' },5000,function(){ //callback }); 在Jquery中 我们通常这样创建动画 http://api.jquery.com/animate/
  • 6. /* YUI3 生成一段动画 */ var myAnim = new Y.Anim({ node: element, to:{opacity:0.25, width: function(node) { return node.get('region').left + 50; } } }).on('end',function(){/* callback */}); myAnim.run(); 在YUI3中 我们是这样创建动画 http://developer.yahoo.com/yui/3/anim/
  • 7. “库” 为我们封装了动画的细节
  • 8. 动画原理 – 关键帧(始末状态) – 路径(补间状态) – 帧频(运动速度) DOM Animation: 就是在一段时间内,连续改变 DOM元素的属性
  • 9. /* Animation 的实现 */ while(condition)//控制动画结束 { doSomething();//输出”补间” delay(sometime);//控制”帧频” } Animation 的实现
  • 10. JS实现Dom动画 setInterval clearInterval setTimeout clearTimeout
  • 11. /* setTimeout */ setTimeout(function(){ /* Some code... */ setTimeout(arguments.callee, 10); }, 10); /* setInterval */ setInterval(function(){ /* Some code... */ }, 10); setTimeout vs setInterval
  • 12. 纠结 setInterval和SetTimeout都很耗CPU setInterval甚至会把页面“冷冻住”
  • 13. http://ejohn.org/blog/how-javascript-timers-work
  • 14. /* setTimeout */ setTimeout(function(){ /* Some code... */ setTimeout(arguments.callee, 10); }, 10); 合理的帧频?
  • 15. 应用场景 帧频 动画片 16帧/秒 电影胶片 24帧/秒 电视 25帧/秒 CS 30帧/秒 常见的帧频
  • 16. 库 帧频 间隔(毫秒) Jquery 77帧/秒 13 KISSY 77帧/秒 13 YUI3 50帧/秒 20 YUI2 1000帧/秒 1 常用 JS 库 Anim“默认”帧频
  • 17. “100毫秒”的最大理想帧频 理想帧频:<10帧/秒 时间间隔:1000 / 10 = 100毫秒 Response Time Overview http://www.useit.com/papers/responsetime.html
  • 18. Nicholas C. Zakas 最佳延时:50ms 最低延时:25ms Timed array processing in JavaScript http://www.nczonline.net/blog/2009/08/11/timed-array- processing-in-javascript/
  • 19. “曲线”动画 平滑函数 – Easing Function http://www.robertpenner.com/easing/easing_demo.html
  • 20. /** easeIn - 先慢后快 t 用来计算当前状态的时间值 b 初始值 c 始末位置之间的偏移量 d 整个动画跨度 返回:t时刻的状态值 */ function easeIn(t, b, c, d) { return c*(t/=d)*t + b; } JS 实现的平滑函数
  • 21. 适度的Dom动画 动画 页面性能损耗 VS (体验提升) (体验下降)
  • 22. 浏览器性能果真不可救药?
  • 23. • 动画基础 • Animate的优雅降级 • 更纯粹的图形编程 • 在可预见的未来
  • 24. 浏览器 渲染引擎 JS引擎 发布日期 性能 IE6 Trident JScript 2001.8.27 - Firefox3.0+ Gecko Trace 2008.6.17 + Monkey Opera9.0+ Presto Carakan 2008.6.12 ++ Chrome4.0+ Webkit V8 2009.5.29 ++ Safari4.0+ Webkit Nitro 2009.6.18 ++ 越现代的浏览器,性能越好,动画体验更佳
  • 25. CSS3 Transitions div { transition-property: opacity, left; transition-duration: 2s, 4s; background:opacity:0; left:100px; } 使用浏览器 Native API 实现动画 http://www.w3.org/TR/css3-transitions/
  • 26. CSS3 Transitions 中的平滑函数 cubic-bezier cubic-bezier(x1,y1,x2,y2) P1:(x1,y1) P2:(x2,y2)
  • 27. 应用CSS3 Transitions YUI3、KISSY 的 Anim 均实现了 Transitions 动画 YUI2 和 Jquery 未实现
  • 28. /* YUI3 的实现 */ YUI().use('transition',function(Y){ node.transition({...},callback); }); http://developer.yahoo.com/yui/3/transition/ /* KISSY 的实现 */ KISSY.use('ks-core',function(S){ node.animate({...},d,ease,callback); }); http://kissyteam.github.com/kissy/docs/anim/index.html Demos: http://jayli.github.com http://lifesinger.github.com/lab/2010/popnum.html
  • 29. • 动画基础 • Animate的优雅降级 • 更纯粹的图形编程 • 在可预见的未来
  • 30. http://developers.facebook.com http://fx.inetcat.com/ /animation/ http://jsanim.com/ http://moofx.mad4milk.net/ Dom Anim JS 库的流行
  • 31. 风生水起的 HTML5 Canvas! https://developer.mozilla.org/cn/Canvas_tutorial
  • 32. 2D图形编程 原点(坐标系) 点(坐标) 线(线段) 形状 颜色
  • 33. 2D编程数学基础 http://en.wikipedia.org/wiki/Analytic_geometry
  • 34. Rene Descartes – 笛卡尔(法)
  • 35. 3D图形编程 原点(坐标系) 点(坐标) 线(线段) 形状 颜色 空间变换(空间坐标系的倾斜) 投影(3D图形在2D画布上的呈现)
  • 36. 3D编程数学基础 http://en.wikipedia.org/wiki/Linear_Algebra
  • 37. Gottfried Wilhelm Leibniz – 莱布尼茨(德)
  • 38. Demos • 2D Demo – http://jayli.github.com/gallery/canvas/g.html • 3D Demo – http://jayli.github.com/gallery/canvas/3d.html
  • 39. http://hyper-metrix.com/#Burst http://www.c3dl.org/ http://raphaeljs.com/ Canvas JS 库的流行
  • 40. 有了这些…… 我们能用JS开发大规模 图形程序了吗?
  • 41. • 动画基础 • Animate的优雅降级 • 更纯粹的图形编程 • 在可预见的未来
  • 42. JS是解释性语言 运行速度本身就是硬伤!
  • 43. 从JS运算出结果到最终在 显示器渲染出图形 要经过层层调用!
  • 44. JS code… JS解释器(JS引擎) 浏览器内核(渲染引擎) CPU消耗 X window 在层层调 用中 OS kernel 硬件
  • 45. 我们需要更生猛的“硬件”加速!
  • 46. JS code… JS解释器(JS引擎) 浏览器内核(渲染引擎) CSS3 Transition WebGL API X window OS kernel 减少 调用 硬件 层级
  • 47. WebGL is coming! http://www.khronos.org/webgl/
  • 48. WebGL的浏览器支持 • Firefox 4.02beta • Chrome Development Branch • WebKit Nightly Builds http://www.khronos.org/webgl/wiki/Getting_a_Web GL_Implementation
  • 49. WebGL 需要 OpenGL 的支持 可用OSMesa (off-screen Mesa)代替OpenGL http://www.mesa3d.org/
  • 50. 真正原生的API 基于WebGL的建模/开发 http://www.ambiera.com/coppercube/
  • 51. WebGL Demos • 简单特效 – http://webglsamples.googlecode.com/hg/ • 3D建模 – http://www.ibiblio.org/e- notes/webgl/webgl.htm • Quake 3 Map Demo – http://media.tojicode.com/q3bsp
  • 52. 更多WebGL Demos
  • 53. “浏览器”性能的革命!?
  • 54. Q&A

×