Posted By

gdesjardins on 03/07/11


Tagged

javascript animation


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

frcomarin


js animation


 / Published in: JavaScript
 

URL: http://www.arc.id.au/JsAnimation.html

  1. /*
  2. src: http://www.arc.id.au/JsAnimation.html
  3. */
  4.  
  5. //Globals
  6. var tickInt = 25; // tick interval in msec
  7. var PIon180 = Math.PI / 180;
  8.  
  9. function pos(x, y)
  10. {
  11. this.x = Math.round(x);
  12. this.y = Math.round(y);
  13. }
  14.  
  15. function animation(id, path, steps)
  16. {
  17. this.elem = document.getElementById(id);
  18. this.active = 0;
  19. this.timer = null;
  20. this.path = path; // pointer to path object
  21. this.pathIdx = 0; // step counter
  22. this.numSteps = steps; // total steps, 0 = go forever
  23. }
  24.  
  25. animation.prototype.start = function()
  26. {
  27. if (this.active)
  28. return;
  29.  
  30. var saveThis = this; /* save for use in closure */
  31.  
  32. this.step();
  33. this.active = 1;
  34. this.timer = setInterval(function(){saveThis.step()}, tickInt);
  35. }
  36.  
  37. animation.prototype.stop = function()
  38. {
  39. if (!this.timer)
  40. return false;
  41. clearInterval(this.timer);
  42. this.active = 0;
  43. }
  44.  
  45. animation.prototype.step = function()
  46. {
  47. var nextPos = this.path.nextStep(this.pathIdx);
  48.  
  49. this.moveTo(nextPos.x, nextPos.y);
  50. if ((this.numSteps > 0) && (this.pathIdx >= this.numSteps))
  51. this.stop();
  52. else
  53. this.pathIdx++;
  54. }
  55.  
  56. animation.prototype.moveTo = function(x, y)
  57. {
  58. this.elem.style.top = y + 'px';
  59. this.elem.style.left = x + 'px';
  60. }
  61.  
  62. // Circular path object
  63. function circle(initPos, radius, angle0, stepSize)
  64. {
  65. this.rad = radius;
  66. this.startAngle = angle0;
  67. this.aStep = stepSize; // angle per step
  68. this.cx = initPos.x - this.rad * Math.cos(angle0 * PIon180); // coords of centre
  69. this.cy = initPos.y - this.rad * Math.sin(angle0 * PIon180);
  70. this.currX = initPos.x;
  71. this.currY = initPos.y;
  72. }
  73.  
  74. circle.prototype.nextStep = function(index)
  75. {
  76. var angle = this.startAngle - index * this.aStep; // +ve angles are cw, we want ccw
  77. this.currX = this.cx + this.rad * Math.cos(angle * PIon180);
  78. this.currY = this.cy + this.rad * Math.sin(angle * PIon180);
  79.  
  80. return new pos(this.currX, this.currY);
  81. }
  82. //y=mx+b
  83. m = slope
  84. b = y-intercept
  85. function slope(intPos, slope, intercept, distance, stepSize)
  86. {
  87. this.slope = sploe;
  88. this.intercept = intercept;
  89. this.distance = distance;
  90. this.aStep = stepSize;
  91. this.intX = initPos.x;
  92. this.intY = initPos.y;
  93. this.currX = initPos.x;
  94. this.currY = initPos.y;
  95. }
  96. slope.prototype.nextStep = function(index)
  97. {
  98.  
  99. }
  100.  
  101. //example
  102. /*
  103.  
  104. All that remains is some initialisation code to create the objects. This code is run when the page is has finished loading.
  105.  
  106. function initAnimation3()
  107. {
  108.   var p1 = new pos(160, 90);
  109.   var startAngle = 0; // in degrees
  110.   var rad = 70; // radius of circle
  111.   var step = 3; // step size along the line, in degrees per tick
  112.  
  113.   var circ = new circle(p1, rad, startAngle, step);
  114.   anim3 = new animation("ball3", circ, 0); // number of steps, 0 = forever
  115. }
  116.  
  117. The stop and start buttons make the calls anim3.stop() and anim3.start().
  118.  
  119. */

Report this snippet  

You need to login to post a comment.