Your SlideShare is downloading. ×
0
Graphic Programming in JS
       拔赤 bachi@taobao.com
     http://www.uedagazine.com
             2010-10-20
我们已经离不开Animation!
   Slide,Menu,Tab
Floating advertisement…
•   动画基础
•   Animate的优雅降级
•   更纯粹的图形编程
•   在可预见的未来
• 动画基础
• Animate的优雅降级
• 更纯粹的图形编程
• 在可预见的未来
/* Jquery 生成一段动画 */
        $(element).animate({
            opacity: 0.25,
            left: '+=50'
        },5000,functi...
/* YUI3 生成一段动画 */
     var myAnim = new Y.Anim({
         node: element,
         to:{opacity:0.25,
             width: fu...
“库”
为我们封装了动画的细节
动画原理
 – 关键帧(始末状态)
 – 路径(补间状态)
 – 帧频(运动速度)



 DOM Animation:
 就是在一段时间内,连续改变 DOM元素的属性
/* Animation 的实现 */

while(condition)//控制动画结束
{
    doSomething();//输出”补间”
    delay(sometime);//控制”帧频”
}



     Animatio...
JS实现Dom动画

  setInterval
 clearInterval
  setTimeout
 clearTimeout
/* setTimeout */

setTimeout(function(){
     /* Some code... */
     setTimeout(arguments.callee, 10);
}, 10);


/* setIn...
纠结
setInterval和SetTimeout都很耗CPU
 setInterval甚至会把页面“冷冻住”
http://ejohn.org/blog/how-javascript-timers-work
/* setTimeout */

setTimeout(function(){
     /* Some code... */
     setTimeout(arguments.callee, 10);
}, 10);




      ...
应用场景          帧频
动画片       16帧/秒
电影胶片      24帧/秒
电视        25帧/秒
 CS       30帧/秒


      常见的帧频
库        帧频      间隔(毫秒)
Jquery   77帧/秒       13
KISSY    77帧/秒       13
YUI3     50帧/秒       20
YUI2     1000帧/秒     1



...
“100毫秒”的最大理想帧频
    理想帧频:<10帧/秒
 时间间隔:1000 / 10 = 100毫秒



   Response Time Overview
  http://www.useit.com/papers/response...
Nicholas C. Zakas
    最佳延时:50ms
    最低延时:25ms



Timed array processing in JavaScript
  http://www.nczonline.net/blog/2009...
“曲线”动画
    平滑函数 – Easing Function




http://www.robertpenner.com/easing/easing_demo.html
/**
   easeIn - 先慢后快
     t 用来计算当前状态的时间值
     b 初始值
     c 始末位置之间的偏移量
     d 整个动画跨度
     返回:t时刻的状态值
*/
function easeIn(t, ...
适度的Dom动画


  动画          页面性能损耗
         VS
(体验提升)        (体验下降)
浏览器性能果真不可救药?
•   动画基础
•   Animate的优雅降级
•   更纯粹的图形编程
•   在可预见的未来
浏览器      渲染引擎    JS引擎       发布日期 性能
     IE6    Trident JScript   2001.8.27 -
Firefox3.0+ Gecko    Trace    2008.6.17 +
  ...
CSS3 Transitions
div {
   transition-property: opacity, left;
   transition-duration: 2s, 4s;
   background:opacity:0;
   ...
CSS3 Transitions
                中的平滑函数
                cubic-bezier



cubic-bezier(x1,y1,x2,y2)
P1:(x1,y1)
P2:(x2,y2)
应用CSS3 Transitions
YUI3、KISSY 的 Anim 均实现了
      Transitions 动画

   YUI2 和 Jquery 未实现
/* YUI3 的实现 */
 YUI().use('transition',function(Y){
      node.transition({...},callback);
 });
            http://develop...
•   动画基础
•   Animate的优雅降级
•   更纯粹的图形编程
•   在可预见的未来
http://developers.facebook.com     http://fx.inetcat.com/
           /animation/




       http://jsanim.com/        http...
风生水起的 HTML5 Canvas!
  https://developer.mozilla.org/cn/Canvas_tutorial
2D图形编程
原点(坐标系)
 点(坐标)
 线(线段)
   形状
   颜色
2D编程数学基础




http://en.wikipedia.org/wiki/Analytic_geometry
Rene Descartes – 笛卡尔(法)
3D图形编程
     原点(坐标系)
      点(坐标)
      线(线段)
        形状
        颜色
 空间变换(空间坐标系的倾斜)
投影(3D图形在2D画布上的呈现)
3D编程数学基础




http://en.wikipedia.org/wiki/Linear_Algebra
Gottfried Wilhelm Leibniz – 莱布尼茨(德)
Demos
• 2D Demo
 – http://jayli.github.com/gallery/canvas/g.html


• 3D Demo
 – http://jayli.github.com/gallery/canvas/3d....
http://hyper-metrix.com/#Burst




     http://www.c3dl.org/




     http://raphaeljs.com/


Canvas JS 库的流行
有了这些……
我们能用JS开发大规模
 图形程序了吗?
•   动画基础
•   Animate的优雅降级
•   更纯粹的图形编程
•   在可预见的未来
JS是解释性语言
运行速度本身就是硬伤!
从JS运算出结果到最终在
  显示器渲染出图形
  要经过层层调用!
JS code…

 JS解释器(JS引擎)


浏览器内核(渲染引擎)
                    CPU消耗
   X window         在层层调
                    用中
   OS kerne...
我们需要更生猛的“硬件”加速!
JS code…

 JS解释器(JS引擎)


浏览器内核(渲染引擎)         CSS3 Transition
                    WebGL API
   X window


   OS kernel
    ...
WebGL is coming!
http://www.khronos.org/webgl/
WebGL的浏览器支持
• Firefox 4.02beta
• Chrome Development Branch
• WebKit Nightly Builds




     http://www.khronos.org/webgl/w...
WebGL 需要 OpenGL 的支持
 可用OSMesa (off-screen Mesa)代替OpenGL




          http://www.mesa3d.org/
真正原生的API




        基于WebGL的建模/开发
http://www.ambiera.com/coppercube/
WebGL Demos
• 简单特效
 – http://webglsamples.googlecode.com/hg/
• 3D建模
 – http://www.ibiblio.org/e-
   notes/webgl/webgl.htm
...
更多WebGL Demos
“浏览器”性能的革命!?
Q&A
Upcoming SlideShare
Loading in...5
×

Graphic programming in js

2,868

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,868
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
77
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "Graphic programming in js"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×