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

Interactive access to interpolated states of an SVG SMIL animation

Expand Messages
  • tim.becker80
    Dear all, I m working with SVG interactive animation for spatio-temporal data. The main feature of the application I m trying to build is a time- slider
    Message 1 of 4 , Nov 3, 2008
    • 0 Attachment
      Dear all,
      I'm working with SVG interactive animation for spatio-temporal data.
      The main feature of the application I'm trying to build is a time-
      slider capable of interactively controlling a SMIL animation.
      Thanks to Kevin and carto.net, no need to build the slider, it's
      already available.
      Ideally, I'd like the slider to reveal "micro-steps", those that are
      interpolated in SMIL animation. In other words, the slider should
      dynamically control the whole sequence of a SMIL animation's frames,
      including the ones that are interpolated.
      Does the present specification allow such a level of interactivity
      with the temporal dimension?

      Is it possible?
      Who can give me info on this or direct me towards it?

      Thanks,
      Tim.
    • Dailey, David P.
      This is an interesting question, but I m not sure my answer will be interesting or definitive, but let me go ahead and make a stab at it. If I miss something
      Message 2 of 4 , Nov 3, 2008
      • 0 Attachment
        This is an interesting question, but I'm not sure my answer will be interesting or definitive, but let me go ahead and make a stab at it. If I miss something obvious then others will likely correct the oversight:

        My first thought was that it may be relative to what is being animated. For example in the case of an object following a path, we may use the path length methods to figure out intermediate points (see for example http://srufaculty.sru.edu/david.dailey/svg/curve.svg) but in the case of another SMIL animation, the fine-tuned control of that object within the <animate> tag does not (at least as I think about it now) reveal such.

        On the other hand (as some people involved in fakeSMIL have probably leveraged),
        <tag id="Q"><animate attributeName="something" values="a1;a2;...;an" dur="k" ...></tag> is pretty much the same as
        function animate(){
        code to assign v to proper values of [a1,a2,...,an] over dur k
        code to terminate loop based on value of dur, tinytime, repeatCount and a loopcounter
        document.getElementById("Q").setAttributeNS(null, something, v)
        window.setTimeout(tinytime, "animate()")
        }
        (modulo my imprecision)

        so another function which takes a parameter from the slider and simply moves
        setAttribute of Q to something, in one static moment would probably accomplish exactly the same thing.

        Of course, if the animation is complicated by having multiple attributes animated for differing durations and the like -- there would have to be a chunk of code using the above approach.

        Can anyone thing of a more purely SMIL-y solution?

        cheers
        David

        ________________________________

        From: svg-developers@yahoogroups.com on behalf of tim.becker80
        Sent: Mon 11/3/2008 9:31 AM
        To: svg-developers@yahoogroups.com
        Subject: [svg-developers] Interactive access to interpolated states of an SVG SMIL animation



        Dear all,
        I'm working with SVG interactive animation for spatio-temporal data.
        The main feature of the application I'm trying to build is a time-
        slider capable of interactively controlling a SMIL animation.
        Thanks to Kevin and carto.net, no need to build the slider, it's
        already available.
        Ideally, I'd like the slider to reveal "micro-steps", those that are
        interpolated in SMIL animation. In other words, the slider should
        dynamically control the whole sequence of a SMIL animation's frames,
        including the ones that are interpolated.
        Does the present specification allow such a level of interactivity
        with the temporal dimension?

        Is it possible?
        Who can give me info on this or direct me towards it?

        Thanks,
        Tim.
      • Frank Bruder
        When the slider is moved, you can call setCurrentTime() on the root element First you ll have
        Message 3 of 4 , Nov 3, 2008
        • 0 Attachment
          When the slider is moved, you can call setCurrentTime() on the root
          element
          <http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGSVGElement>
          First you'll have to call pauseAnimations() so the animations will not
          run when the slider isn't moved.

          If you need to obtain any values for the time to which you slided,
          then use the respective animVal instead of getAttributeNS().

          One problem which arises is how to determine the time span which the
          slider should parametrize. Animations can loop indefinitely, so there
          is no global end time for an animated SVG.

          --- In svg-developers@yahoogroups.com, "tim.becker80"
          <timothee.becker@...> wrote:
          >
          > Dear all,
          > I'm working with SVG interactive animation for spatio-temporal data.
          > The main feature of the application I'm trying to build is a time-
          > slider capable of interactively controlling a SMIL animation.
          > Thanks to Kevin and carto.net, no need to build the slider, it's
          > already available.
          > Ideally, I'd like the slider to reveal "micro-steps", those that are
          > interpolated in SMIL animation. In other words, the slider should
          > dynamically control the whole sequence of a SMIL animation's frames,
          > including the ones that are interpolated.
          > Does the present specification allow such a level of interactivity
          > with the temporal dimension?
          >
          > Is it possible?
          > Who can give me info on this or direct me towards it?
          >
          > Thanks,
          > Tim.
          >
        • Erik Dahlström
          ... Yes, either animVal, or the getPresentation*Trait methods[1]. I found the TraitAccess methods easier to work with for the presentation attributes / css
          Message 4 of 4 , Nov 4, 2008
          • 0 Attachment
            On Tue, 04 Nov 2008 02:52:50 +0100, Frank Bruder <redurbf@...> wrote:

            > When the slider is moved, you can call setCurrentTime() on the root
            > element
            > <http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGSVGElement>
            > First you'll have to call pauseAnimations() so the animations will not
            > run when the slider isn't moved.
            >
            > If you need to obtain any values for the time to which you slided,
            > then use the respective animVal instead of getAttributeNS().

            Yes, either animVal, or the getPresentation*Trait methods[1]. I found the TraitAccess methods easier to work with for the presentation attributes / css properties than the SVG 1.1 way with the CSS OM [2]. However, for attributes I still prefer the SVG 1.1 syntax, mostly because that works in all the svg-capable web browsers.

            > One problem which arises is how to determine the time span which the
            > slider should parametrize. Animations can loop indefinitely, so there
            > is no global end time for an animated SVG.

            Yes, that is difficult to say, and not always applicable. There has been some discussion about adding an attribute on the root svg element to say what the intrinsic duration is [3].

            Cheers
            /Erik

            [1] http://www.w3.org/TR/SVGMobile12/svgudom.html#svg__TraitAccess
            [2] http://www.w3.org/TR/DOM-Level-2-Style/
            [3] http://lists.w3.org/Archives/Public/www-svg/2008Jul/0015.html

            --
            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.