O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Canvas - The Cure
Canvas - The Cure
Carregando em…3
×

Confira estes a seguir

1 de 111 Anúncio

Mais Conteúdo rRelacionado

Semelhante a Raphaël (20)

Anúncio

Mais recentes (20)

Raphaël

  1. 1. Raphaël Web Directions South 2010
  2. 2. http://dmitry.baranovskiy.com/
  3. 3. https://peepcode.com/products/raphaeljs
  4. 4. http://raphaeljs.com
  5. 5. Why?
  6. 6. How?
  7. 7. SVG
  8. 8. Raphaël doesn’t use Canvas
  9. 9. Raphaël doesn’t use Canvas
  10. 10. SVG
  11. 11. VML
  12. 12. JavaScript SVG VML
  13. 13. SVG VML
  14. 14. 20 Kb
  15. 15. Free
  16. 16. API
  17. 17. Preparation
  18. 18. var paper = Raphael("holder", 800, 600); var paper = Raphael(holder, 800, 600); var paper = Raphael(10, 20, 800, 600);
  19. 19. Primitives
  20. 20. var circle = paper.circle(cx, cy, r); var rect = paper.rect(x, y, width, height, r); var ellipse = paper.ellipse(cx, cy, rx, ry); var image = paper.image(src, x, y, width, height); var text = paper.text(x, y, text);
  21. 21. animate mousemove animateAlong mouseout animateAlongBack mouseover animateWith mouseup attr onAnimation click remove clone rotate dblclick scale getBBox show hide stop hover toBack insertAfter toFront insertBefore translate mousedown
  22. 22. animate mousemove animateAlong mouseout animateAlongBack mouseover animateWith mouseup attr onAnimation click remove clone rotate dblclick scale getBBox show hide stop hover toBack insertAfter toFront insertBefore translate mousedown
  23. 23. circle.attr({ fill: "#fc0", stroke: "hsb(0.6, 0.7, 0.9)", "stroke-width": 5, "stroke-opacity": 0.5, cx: 50 }); var fill = circle.attr("fill"); circle.animate({ cx: 100, cy: 100 }, 1000, function () { alert("Animation is finished"); });
  24. 24. c.animate({cx: 230, cy: 130}, 2000);
  25. 25. c.animate({cx: 230, cy: 130}, 2000);
  26. 26. c.animate({cx: 100, cy: 230}, 1000, function () { c.animate({cx: 230, cy: 130}, 1000); });
  27. 27. c.animate({cx: 100, cy: 230}, 1000, function () { c.animate({cx: 230, cy: 130}, 1000); });
  28. 28. c.animate({ "50%": {cx: 100, cy: 230}, "100%": {cx: 230, cy: 130} }, 2000);
  29. 29. c.animate({ "50%": {cx: 100, cy: 230}, "100%": {cx: 230, cy: 130} }, 2000);
  30. 30. c.animate({ "50%": {cx: 100}, "100%": {cx: 230} }, 2000).animate({ "25%": {cy: 30, r: 10}, "50%": {cy: 230, r: 20}, "75%": {cy: 50, r: 10}, "100%": {cy: 130, r: 20} }, 2000);
  31. 31. c.animate({ "50%": {cx: 100}, "100%": {cx: 230} }, 2000).animate({ "25%": {cy: 30, r: 10}, "50%": {cy: 230, r: 20}, "75%": {cy: 50, r: 10}, "100%": {cy: 130, r: 20} }, 2000);
  32. 32. clip-rect href stroke-linejoin cursor opacity stroke-miterlimit cx path stroke-opacity cy r stroke-width fill rotation target fill-opacity rx text font ry text-anchor font-family scale title font-size src translation font-style stroke width font-weight stroke-dasharray x height stroke-linecap y
  33. 33. Paths
  34. 34. var path = paper.path(pathString);
  35. 35. M278.939,132.632l-0.641-0.853l0.183-1.97l-0.975,0.091l-0.92-0.092l-0.506,0.415l-0. 526,0.234l-0.541,0.053l-0.939-0.271l-1.049,0.468l-0.813-0.833l-0.938-0.272l-0.851, 0.631l-0.67,0.614l-1.083,0.106l-0.904,0.09l-0.108,0.741l0.288,1.068l0.722-0.073l-0 .651,0.795l-0.129,0.559l-1.049,0.47l-0.757-0.291l-0.433-0.688l-0.651,0.794l-0.651, 0.795l-0.309,0.578l-0.688,0.433l-0.47-1.049l-0.069-0.723l-0.435-0.688l-0.415-0.507 l-0.631-0.85l-1.121-0.254l-1.643-0.021l-0.577-0.309l-0.761-0.29l-0.722,0.071l-0.23 5-0.524l-0.903,0.089l-1.41,0.504l-1.3-0.237l-1.321-0.416l-0.541,0.053L250,132.249l -1.104-0.073l-0.073,1.102l-0.722,0.072l0.053,0.543l-0.869,0.449l-53.113-0.052l-0.0 02,0.043v45.292l0.08-0.038l1.109-0.168l1.834,0.86l1.024-0.723l1.748,0.305l2.12,0.2 48l1.73,1.44l0.492,2.009l1.092,0.971l0.045-0.953l1.055-0.539l0.98,0.232l1.721,0.11 9l1.008,0.413l0.604,2.748l1.444,2.054l1.138,0.018l1.619,0.701l1.973,1.783l0.379,1. 268l1.277,0.943l1.619,0.701l1.295-0.195l-0.223-1.481l0.471-0.638l0.741-0.11l0.823, 0.444l1.85-0.28l1.434,0.729l0.925-0.139l1.223,0.571l1.164,0.204l0.658-0.666l0.896- 0.327l1.037,0.603l1.961,0.461l1.451-0.408l1.083-0.354l0.74-0.111l0.711-0.295l0.899 -0.326l1.433,0.73l-0.204,1.168l0.566,1.235l0.722,1.028l0.354,1.082l-0.178,1.349l8. 182,4.065l1.721,0.121l0.873,0.643h0.513l-0.213,0.64l0.112-0.336l0.227,0.167l0.939- 0.471l-0.213-1.704l0.427-0.212h0.425l-0.425-1.065l-0.853-0.213l0.426-0.853l-0.426- 1.064l0.426,0.214l0.427-1.491l0.851-3.406l-0.213-2.131l0.426-1.277h-0.426l1.065-0. 852l-0.64-0.853l0.854,0.213l1.703-4.046l1.49-0.428l-0.641-1.275l0.641-0.214v0.853l 0.424-0.214l-0.424-1.276l-0.426,0.213l0.213-0.426l-0.854-0.213l1.49-0.64l0.427-1.4 91l-0.427-0.639l0.64-0.215v-1.489l1.703-1.703l-0.638-0.214l1.063-0.213l-1.276-0.42 6l1.489-0.213l0.214-1.064l-0.64,0.426l-0.427-0.426l0.64,0.213l-0.213-0.639l0.64,0. 426l0.213-1.704v-0.212l-0.427,0.425v-0.639l-0.213,0.214l-0.213-0.641l0.64,0.427l0. 213-1.064v0.853l0.852-0.426l0.214-1.064l-0.427-0.427h0.854l0.637-1.703l-0.637,0.85 3l-0.214-0.853h0.638v-0.853l0.213,0.853l0.854-1.491l-0.213-0.426h0.427v0.64l2.556- 1.491l-0.853-0.213l-0.853,0.639l-0.213-0.213l0.426-0.426l-0.213-0.426l0.853,0.426l 0.638-0.426l0.215,0.426l0.853-1.277l1.489-0.853l0.214-1.702l-0.64-0.215v0.428l-0.8 52-0.428h1.064l0.213-1.49l1.49-1.277l1.918-6.176l-0.213-4.26l1.489-3.834l0.213-0.6 39l0.64-3.62l-0.64-0.426l0.64,0.213l-0.213-0.853l1.703-3.193h-0.426l0.426-0.214L27 8.939,132.632zM261.268,143.072h-0.215l-0.213-0.639l0.641-0.214L261.268,143.072z
  36. 36. M278.939,132.632l-0.641-0.853l0.183-1.97l-0.975,0.091l-0.92-0.092l-0.506,0.415l-0. 526,0.234l-0.541,0.053l-0.939-0.271l-1.049,0.468l-0.813-0.833l-0.938-0.272l-0.851, 0.631l-0.67,0.614l-1.083,0.106l-0.904,0.09l-0.108,0.741l0.288,1.068l0.722-0.073l-0 .651,0.795l-0.129,0.559l-1.049,0.47l-0.757-0.291l-0.433-0.688l-0.651,0.794l-0.651, 0.795l-0.309,0.578l-0.688,0.433l-0.47-1.049l-0.069-0.723l-0.435-0.688l-0.415-0.507 l-0.631-0.85l-1.121-0.254l-1.643-0.021l-0.577-0.309l-0.761-0.29l-0.722,0.071l-0.23 5-0.524l-0.903,0.089l-1.41,0.504l-1.3-0.237l-1.321-0.416l-0.541,0.053L250,132.249l -1.104-0.073l-0.073,1.102l-0.722,0.072l0.053,0.543l-0.869,0.449l-53.113-0.052l-0.0 02,0.043v45.292l0.08-0.038l1.109-0.168l1.834,0.86l1.024-0.723l1.748,0.305l2.12,0.2 48l1.73,1.44l0.492,2.009l1.092,0.971l0.045-0.953l1.055-0.539l0.98,0.232l1.721,0.11 9l1.008,0.413l0.604,2.748l1.444,2.054l1.138,0.018l1.619,0.701l1.973,1.783l0.379,1. 268l1.277,0.943l1.619,0.701l1.295-0.195l-0.223-1.481l0.471-0.638l0.741-0.11l0.823, 0.444l1.85-0.28l1.434,0.729l0.925-0.139l1.223,0.571l1.164,0.204l0.658-0.666l0.896- 0.327l1.037,0.603l1.961,0.461l1.451-0.408l1.083-0.354l0.74-0.111l0.711-0.295l0.899 -0.326l1.433,0.73l-0.204,1.168l0.566,1.235l0.722,1.028l0.354,1.082l-0.178,1.349l8. 182,4.065l1.721,0.121l0.873,0.643h0.513l-0.213,0.64l0.112-0.336l0.227,0.167l0.939- 0.471l-0.213-1.704l0.427-0.212h0.425l-0.425-1.065l-0.853-0.213l0.426-0.853l-0.426- 1.064l0.426,0.214l0.427-1.491l0.851-3.406l-0.213-2.131l0.426-1.277h-0.426l1.065-0. 852l-0.64-0.853l0.854,0.213l1.703-4.046l1.49-0.428l-0.641-1.275l0.641-0.214v0.853l 0.424-0.214l-0.424-1.276l-0.426,0.213l0.213-0.426l-0.854-0.213l1.49-0.64l0.427-1.4 91l-0.427-0.639l0.64-0.215v-1.489l1.703-1.703l-0.638-0.214l1.063-0.213l-1.276-0.42 6l1.489-0.213l0.214-1.064l-0.64,0.426l-0.427-0.426l0.64,0.213l-0.213-0.639l0.64,0. 426l0.213-1.704v-0.212l-0.427,0.425v-0.639l-0.213,0.214l-0.213-0.641l0.64,0.427l0. 213-1.064v0.853l0.852-0.426l0.214-1.064l-0.427-0.427h0.854l0.637-1.703l-0.637,0.85 3l-0.214-0.853h0.638v-0.853l0.213,0.853l0.854-1.491l-0.213-0.426h0.427v0.64l2.556- 1.491l-0.853-0.213l-0.853,0.639l-0.213-0.213l0.426-0.426l-0.213-0.426l0.853,0.426l 0.638-0.426l0.215,0.426l0.853-1.277l1.489-0.853l0.214-1.702l-0.64-0.215v0.428l-0.8 52-0.428h1.064l0.213-1.49l1.49-1.277l1.918-6.176l-0.213-4.26l1.489-3.834l0.213-0.6 39l0.64-3.62l-0.64-0.426l0.64,0.213l-0.213-0.853l1.703-3.193h-0.426l0.426-0.214L27 8.939,132.632zM261.268,143.072h-0.215l-0.213-0.639l0.641-0.214L261.268,143.072z
  37. 37. M278.939,132.632l-0.641-0.853l0.183-1.97
  38. 38. Command M278.939,132.632l-0.641-0.853l0.183-1.97
  39. 39. Command M278.939,132.632l-0.641-0.853l0.183-1.97 x
  40. 40. Command M278.939,132.632l-0.641-0.853l0.183-1.97 x y
  41. 41. var r = Raphael(100, 10, 300, 250), bg1 = r.path("M50,150l180,0").attr({stroke: "#fff", "stroke-width": 28, "stroke-linecap": "round"}), bg2 = r.path("M50,150l180,0").attr({stroke: "#000", "stroke-width": 24, "stroke-linecap": "round"}), bar = r.path("M50,150l.001,0").attr({stroke: "#fff", "stroke-width": 20, "stroke-linecap": "round"});
  42. 42. var r = Raphael(100, 10, 300, 250), 2000, ">"); bar.animate({path: "M50,150l180,0"}, bg1 = r.path("M50,150l180,0").attr({stroke: "#fff", "stroke-width": 28, "stroke-linecap": "round"}), bg2 = r.path("M50,150l180,0").attr({stroke: "#000", "stroke-width": 24, "stroke-linecap": "round"}), bar = r.path("M50,150l.001,0").attr({stroke: "#fff", "stroke-width": 20, "stroke-linecap": "round"});
  43. 43. var r = Raphael(100, 10, 300, 250), 2000, ">"); bar.animate({path: "M50,150l180,0"}, bg1 = r.path("M50,150l180,0").attr({stroke: "#fff", "stroke-width": 28, "stroke-linecap": "round"}), bg2 = r.path("M50,150l180,0").attr({stroke: "#000", "stroke-width": 24, "stroke-linecap": "round"}), bar = r.path("M50,150l.001,0").attr({stroke: "#fff", "stroke-width": 20, "stroke-linecap": "round"});
  44. 44. var r = Raphael(100, 10, 300, 250), bg1 = r.path("M50,150a100,100,0,0,1,180,0").attr({stroke: "#fff", "stroke-width": 28, "stroke-linecap": "round"}), bg2 = r.path("M50,150a100,100,0,0,1,180,0").attr({stroke: "#000", "stroke-width": 24, "stroke-linecap": "round"}), bar = r.path("M50,150a100,100,0,0,1,.001,0").attr({stroke: "#fff", "stroke-width": 20, "stroke-linecap": "round"});
  45. 45. var r = Raphael(100, 10, 300, 250), bg1 = r.path("M50,150a100,100,0,0,1,180,0").attr({stroke: "#fff", "stroke-width": 28, "stroke-linecap": "round"}), bg2 = r.path("M50,150a100,100,0,0,1,180,0").attr({stroke: "#000", "stroke-width": 24, "stroke-linecap": "round"}), bar = r.path("M50,150a100,100,0,0,1,.001,0").attr({stroke: "#fff", "stroke-width": 20, "stroke-linecap": "round"});
  46. 46. bar.animate({path: "M50,150a100,100,0,0,1,180,0"}, 2000, ">");
  47. 47. bar.animate({path: "M50,150a100,100,0,0,1,180,0"}, 2000, ">");
  48. 48. var a = Math.acos(90 / 100), an = Math.PI - 2 * a; r.customAttributes.value = function (val) { var angle = Math.PI + a + an / 100 * val, x = 140 + 100 * Math.cos(angle), y = 193.6 + 100 * Math.sin(angle); return {path: "M50,150A100,100,0,0,1," + [x, y]}; };
  49. 49. var a = Math.acos(90 / 100), an = Math.PI - 2 * a; r.customAttributes.value = function (val) { var angle = Math.PI + a + an / 100 * val, x = 140 + 100 * Math.cos(angle), y = 193.6 + 100 * Math.sin(angle); return {path: "M50,150A100,100,0,0,1," + [x, y]}; };
  50. 50. var a = Math.acos(90 / 100), an = Math.PI - 2 * a; r.customAttributes.value = function (val) { var angle = Math.PI + a + an / 100 * val, x = 140 + 100 * Math.cos(angle), y = 193.6 + 100 * Math.sin(angle); return {path: "M50,150A100,100,0,0,1," + [x, y]}; };
  51. 51. var a = Math.acos(90 / 100), bar.attr({value: 0}).animate({value: 100}, 2000, ">"); an = Math.PI - 2 * a; r.customAttributes.value = function (val) { var angle = Math.PI + a + an / 100 * val, x = 140 + 100 * Math.cos(angle), y = 193.6 + 100 * Math.sin(angle); return {path: "M50,150A100,100,0,0,1," + [x, y]}; };
  52. 52. var a = Math.acos(90 / 100), bar.attr({value: 0}).animate({value: 100}, 2000, ">"); an = Math.PI - 2 * a; r.customAttributes.value = function (val) { var angle = Math.PI + a + an / 100 * val, x = 140 + 100 * Math.cos(angle), y = 193.6 + 100 * Math.sin(angle); return {path: "M50,150A100,100,0,0,1," + [x, y]}; };
  53. 53. var r = Raphael(100, 10, 300, 250), bar = r.rect(80, 200, 120, 30).attr({stroke: "#fff", "stroke-width": 2}), lbl = r.text(140, 180, 30).attr({fill: "#fff", font: "20px 'Museo Sans'"});
  54. 54. var r = Raphael(100, 10, 300, 250), lbl.attr({text: 130}); bar.animate({y: 100, 200, 120, 30).attr({stroke: "#fff", bar = r.rect(80, height: 130}, 2000, ">"); lbl.animateWith(bar, "stroke-width": 2}), {y: 80}, 2000, ">"); lbl = r.text(140, 180, 30).attr({fill: "#fff", font: "20px 'Museo Sans'"});
  55. 55. var r = Raphael(100, 10, 300, 250), lbl.attr({text: 130}); bar.animate({y: 100, 200, 120, 30).attr({stroke: "#fff", bar = r.rect(80, height: 130}, 2000, ">"); lbl.animateWith(bar, "stroke-width": 2}), {y: 80}, 2000, ">"); lbl = r.text(140, 180, 30).attr({fill: "#fff", font: "20px 'Museo Sans'"});
  56. 56. bar.animate({y: 100, height: 130}, 1000, ">"); lbl.animateWith(bar, {y: 80}, 1000, ">", function () { lbl.attr({text: 130}); });
  57. 57. bar.animate({y: 100, height: 130}, 1000, ">"); lbl.animateWith(bar, {y: 80}, 1000, ">", function () { lbl.attr({text: 130}); });
  58. 58. r.customAttributes.value = function (val) { return {text: Math.round(val)}; }; bar.animate({y: 100, height: 130}, 2000, ">"); lbl.attr({value: 30}).animateWith(bar, {y: 80, value: 130}, 2000, ">");
  59. 59. r.customAttributes.value = function (val) { return {text: Math.round(val)}; }; bar.animate({y: 100, height: 130}, 2000, ">"); lbl.attr({value: 30}).animateWith(bar, {y: 80, value: 130}, 2000, ">");
  60. 60. Plugins
  61. 61. Raphael.fn.arrow = function (x, y) { return this.path(["M", x, y] + "m-10-10l20,0 0-6 10,16 -10,16 0-6 -20,0 0,6 -10-16 10-16z").attr({ fill: "#fff", stroke: "none", opacity: 0.2 }); }; Raphael.el.fill = function (fill) { this.attr({fill: fill}); }; Raphael.el.stroke = function (stroke) { this.attr({stroke: stroke}); };
  62. 62. Charts!
  63. 63. Visualisations
  64. 64. 2012 2011 2010 2007 2009 2008
  65. 65. 2012 2011 2007 2010 2007 2011 2009 2009 2008 2008 2010 2012
  66. 66. UI
  67. 67. UI What kind of UI?
  68. 68. UI What kind of UI?
  69. 69. UI What kind of UI?
  70. 70. http://raphaeljs.com/icons/
  71. 71. Size does Matter
  72. 72. Printing
  73. 73. Web is not rectangular
  74. 74. Web is not rectangular anymore
  75. 75. Everyone Can Draw
  76. 76. Thank You
  77. 77. http://raphaeljs.com/ http://github.com/DmitryBaranovskiy/raphael http://twitter.com/raphaeljs

×