Loading ...
Sorry, an error occurred while loading the content.

Jumping rings: much improved

Expand Messages
  • Coolients
    Thank Chris for the hint to add fills to the squares, and thank Mathias to direct me to Antoine Quint s tutorial. Now the movements of the rings are much
    Message 1 of 1 , Oct 31, 2003
    • 0 Attachment
      Thank Chris for the hint to add fills to the squares, and thank
      Mathias to direct me to Antoine Quint's tutorial. Now the movements
      of the rings are much smoother.

      Larry

      ------------------------------------------------------------


      <?xml version="1.0" standalone="yes"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
      "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

      <svg width="400" height="400" onload="init(evt)">

      <title>Jumping Rings</title>
      <desc>

      Description: rings jump when mouse moves across them.

      Author: Larry Zhu

      Date: October 31, 2003. Happy Halloween!

      Updates:

      Add fills to squares (but hide them by setting opacity low)
      so they
      respond to mouse events faster.

      Add restart="whenNotActive" to
      suppress "premature" restarting.

      Add spline mode to make the jumping more
      like against gravity.

      </desc>

      <script type="text/ecmascript">
      <![CDATA[

      var sq1, sq2, cir, cirId, anim1, i, LEN = 10;
      var r_x = 10, r_y = 5, x_gap = 20, start_coord = 200;
      var SVGdoc, pond;

      function init(evt)
      {
      SVGdoc = evt.target.ownerDocument;
      pond = SVGdoc.getElementById("pond");
      cnt = 0;
      for(i = 0; i < LEN; i++)
      {
      sq_x = start_coord - (i*x_gap+x_gap);
      sq1 = SVGdoc.createElement("rect");
      sq1.setAttribute("x", sq_x);
      sq1.setAttribute("y", "0");
      sq1.setAttribute("width", x_gap);
      sq1.setAttribute("height", "400");
      sq1.setAttribute("stroke", "#99ccff");
      sq1.setAttribute("fill", "#ffffff");
      sq1.setAttribute("opacity", "0.000001");
      sq1.setAttribute("id", i.toString());
      sq1.setAttribute("onmouseover", "jump()");

      sq_x = start_coord + i*x_gap;
      sq2 = SVGdoc.createElement("rect");
      sq2.setAttribute("x", sq_x);
      sq2.setAttribute("y", "0");
      sq2.setAttribute("width", x_gap);
      sq2.setAttribute("height", "400");
      sq2.setAttribute("stroke", "#99ccff");
      sq2.setAttribute("fill", "#ffffff");
      sq2.setAttribute("opacity", "0.000001");
      sq2.setAttribute("id", i.toString());
      sq2.setAttribute("onmouseover", "jump()");

      cir = SVGdoc.createElement("ellipse");
      cirId = "cir"+i.toString();
      cir.setAttribute("id", cirId);
      cir.setAttribute("cx", start_coord);
      cir.setAttribute("cy", start_coord);
      cir.setAttribute("rx", r_x);
      cir.setAttribute("ry", r_y);
      cir.setAttribute("fill", "none");
      cir.setAttribute("stroke", "#ffff99");

      anim1 = SVGdoc.createElement("animate");
      anim1.setAttribute("attributeName", "cy");
      anim1.setAttribute("fill", "freeze");
      anim1.setAttribute("calcMode", "spline");
      anim1.setAttribute("keyTimes", "0;.5;1");
      anim1.setAttribute("values", "200;0;200");
      anim1.setAttribute
      ("keySplines", "0,.6,.75,1;0,.6,.75,1");
      anim1.setAttribute("dur", "2s");
      anim1.setAttribute("begin", "indefinite");
      anim1.setAttribute("restart", "whenNotActive");

      cir.appendChild(anim1);

      pond.appendChild(sq1);
      pond.appendChild(sq2);
      pond.appendChild(cir);
      r_x += x_gap;
      r_y += 5;
      }
      }

      function jump()
      {
      var sq_id = evt.target.getAttribute("id");
      var tmp = SVGdoc.getElementById("cir"+sq_id);
      tmp.firstChild.beginElement();
      SVGdoc.getElementById("disp").firstChild.setData
      (sq_id.toString());
      }

      ]]>
      </script>

      <rect x='0' y='0' width='400' height='400'
      style='stroke-width:1;stroke:black;fill:#99ccff' />
      <text id="disp" x="350" y="20" style="font-family:Arial;font-
      size:16;stroke:none;fill:red">0</text>
      <g id="pond"></g>

      </svg>
    Your message has been successfully submitted and would be delivered to recipients shortly.