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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Graphic programming in js

2,784
views

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,784
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