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

animVal of an object moving along a motion path

Expand Messages
  • tim.becker80
    Dear all, I m trying to get the x - y values of an object moving along a motion path (SMIL animate...). I m trying it using animVal. I get a negative result.
    Message 1 of 6 , Jan 23, 2009
    View Source
    • 0 Attachment
      Dear all,
      I'm trying to get the x - y values of an object moving along a motion
      path (SMIL animate...). I'm trying it using animVal. I get a negative
      result. Although the method works for simple animations, it seems it
      does not work for anim along a path...
      Is there a way of making it work?
      Below, find some code I adapted from one of Doug's examples.
      Try clicking the moving objects!

      Regards,
      Tim.



      <?xml version='1.0' standalone='no'?>
      <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20001102//EN'
      'http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd'>
      <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'
      onload='Init(evt)'>
      <title>Animated Values Test</title>

      <desc>
      Click on a shape, and the other shape will move to its animated
      value.
      Original Written by Doug Schepers [doug@...], January
      2004.
      Attempt by Tim to retrieve the x y values of an object moving
      along a
      motion path.
      </desc>


      <script><![CDATA[
      var SVGDocument = null;
      var SVGRoot = null;
      var Mary = null;
      var littleLamb = null;
      var Pinky = null;
      var Satellite = null;
      var Satellite2 = null;

      function Init(evt)
      {
      SVGDocument = evt.target.ownerDocument;
      SVGRoot = SVGDocument.documentElement;

      Mary = SVGDocument.getElementById('Mary');
      littleLamb = SVGDocument.getElementById('littleLamb');
      Pinky = SVGDocument.getElementById('Pinky');
      Satellite = SVGDocument.getElementById('Satellite');
      Satellite2 = SVGDocument.getElementById('Satellite2');

      }

      function SetRect(evt)
      {
      var aniCircle = evt.target;
      var aCX = Number(aniCircle.cx.animVal.value);

      littleLamb.x.baseVal.value = aCX
      //littleLamb.setAttributeNS(null, 'x', aCX);
      }

      function SetCircle(evt)
      {
      var aniRect = evt.target;
      var aRY = Number(aniRect.y.animVal.value);

      Mary.cy.baseVal.value = aRY
      //Mary.setAttributeNS(null, 'cx', aRY);
      }

      function getPinkysPosition(evt)
      {
      var aniPinky = evt.target;
      var aCX2 = Number(aniPinky.cx.animVal.value);
      var aCY2 = Number(aniPinky.cy.animVal.value);
      alert('The x-y coordinates of Pinky are: ' + aCX2 + ' ' + aCY2)
      }

      function getSatellitesPosition(evt)
      {
      var aniSatellite = evt.target;
      var aCXsat = Number(aniSatellite.cx.animVal.value);
      var aCYsat = Number(aniSatellite.cy.animVal.value);
      alert('The x-y coordinates of Satellite are: ' + aCXsat + ' '
      + aCYsat)
      }

      function getSatellite2sPosition(evt)
      {
      var aniSatellite2 = evt.target;
      var aCXsat2 = Number(aniSatellite2.cx.animVal.value);
      var aCYsat2 = Number(aniSatellite2.cy.animVal.value);
      alert('The x-y coordinates of Satellite2 are: ' + aCXsat2 + '
      ' + aCYsat2)
      }

      function alertStr(el)
      {
      str=[]
      for (i in el)
      {
      try
      {
      str.push(i+'\t'+el[i])
      }
      catch (e)
      {
      str.push(i+'\t[error]')
      }
      var a=str.length/20

      for (var i=0;i<a;i++)
      {
      alert(str.splice(0,20).join('\n'))
      }
      }
      }
      ]]></script>
      <circle id='Mary' cx='0' cy='50' r='20' style='fill:red2; '
      onclick='SetRect(evt)'>
      <animate attributeName='cx' attributeType='XML'
      begin='0s' dur='10s' repeatCount='indefinite' values='10; 200;
      10'/>
      </circle>

      <rect id='littleLamb' x='10' y='30' width='40' height='40' rx='5'
      ry='5' style='fill:blue; '
      onclick='SetCircle(evt)'>
      <animate attributeName='y' attributeType='XML'
      begin='0s' dur='10s' repeatCount='indefinite' values='10; 200;
      10'/>
      </rect>

      <circle id="Pinky" cy="300" r="40" fill="pink"
      onclick='getPinkysPosition(evt)'>
      <animate attributeName='cx' attributeType='XML' dur='5s'
      values='0;200;0' repeatCount='indefinite'/>
      </circle>



      <path fill = "none" stroke="red" d="M 100 0 A 100 100 0 1 1 -100 0 A
      100 100 0 1 1 100 0" transform="translate(100,200)"/>
      <circle id="Satellite2" r="20" fill="orange"
      onclick='getSatellite2sPosition(evt)' transform="translate(100,200)">
      <animateMotion path="M 100 0 A 100 100 0 1 1 -100 0 A 100 100 0 1
      1 100 0" dur="10s"
      rotate="auto" repeatCount="indefinite"/>


      <path fill = "none" stroke="red" d="M 100 0 A 100 100 0 1 1 -100 0 A
      100 100 0 1 1 100 0" transform="translate(300,200)"/>
      <g style="fill:lime" transform="translate(300,200)">
      <animateMotion path="M 100 0 A 100 100 0 1 1 -100 0 A 100 100 0 1 1
      100 0"
      dur="8s" repeatCount="indefinite" rotate="auto"/>
      <circle id="Satellite" r="20" onclick='getSatellitesPosition(evt)'/>
      </g>



      </circle>

      <text x = "10" y="360" style="font-size:15pt; fill:darkblue"
      >I would like getting the dynamic x - y coordinates of objects</
      text>
      <text x = "10" y="380" style="font-size:15pt; fill:darkblue"
      >moving along paths...</text>
      <text x = "10" y="400" style="font-size:15pt; fill:darkblue"
      >Try clicking the shapes. The orange, pink and lime shapes</
      text>
      <text x = "10" y="420" style="font-size:15pt; fill:darkblue"
      >will trigger an alert telling their coordinates...</text>
      <text x = "10" y="440" style="font-size:15pt; fill:darkblue"
      >But the coordinates of the circles moving in circles remain
      0;0 :(</text>
      <text x = "10" y="480" style="font-size:25pt; fill:purple"
      >Any solution :)?</text>
      </svg>
    • Erik Dahlström
      Message 2 of 6 , Jan 26, 2009
      View Source
      • 0 Attachment
      • Erik Dahlström
        ... You aren t animating the cx and cy attributes, but rather you are using a motionpath. To calculate a position you will have to use a combination of the
        Message 3 of 6 , Jan 26, 2009
        View Source
        • 0 Attachment
          On Fri, 23 Jan 2009 17:37:06 +0100, tim.becker80 <timothee.becker@...> wrote:

          > Dear all,
          > I'm trying to get the x - y values of an object moving along a motion
          > path (SMIL animate...). I'm trying it using animVal. I get a negative
          > result. Although the method works for simple animations, it seems it
          > does not work for anim along a path...
          > Is there a way of making it work?
          > Below, find some code I adapted from one of Doug's examples.
          > Try clicking the moving objects!

          You aren't animating the cx and cy attributes, but rather you are using a motionpath.

          To calculate a position you will have to use a combination of the following:

          - getCurrentTime and getStartTime[1]
          - getTotalLength and getPointAtLength[2]

          Also you'll have to use an mpath element to point at a path element since the animateMotion element doesn't have a DOM interface for accessing the path directly.

          Hope this helps
          /Erik

          [1] http://www.w3.org/TR/SVG11/animate.html#InterfaceSVGAnimationElement
          [2] http://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathElement

          --
          Erik Dahlstrom, Core Technology Developer, Opera Software
          Co-Chair, W3C SVG Working Group
          Personal blog: http://my.opera.com/macdev_ed
        • Frank Bruder
          You could try retrieving the transformation matrix, which is appended due to the animateMotion, from element.transform.animVal which is an SVGTransformList.
          Message 4 of 6 , Jan 28, 2009
          View Source
          • 0 Attachment
            You could try retrieving the transformation matrix, which is appended
            due to the animateMotion, from

            element.transform.animVal

            which is an SVGTransformList. But I'm not sure whether this
            transformation is supposed to be accessible by script. I don't find
            anything in the specification which would explicitly say so. Of
            course, I also don't know whether or not this works in user agents,
            but you can try.


            Regards
            Frank

            --- In svg-developers@yahoogroups.com, "tim.becker80"
            <timothee.becker@...> wrote:
            >
            > Dear all,
            > I'm trying to get the x - y values of an object moving along a motion
            > path (SMIL animate...). I'm trying it using animVal. I get a negative
            > result. Although the method works for simple animations, it seems it
            > does not work for anim along a path...
            > Is there a way of making it work?
            > Below, find some code I adapted from one of Doug's examples.
            > Try clicking the moving objects!
            >
            > Regards,
            > Tim.
            >
            >
            >
            > <?xml version='1.0' standalone='no'?>
            > <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20001102//EN'
            > 'http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd'>
            > <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'
            > onload='Init(evt)'>
            > <title>Animated Values Test</title>
            >
            > <desc>
            > Click on a shape, and the other shape will move to its animated
            > value.
            > Original Written by Doug Schepers [doug@...], January
            > 2004.
            > Attempt by Tim to retrieve the x y values of an object moving
            > along a
            > motion path.
            > </desc>
            >
            >
            > <script><![CDATA[
            > var SVGDocument = null;
            > var SVGRoot = null;
            > var Mary = null;
            > var littleLamb = null;
            > var Pinky = null;
            > var Satellite = null;
            > var Satellite2 = null;
            >
            > function Init(evt)
            > {
            > SVGDocument = evt.target.ownerDocument;
            > SVGRoot = SVGDocument.documentElement;
            >
            > Mary = SVGDocument.getElementById('Mary');
            > littleLamb = SVGDocument.getElementById('littleLamb');
            > Pinky = SVGDocument.getElementById('Pinky');
            > Satellite = SVGDocument.getElementById('Satellite');
            > Satellite2 = SVGDocument.getElementById('Satellite2');
            >
            > }
            >
            > function SetRect(evt)
            > {
            > var aniCircle = evt.target;
            > var aCX = Number(aniCircle.cx.animVal.value);
            >
            > littleLamb.x.baseVal.value = aCX
            > //littleLamb.setAttributeNS(null, 'x', aCX);
            > }
            >
            > function SetCircle(evt)
            > {
            > var aniRect = evt.target;
            > var aRY = Number(aniRect.y.animVal.value);
            >
            > Mary.cy.baseVal.value = aRY
            > //Mary.setAttributeNS(null, 'cx', aRY);
            > }
            >
            > function getPinkysPosition(evt)
            > {
            > var aniPinky = evt.target;
            > var aCX2 = Number(aniPinky.cx.animVal.value);
            > var aCY2 = Number(aniPinky.cy.animVal.value);
            > alert('The x-y coordinates of Pinky are: ' + aCX2 + ' ' + aCY2)
            > }
            >
            > function getSatellitesPosition(evt)
            > {
            > var aniSatellite = evt.target;
            > var aCXsat = Number(aniSatellite.cx.animVal.value);
            > var aCYsat = Number(aniSatellite.cy.animVal.value);
            > alert('The x-y coordinates of Satellite are: ' + aCXsat + ' '
            > + aCYsat)
            > }
            >
            > function getSatellite2sPosition(evt)
            > {
            > var aniSatellite2 = evt.target;
            > var aCXsat2 = Number(aniSatellite2.cx.animVal.value);
            > var aCYsat2 = Number(aniSatellite2.cy.animVal.value);
            > alert('The x-y coordinates of Satellite2 are: ' + aCXsat2 + '
            > ' + aCYsat2)
            > }
            >
            > function alertStr(el)
            > {
            > str=[]
            > for (i in el)
            > {
            > try
            > {
            > str.push(i+'\t'+el[i])
            > }
            > catch (e)
            > {
            > str.push(i+'\t[error]')
            > }
            > var a=str.length/20
            >
            > for (var i=0;i<a;i++)
            > {
            > alert(str.splice(0,20).join('\n'))
            > }
            > }
            > }
            > ]]></script>
            > <circle id='Mary' cx='0' cy='50' r='20' style='fill:red2; '
            > onclick='SetRect(evt)'>
            > <animate attributeName='cx' attributeType='XML'
            > begin='0s' dur='10s' repeatCount='indefinite' values='10; 200;
            > 10'/>
            > </circle>
            >
            > <rect id='littleLamb' x='10' y='30' width='40' height='40' rx='5'
            > ry='5' style='fill:blue; '
            > onclick='SetCircle(evt)'>
            > <animate attributeName='y' attributeType='XML'
            > begin='0s' dur='10s' repeatCount='indefinite' values='10; 200;
            > 10'/>
            > </rect>
            >
            > <circle id="Pinky" cy="300" r="40" fill="pink"
            > onclick='getPinkysPosition(evt)'>
            > <animate attributeName='cx' attributeType='XML' dur='5s'
            > values='0;200;0' repeatCount='indefinite'/>
            > </circle>
            >
            >
            >
            > <path fill = "none" stroke="red" d="M 100 0 A 100 100 0 1 1 -100 0 A
            > 100 100 0 1 1 100 0" transform="translate(100,200)"/>
            > <circle id="Satellite2" r="20" fill="orange"
            > onclick='getSatellite2sPosition(evt)' transform="translate(100,200)">
            > <animateMotion path="M 100 0 A 100 100 0 1 1 -100 0 A 100 100 0 1
            > 1 100 0" dur="10s"
            > rotate="auto" repeatCount="indefinite"/>
            >
            >
            > <path fill = "none" stroke="red" d="M 100 0 A 100 100 0 1 1 -100 0 A
            > 100 100 0 1 1 100 0" transform="translate(300,200)"/>
            > <g style="fill:lime" transform="translate(300,200)">
            > <animateMotion path="M 100 0 A 100 100 0 1 1 -100 0 A 100 100 0 1 1
            > 100 0"
            > dur="8s" repeatCount="indefinite" rotate="auto"/>
            > <circle id="Satellite" r="20" onclick='getSatellitesPosition(evt)'/>
            > </g>
            >
            >
            >
            > </circle>
            >
            > <text x = "10" y="360" style="font-size:15pt; fill:darkblue"
            > >I would like getting the dynamic x - y coordinates of objects</
            > text>
            > <text x = "10" y="380" style="font-size:15pt; fill:darkblue"
            > >moving along paths...</text>
            > <text x = "10" y="400" style="font-size:15pt; fill:darkblue"
            > >Try clicking the shapes. The orange, pink and lime shapes</
            > text>
            > <text x = "10" y="420" style="font-size:15pt; fill:darkblue"
            > >will trigger an alert telling their coordinates...</text>
            > <text x = "10" y="440" style="font-size:15pt; fill:darkblue"
            > >But the coordinates of the circles moving in circles remain
            > 0;0 :(</text>
            > <text x = "10" y="480" style="font-size:25pt; fill:purple"
            > >Any solution :)?</text>
            > </svg>
            >
          • Erik Dahlström
            ... The spec only says that animateMotion adds a supplemental transformation to the target element CTM. Since rotate also provides a supplemental rotation it
            Message 5 of 6 , Jan 29, 2009
            View Source
            • 0 Attachment
              On Thu, 29 Jan 2009 03:04:03 +0100, Frank Bruder <redurbf@...> wrote:

              > You could try retrieving the transformation matrix, which is appended
              > due to the animateMotion, from
              >
              > element.transform.animVal
              >
              > which is an SVGTransformList. But I'm not sure whether this
              > transformation is supposed to be accessible by script. I don't find
              > anything in the specification which would explicitly say so. Of
              > course, I also don't know whether or not this works in user agents,
              > but you can try.

              The spec only says that animateMotion adds a supplemental transformation to the target element CTM. Since 'rotate' also provides a supplemental rotation it would then need to be defined if these are separate or not.

              The (combined/uncombined) supplemental transformation is not exposed in Opera currently. Same for Batik 1.7.

              Would the matrices/transforms be useful to have accessible in the DOM, or would it be easier to just be able to access the current point-on-the-path where the object is placed at a given time t?

              Cheers
              /Erik

              --
              Erik Dahlstrom, Core Technology Developer, Opera Software
              Co-Chair, W3C SVG Working Group
              Personal blog: http://my.opera.com/macdev_ed
            • tim.becker80
              ... DOM, or would it be easier to just be able to access the current point-on-the-path where the object is placed at a given time t? For me, just be able to
              Message 6 of 6 , Jan 29, 2009
              View Source
              • 0 Attachment
                > Would the matrices/transforms be useful to have accessible in the
                DOM, or would it be easier to just be able to access the current
                point-on-the-path where the object is placed at a given time t?

                For me, "just be able to access the current point-on-the-path where
                the object is placed at a given time t" :)
                Tim


                --- In svg-developers@yahoogroups.com, Erik Dahlström <ed@...> wrote:
                >
                > On Thu, 29 Jan 2009 03:04:03 +0100, Frank Bruder <redurbf@...>
                wrote:
                >
                > > You could try retrieving the transformation matrix, which is
                appended
                > > due to the animateMotion, from
                > >
                > > element.transform.animVal
                > >
                > > which is an SVGTransformList. But I'm not sure whether this
                > > transformation is supposed to be accessible by script. I don't
                find
                > > anything in the specification which would explicitly say so. Of
                > > course, I also don't know whether or not this works in user
                agents,
                > > but you can try.
                >
                > The spec only says that animateMotion adds a supplemental
                transformation to the target element CTM. Since 'rotate' also
                provides a supplemental rotation it would then need to be defined if
                these are separate or not.
                >
                > The (combined/uncombined) supplemental transformation is not
                exposed in Opera currently. Same for Batik 1.7.
                >
                > Would the matrices/transforms be useful to have accessible in the
                DOM, or would it be easier to just be able to access the current
                point-on-the-path where the object is placed at a given time t?
                >
                > Cheers
                > /Erik
                >
                > --
                > Erik Dahlstrom, Core Technology Developer, Opera Software
                > Co-Chair, W3C SVG Working Group
                > Personal blog: http://my.opera.com/macdev_ed
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.