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

Carousel Animation - any way declaratively?

Expand Messages
  • Jeff Schiller
    Think of some icons arranged on a carousel , with an animation that would spin the carousel so that the closest icon to you is the selected icon. Is there
    Message 1 of 17 , Sep 24, 2007
    View Source
    • 0 Attachment
      Think of some icons arranged on a "carousel", with an animation that
      would spin the carousel so that the closest icon to you is the
      "selected" icon. Is there any way to do this declaratively?

      Seems like the z-order and painter's model poses a problem that
      requires scripting to fix, but I would love to be proven wrong...
    • ddailey
      ... Hi Jeff, Let me see if I understand: suppose we synchronize the position in the carousel with another SMIL timer (as in
      Message 2 of 17 , Sep 24, 2007
      View Source
      • 0 Attachment
        Jeff Schiller wrote:

        >Think of some icons arranged on a "carousel", with an animation that
        >would spin the carousel so that the closest icon to you is the
        >"selected" icon. Is there any way to do this declaratively?

        >Seems like the z-order and painter's model poses a problem that
        >requires scripting to fix, but I would love to be proven wrong...

        Hi Jeff,

        Let me see if I understand: suppose we synchronize the position in the carousel with another SMIL timer
        (as in http://srufaculty.sru.edu/david.dailey/svg/newstuff/SMIL11.svg where activity is either started through SMIL or script)
        but one that withdraws and reassigns event handlers. Then would your question be equivalent to the question of whether or not we can assign and withdraw event handlers through SMIL. I don't know why z-index would enter, and I don't know what you mean by "painter's model".

        By the "selected" icon I assume you don't just mean highlighted visually -- since that is pretty easy, if I understand what you mean (the above example withdraws or extends visibility declaratively) but rather enabled to listen for some sort of event. I think Doug Schepers has some similar examples.

        If I'm following the question then, I would think either trying something like

        <g id="icon" onfocus="demonstrateFocus()">
        <animate attributeName="onfocus" values="demonstrateFocus()">;null" dur="0.5" begin="synchronize.begin" fill="freeze"/>
        </g>

        or

        <g id="icon">
        <set attributeName="onfocus" to="demonstrateFocus()">" begin="synchronize.begin" />
        </g>

        might do something like what you have in mind, though I rather doubt that the attributes "onclick" or "onfocus" or "onwhatever" are animateable.

        Does my thinking here have anything to do with the problem you're discussing? I hope so since it seems like an interesting problem. If "onclick" is not animateable, I suspect there is some gross real world reason that it isn't, cause it would seem like a nice thing to be able to do.

        David

        [Non-text portions of this message have been removed]
      • Jeff Schiller
        David, Painter s Model: http://www.w3.org/TR/SVG11/render.html#PaintersModel I m not sure, but I think you missed the key aspect here - think of the icons on a
        Message 3 of 17 , Sep 24, 2007
        View Source
        • 0 Attachment
          David,

          Painter's Model: http://www.w3.org/TR/SVG11/render.html#PaintersModel

          I'm not sure, but I think you missed the key aspect here - think of
          the icons on a "carousel" that we're looking at on a horizontal
          elevation. This problem has to do with rendering order more than
          highlight and event handlers (though that is another interesting topic).

          Let's say you have 3 icons on the carousel - as it spins, icon 1
          (which is to the left of center) and icon 3 (which is to the right)
          are behind icon 2 (which is in front and center). As the carousel
          spins clockwise, icon 3 moves to the center and in front (i.e. "on
          top") of the others, while icon 2 is now to the left of center and
          behind icon 3.

          Do you see what I mean by z-order? Because the rendering order and
          overlapping is defined by the order in which the elements appear in
          the DOM, it seems that you couldn't declaratively do the animation
          (you'd have to have script to rearrange the nodes as the icons rotate
          - probably using two halves of the carousel circle as separate
          rendering groups with nodes being popped and pushed appropriately).

          Anyway, I guess scripting this is not the end of the world, just
          interesting that it's a situation that cannot be easily handled by
          animation in SVG.

          Regards,
          Jeff

          --- In svg-developers@yahoogroups.com, "ddailey" <ddailey@...> wrote:
          >
          > Jeff Schiller wrote:
          >
          > >Think of some icons arranged on a "carousel", with an animation that
          > >would spin the carousel so that the closest icon to you is the
          > >"selected" icon. Is there any way to do this declaratively?
          >
          > >Seems like the z-order and painter's model poses a problem that
          > >requires scripting to fix, but I would love to be proven wrong...
          >
          > Hi Jeff,
          >
          > Let me see if I understand: suppose we synchronize the position in
          the carousel with another SMIL timer
          > (as in
          http://srufaculty.sru.edu/david.dailey/svg/newstuff/SMIL11.svg where
          activity is either started through SMIL or script)
          > but one that withdraws and reassigns event handlers. Then would your
          question be equivalent to the question of whether or not we can assign
          and withdraw event handlers through SMIL. I don't know why z-index
          would enter, and I don't know what you mean by "painter's model".
          >
          > By the "selected" icon I assume you don't just mean highlighted
          visually -- since that is pretty easy, if I understand what you mean
          (the above example withdraws or extends visibility declaratively) but
          rather enabled to listen for some sort of event. I think Doug Schepers
          has some similar examples.
          >
          > If I'm following the question then, I would think either trying
          something like
          >
          > <g id="icon" onfocus="demonstrateFocus()">
          > <animate attributeName="onfocus" values="demonstrateFocus()">;null"
          dur="0.5" begin="synchronize.begin" fill="freeze"/>
          > </g>
          >
          > or
          >
          > <g id="icon">
          > <set attributeName="onfocus" to="demonstrateFocus()">"
          begin="synchronize.begin" />
          > </g>
          >
          > might do something like what you have in mind, though I rather doubt
          that the attributes "onclick" or "onfocus" or "onwhatever" are
          animateable.
          >
          > Does my thinking here have anything to do with the problem you're
          discussing? I hope so since it seems like an interesting problem. If
          "onclick" is not animateable, I suspect there is some gross real world
          reason that it isn't, cause it would seem like a nice thing to be able
          to do.
          >
          > David
          >
          > [Non-text portions of this message have been removed]
          >
        • Erik Dahlström
          On Tue, 25 Sep 2007 05:17:49 +0200, Jeff Schiller ... Jeff, Have you tried a solution that uses elements for keeping the z-order the way you want it?
          Message 4 of 17 , Sep 25, 2007
          View Source
          • 0 Attachment
            On Tue, 25 Sep 2007 05:17:49 +0200, Jeff Schiller
            <jeff_schiller@...> wrote:

            > David,
            >
            > Painter's Model: http://www.w3.org/TR/SVG11/render.html#PaintersModel
            >
            > I'm not sure, but I think you missed the key aspect here - think of
            > the icons on a "carousel" that we're looking at on a horizontal
            > elevation. This problem has to do with rendering order more than
            > highlight and event handlers (though that is another interesting topic).
            >
            > Let's say you have 3 icons on the carousel - as it spins, icon 1
            > (which is to the left of center) and icon 3 (which is to the right)
            > are behind icon 2 (which is in front and center). As the carousel
            > spins clockwise, icon 3 moves to the center and in front (i.e. "on
            > top") of the others, while icon 2 is now to the left of center and
            > behind icon 3.
            >
            > Do you see what I mean by z-order? Because the rendering order and
            > overlapping is defined by the order in which the elements appear in
            > the DOM, it seems that you couldn't declaratively do the animation
            > (you'd have to have script to rearrange the nodes as the icons rotate
            > - probably using two halves of the carousel circle as separate
            > rendering groups with nodes being popped and pushed appropriately).

            Jeff,
            Have you tried a solution that uses <use> elements for keeping the z-order
            the way you want it?

            Simple example:
            <rect id="a">
            <set attributeName="xlink:href" to="#a" begin="mouseover"
            xlink:href="#top"/>
            </rect>
            <rect id="b">
            <set attributeName="xlink:href" to="#b" begin="mouseover"
            xlink:href="#top"/>
            </rect>
            <rect id="c">
            <set attributeName="xlink:href" to="#c" begin="mouseover"
            xlink:href="#top"/>
            </rect>
            <use id="top" xlink:href="#a"/>

            I have been trying to find good solutions to the z-order problem as well,
            moving elements around in the tree and expecting mouse events to cooperate
            is quite hard in my experience. That is, if I want something to move to
            front when I mouseover it, the only way I've found reliable is to use
            scripting, because the instant I move an element to the top I get another
            mouse event on whatever was under it (because moving it means take it out
            of the tree, then inserting it somewhere else), and that makes the element
            that I wanted to have focus lose it. So, I have to "block events" until
            everything is in place.

            Cheers
            /Erik

            --
            Using Opera's revolutionary e-mail client: http://www.opera.com/mail
          • "~:'' ありがとうございました
            Erik, your apt description reminds me of tuning draggable links that is scripting whether the user intends to drag or click. a problem not as yet resolved
            Message 5 of 17 , Sep 25, 2007
            View Source
            • 0 Attachment
              Erik,

              your apt description reminds me of tuning "draggable links"
              that is scripting whether the user intends to drag or click.
              a problem not as yet resolved afaik

              cheers

              Jonathan Chetwynd
              Accessibility Consultant on Media Literacy and the Internet



              On 25 Sep 2007, at 09:27, Erik Dahlström wrote:



              On Tue, 25 Sep 2007 05:17:49 +0200, Jeff Schiller
              <jeff_schiller@...> wrote:

              > David,
              >
              > Painter's Model: http://www.w3.org/TR/SVG11/render.html#PaintersModel
              >
              > I'm not sure, but I think you missed the key aspect here - think of
              > the icons on a "carousel" that we're looking at on a horizontal
              > elevation. This problem has to do with rendering order more than
              > highlight and event handlers (though that is another interesting
              > topic).
              >
              > Let's say you have 3 icons on the carousel - as it spins, icon 1
              > (which is to the left of center) and icon 3 (which is to the right)
              > are behind icon 2 (which is in front and center). As the carousel
              > spins clockwise, icon 3 moves to the center and in front (i.e. "on
              > top") of the others, while icon 2 is now to the left of center and
              > behind icon 3.
              >
              > Do you see what I mean by z-order? Because the rendering order and
              > overlapping is defined by the order in which the elements appear in
              > the DOM, it seems that you couldn't declaratively do the animation
              > (you'd have to have script to rearrange the nodes as the icons rotate
              > - probably using two halves of the carousel circle as separate
              > rendering groups with nodes being popped and pushed appropriately).

              Jeff,
              Have you tried a solution that uses <use> elements for keeping the z-
              order
              the way you want it?

              Simple example:
              <rect id="a">
              <set attributeName="xlink:href" to="#a" begin="mouseover"
              xlink:href="#top"/>
              </rect>
              <rect id="b">
              <set attributeName="xlink:href" to="#b" begin="mouseover"
              xlink:href="#top"/>
              </rect>
              <rect id="c">
              <set attributeName="xlink:href" to="#c" begin="mouseover"
              xlink:href="#top"/>
              </rect>
              <use id="top" xlink:href="#a"/>

              I have been trying to find good solutions to the z-order problem as
              well,
              moving elements around in the tree and expecting mouse events to
              cooperate
              is quite hard in my experience. That is, if I want something to move to
              front when I mouseover it, the only way I've found reliable is to use
              scripting, because the instant I move an element to the top I get
              another
              mouse event on whatever was under it (because moving it means take it
              out
              of the tree, then inserting it somewhere else), and that makes the
              element
              that I wanted to have focus lose it. So, I have to "block events" until
              everything is in place.

              Cheers
              /Erik

              --
              Using Opera's revolutionary e-mail client: http://www.opera.com/mail


              -----
              To unsubscribe send a message to: svg-developers-
              unsubscribe@yahoogroups.com
              -or-
              visit http://groups.yahoo.com/group/svg-developers and click "edit my
              membership"
              ----
              Yahoo! Groups Links
            • Jeff Schiller
              The approach is a real fascinating example, but I don t think it would work in my case, since things have to smoothly animate as the icons spin around. I
              Message 6 of 17 , Sep 25, 2007
              View Source
              • 0 Attachment
                The <use> approach is a real fascinating example, but I don't think it
                would work in my case, since things have to smoothly animate as the
                icons spin around.

                I think I'll put together a scripted demo anyway, so that I can more
                clearly explain the issue.

                Jeff

                --- In svg-developers@yahoogroups.com, Erik Dahlström <ed@...> wrote:
                >
                >
                >
                > On Tue, 25 Sep 2007 05:17:49 +0200, Jeff Schiller
                > <jeff_schiller@...> wrote:
                >
                > > David,
                > >
                > > Painter's Model: http://www.w3.org/TR/SVG11/render.html#PaintersModel
                > >
                > > I'm not sure, but I think you missed the key aspect here - think of
                > > the icons on a "carousel" that we're looking at on a horizontal
                > > elevation. This problem has to do with rendering order more than
                > > highlight and event handlers (though that is another interesting
                topic).
                > >
                > > Let's say you have 3 icons on the carousel - as it spins, icon 1
                > > (which is to the left of center) and icon 3 (which is to the right)
                > > are behind icon 2 (which is in front and center). As the carousel
                > > spins clockwise, icon 3 moves to the center and in front (i.e. "on
                > > top") of the others, while icon 2 is now to the left of center and
                > > behind icon 3.
                > >
                > > Do you see what I mean by z-order? Because the rendering order and
                > > overlapping is defined by the order in which the elements appear in
                > > the DOM, it seems that you couldn't declaratively do the animation
                > > (you'd have to have script to rearrange the nodes as the icons rotate
                > > - probably using two halves of the carousel circle as separate
                > > rendering groups with nodes being popped and pushed appropriately).
                >
                > Jeff,
                > Have you tried a solution that uses <use> elements for keeping the
                z-order
                > the way you want it?
                >
                > Simple example:
                > <rect id="a">
                > <set attributeName="xlink:href" to="#a" begin="mouseover"
                > xlink:href="#top"/>
                > </rect>
                > <rect id="b">
                > <set attributeName="xlink:href" to="#b" begin="mouseover"
                > xlink:href="#top"/>
                > </rect>
                > <rect id="c">
                > <set attributeName="xlink:href" to="#c" begin="mouseover"
                > xlink:href="#top"/>
                > </rect>
                > <use id="top" xlink:href="#a"/>
                >
                > I have been trying to find good solutions to the z-order problem as
                well,
                > moving elements around in the tree and expecting mouse events to
                cooperate
                > is quite hard in my experience. That is, if I want something to move
                to
                > front when I mouseover it, the only way I've found reliable is to use
                > scripting, because the instant I move an element to the top I get
                another
                > mouse event on whatever was under it (because moving it means take
                it out
                > of the tree, then inserting it somewhere else), and that makes the
                element
                > that I wanted to have focus lose it. So, I have to "block events"
                until
                > everything is in place.
                >
                > Cheers
                > /Erik
                >
                > --
                > Using Opera's revolutionary e-mail client: http://www.opera.com/mail
                >
              • David Dailey
                Jeff, After your explanation, I now know what you are talking about. I like Erik s suggestion -- it is quite clever, if it would work in your situation.
                Message 7 of 17 , Sep 25, 2007
                View Source
                • 0 Attachment
                  Jeff,

                  After your explanation, I now know what you are
                  talking about. I like Erik's <use> suggestion --
                  it is quite clever, if it would work in your situation.

                  Another clunky solution that comes to mind would
                  be to have two versions of each object -- one
                  lower and one higher in the stacking order and
                  then to animate the visibility's of these to
                  simulate the changing of z-index. When an object
                  is supposed to look like it is behind make its higher instance invisible.

                  I've done something like that with opacity levels and morphing in the past.

                  cheers,
                  David

                  At 07:27 AM 9/25/2007, you wrote:

                  >The <use> approach is a real fascinating example, but I don't think it
                  >would work in my case, since things have to smoothly animate as the
                  >icons spin around.
                  >
                  >I think I'll put together a scripted demo anyway, so that I can more
                  >clearly explain the issue.
                  >
                  >Jeff
                  >
                  >--- In
                  ><mailto:svg-developers%40yahoogroups.com>svg-developers@yahoogroups.com,
                  >Erik Dahlström <ed@...> wrote:
                  > >
                  > >
                  > >
                  > > On Tue, 25 Sep 2007 05:17:49 +0200, Jeff Schiller
                  > > <jeff_schiller@...> wrote:
                  > >
                  > > > David,
                  > > >
                  > > > Painter's Model:
                  > <http://www.w3.org/TR/SVG11/render.html#PaintersModel>http://www.w3.org/TR/SVG11/render.html#PaintersModel
                  > > >
                  > > > I'm not sure, but I think you missed the key aspect here - think of
                  > > > the icons on a "carousel" that we're looking at on a horizontal
                  > > > elevation. This problem has to do with rendering order more than
                  > > > highlight and event handlers (though that is another interesting
                  >topic).
                  > > >
                  > > > Let's say you have 3 icons on the carousel - as it spins, icon 1
                  > > > (which is to the left of center) and icon 3 (which is to the right)
                  > > > are behind icon 2 (which is in front and center). As the carousel
                  > > > spins clockwise, icon 3 moves to the center and in front (i.e. "on
                  > > > top") of the others, while icon 2 is now to the left of center and
                  > > > behind icon 3.
                  > > >
                  > > > Do you see what I mean by z-order? Because the rendering order and
                  > > > overlapping is defined by the order in which the elements appear in
                  > > > the DOM, it seems that you couldn't declaratively do the animation
                  > > > (you'd have to have script to rearrange the nodes as the icons rotate
                  > > > - probably using two halves of the carousel circle as separate
                  > > > rendering groups with nodes being popped and pushed appropriately).
                  > >
                  > > Jeff,
                  > > Have you tried a solution that uses <use> elements for keeping the
                  >z-order
                  > > the way you want it?
                  > >
                  > > Simple example:
                  > > <rect id="a">
                  > > <set attributeName="xlink:href" to="#a" begin="mouseover"
                  > > xlink:href="#top"/>
                  > > </rect>
                  > > <rect id="b">
                  > > <set attributeName="xlink:href" to="#b" begin="mouseover"
                  > > xlink:href="#top"/>
                  > > </rect>
                  > > <rect id="c">
                  > > <set attributeName="xlink:href" to="#c" begin="mouseover"
                  > > xlink:href="#top"/>
                  > > </rect>
                  > > <use id="top" xlink:href="#a"/>
                  > >
                  > > I have been trying to find good solutions to the z-order problem as
                  >well,
                  > > moving elements around in the tree and expecting mouse events to
                  >cooperate
                  > > is quite hard in my experience. That is, if I want something to move
                  >to
                  > > front when I mouseover it, the only way I've found reliable is to use
                  > > scripting, because the instant I move an element to the top I get
                  >another
                  > > mouse event on whatever was under it (because moving it means take
                  >it out
                  > > of the tree, then inserting it somewhere else), and that makes the
                  >element
                  > > that I wanted to have focus lose it. So, I have to "block events"
                  >until
                  > > everything is in place.
                  > >
                  > > Cheers
                  > > /Erik
                  > >
                  > > --
                  > > Using Opera's revolutionary e-mail client:
                  > <http://www.opera.com/mail>http://www.opera.com/mail
                  > >
                  >
                  >
                • brucerindahl
                  ... Are you thinking of something like this?? http://www.lrcwe-data.com/tmp/test.svg Enjoy! Bruce
                  Message 8 of 17 , Sep 25, 2007
                  View Source
                  • 0 Attachment
                    --- In svg-developers@yahoogroups.com, "Jeff Schiller"
                    <jeff_schiller@...> wrote:
                    >
                    > Think of some icons arranged on a "carousel", with an animation that
                    > would spin the carousel so that the closest icon to you is the
                    > "selected" icon. Is there any way to do this declaratively?
                    >
                    > Seems like the z-order and painter's model poses a problem that
                    > requires scripting to fix, but I would love to be proven wrong...
                    >

                    Are you thinking of something like this??
                    http://www.lrcwe-data.com/tmp/test.svg

                    Enjoy!
                    Bruce
                  • brucerindahl
                    ... And if you really want to ignite your CPU cooling fan: http://www.lrcwe-data.com/tmp/test2.svg
                    Message 9 of 17 , Sep 25, 2007
                    View Source
                    • 0 Attachment
                      --- In svg-developers@yahoogroups.com, "brucerindahl" <rindahl@...> wrote:

                      And if you really want to ignite your CPU cooling fan:

                      http://www.lrcwe-data.com/tmp/test2.svg
                    • Jeff Schiller
                      ... Bruce - that s very clever! Thank you!
                      Message 10 of 17 , Sep 25, 2007
                      View Source
                      • 0 Attachment
                        --- In svg-developers@yahoogroups.com, "brucerindahl" <rindahl@...> wrote:
                        >
                        > And if you really want to ignite your CPU cooling fan:
                        >
                        > http://www.lrcwe-data.com/tmp/test2.svg
                        >

                        Bruce - that's very clever! Thank you!
                      • brucerindahl
                        ... While I did it on my own in reviewing the comments it is the same method as suggested by David Dailey. I wouldn t call it clunky though. Bruce
                        Message 11 of 17 , Sep 25, 2007
                        View Source
                        • 0 Attachment
                          --- In svg-developers@yahoogroups.com, "Jeff Schiller"
                          <jeff_schiller@...> wrote:
                          >
                          > --- In svg-developers@yahoogroups.com, "brucerindahl" <rindahl@> wrote:
                          > >
                          > > And if you really want to ignite your CPU cooling fan:
                          > >
                          > > http://www.lrcwe-data.com/tmp/test2.svg
                          > >
                          >
                          > Bruce - that's very clever! Thank you!
                          >
                          While I did it on my own in reviewing the comments it is the same
                          method as suggested by David Dailey. I wouldn't call it clunky though.
                          Bruce
                        • "~:'' ありがとうございました
                          Bruce, thats a great demo... ~: one of the issues I m finding with animation is the timing going off when multiple things are happening. it ll be interesting
                          Message 12 of 17 , Sep 25, 2007
                          View Source
                          • 0 Attachment
                            Bruce,

                            thats a great demo... ~:"

                            one of the issues I'm finding with animation is the timing going off
                            when multiple things are happening.
                            it'll be interesting to see how these pan out in worked out demos

                            regards

                            Jonathan Chetwynd
                            Accessibility Consultant on Media Literacy and the Internet



                            On 25 Sep 2007, at 21:48, brucerindahl wrote:

                            --- In svg-developers@yahoogroups.com, "brucerindahl" <rindahl@...>
                            wrote:

                            And if you really want to ignite your CPU cooling fan:

                            http://www.lrcwe-data.com/tmp/test2.svg
                          • ddailey
                            brucerindahl wrote: http://www.lrcwe-data.com/tmp/test2.svg ... After seeing how elegantly you coded it, I wouldn t call it clunky either. cheers,
                            Message 13 of 17 , Sep 26, 2007
                            View Source
                            • 0 Attachment
                              "brucerindahl" <rindahl@> wrote:
                              http://www.lrcwe-data.com/tmp/test2.svg
                              > I wouldn't call it clunky though.

                              After seeing how elegantly you coded it, I wouldn't call it clunky either.

                              cheers,
                              David



                              [Non-text portions of this message have been removed]
                            • brucerindahl
                              ... either. ... David - Thanks! Now I know this horse is dead but I just can t stop beating it. ;) I have updated the animations. The top horizontal motion
                              Message 14 of 17 , Sep 27, 2007
                              View Source
                              • 0 Attachment
                                --- In svg-developers@yahoogroups.com, "ddailey" <ddailey@...> wrote:
                                >
                                > "brucerindahl" <rindahl@> wrote:
                                > http://www.lrcwe-data.com/tmp/test2.svg
                                > > I wouldn't call it clunky though.
                                >
                                > After seeing how elegantly you coded it, I wouldn't call it clunky
                                either.
                                >
                                > cheers,
                                > David
                                >
                                >
                                >
                                > [Non-text portions of this message have been removed]
                                >
                                David - Thanks!
                                Now I know this horse is dead but I just can't stop beating it. ;)
                                I have updated the animations. The top horizontal motion didn't
                                exactly match the rotation of the circles below. I found this great
                                site on SVG animation:
                                http://olaf.kilu.de/svgtest/index.php?in=animatt
                                and it gave the exact parameters for moving the top circles. Jeff- if
                                you need the correct parameters see this reference or my updated file.
                                I changed the fill-opacity animation to animating the display
                                attribute between none and inline. The performance seems better.
                                Batik is the best followed closely by ASV and then Opera 9.5 (these
                                are subjective or course).
                                Jonathan - you are right, as you add additional layers of animation
                                the performance quickly suffers. I wonder if the solution is to start
                                using direct graphic hardware calls.

                                The final version is at:
                                http://www.lrcwe-data.com/tmp/test3.svg

                                Overall it was instructive - I haven't done much animation before.
                                The next fun one would be accurate display of elliptical motion -
                                where the velocity is directly related to the distance from the center
                                of attraction - think planetary motion. It is still amazing what you
                                can do with the standard SVG spec.

                                Bruce
                              • Dailey, David P.
                                ... Agreed. I fooled around with something similar to this a while back see http://srufaculty.sru.edu/david.dailey/svg/newstuff/SMIL5.svg a series of allied
                                Message 15 of 17 , Sep 28, 2007
                                View Source
                                • 0 Attachment
                                  Bruce wrote:

                                  >The next fun one would be accurate display of elliptical motion -
                                  >where the velocity is directly related to the distance from the center
                                  >of attraction - think planetary motion. It is still amazing what you
                                  >can do with the standard SVG spec.


                                  Agreed. I fooled around with something similar to this a while back

                                  see http://srufaculty.sru.edu/david.dailey/svg/newstuff/SMIL5.svg

                                  a series of allied experiments can be found in the SMIL section at
                                  http://srufaculty.sru.edu/david.dailey/svg/newstuff/Newlist.htm

                                  cheers,
                                  David


                                  [Non-text portions of this message have been removed]
                                • bruce
                                  How s this for picking up a 2.5 year old thread... In honor of Minefield getting animateMotion working (Yeah Daniel!!) I reworked this to use pure
                                  Message 16 of 17 , May 7, 2010
                                  View Source
                                  • 0 Attachment
                                    How's this for picking up a 2.5 year old thread...

                                    In honor of Minefield getting animateMotion working (Yeah Daniel!!)
                                    I reworked this to use pure animateMotion commands to control movement. The top linear motion is simply two overlaping circular motions going in opposite directions. The vertical factors cancel out while the horizontal motions amplify. Minefield handles it beautifully.

                                    There is a small bug in Minefield in one of the display animations that I will pass on to him.

                                    The scary thing about this is my suggestion about direct graphical hardware calls over 2 years ago. (I'm a PC and IE9 was my idea.. ;)

                                    Bruce

                                    Here is the final code (the old links are broken):

                                    <?xml version="1.0" standalone="no"?>
                                    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
                                    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
                                    <!ENTITY dur "9s">
                                    <!ENTITY rvalues "10;10.4;10.8;11.2;11.6;11.2;10.8;10.4;10.0;9.6;9.2;8.8;8.4;8.8;9.2;9.6;10">
                                    <!ENTITY keyTimes "0;0.0625;0.125;0.1875;0.25;0.3125;0.375;0.4375;0.5;0.5625;0.625;0.6875;0.75;0.8125;0.875;0.9375;1">
                                    <!ENTITY smallCirCCW "M 0 0 A 12.5 12.5 0 1 1 25 0 A 12.5 12.5 0 1 1 0 0">
                                    <!ENTITY smallCirCW "M 0 0 A 12.5 12.5 0 1 0 25 0 A 12.5 12.5 0 1 0 0 0">
                                    <!ENTITY largeCirCW "M 0 0 A 25 25 0 1 0 50 0 A 25 25 0 1 0 0 0">
                                    <!ENTITY calcMode "paced">
                                    ]>
                                    <svg width="100%" height="100%" viewBox="0 0 100 150"
                                    xmlns:xlink="http://www.w3.org/1999/xlink"
                                    xmlns="http://www.w3.org/2000/svg">

                                    <g>
                                    <animateMotion begin="0s" dur="&dur;" path="&smallCirCW;" repeatCount="indefinite" />
                                    <circle id="b1" cx="25" cy="30" r="10" fill="blue" >
                                    <animateMotion begin="0s" dur="&dur;" path="&smallCirCCW;" repeatCount="indefinite" />
                                    <animate attributeName="r" begin="0s" dur="&dur;"
                                    values="&rvalues;" keyTimes="&keyTimes;" calcMode="&calcMode;" repeatCount="indefinite" />
                                    <animate attributeName="display" values="none;inline;inline" begin="0s" keyTimes="0;0.5;1" calcMode="discrete" dur="&dur;" repeatCount="indefinite" />
                                    </circle>
                                    </g>

                                    <g>
                                    <animateMotion begin="3s" dur="&dur;" path="&smallCirCW;" repeatCount="indefinite" />
                                    <circle id="b1" cx="25" cy="30" r="10" fill="red" >
                                    <animateMotion begin="3s" dur="&dur;" path="&smallCirCCW;" repeatCount="indefinite" />
                                    <animate attributeName="r" begin="3s" dur="&dur;"
                                    values="&rvalues;" keyTimes="&keyTimes;" calcMode="&calcMode;" repeatCount="indefinite" />
                                    <animate attributeName="display" values="none;inline;inline" begin="3s" keyTimes="0;0.5;1" calcMode="discrete" dur="&dur;" repeatCount="indefinite" />
                                    </circle>
                                    </g>

                                    <g>
                                    <animateMotion begin="6s" dur="&dur;" path="&smallCirCW;" repeatCount="indefinite" />
                                    <circle id="b1" cx="25" cy="30" r="10" fill="green" >
                                    <animateMotion begin="6s" dur="&dur;" path="&smallCirCCW;" repeatCount="indefinite" />
                                    <animate attributeName="r" begin="6s" dur="&dur;"
                                    values="&rvalues;" keyTimes="&keyTimes;" calcMode="&calcMode;" repeatCount="indefinite" />
                                    </circle>
                                    </g>

                                    <g>
                                    <animateMotion begin="3s" dur="&dur;" path="&smallCirCW;" repeatCount="indefinite" />
                                    <circle id="b1" cx="25" cy="30" r="10" fill="red" >
                                    <animateMotion begin="3s" dur="&dur;" path="&smallCirCCW;" repeatCount="indefinite" />
                                    <animate attributeName="r" begin="3s" dur="&dur;"
                                    values="&rvalues;" keyTimes="&keyTimes;" calcMode="&calcMode;" repeatCount="indefinite" />
                                    <animate attributeName="display" values="inline;none;none" begin="3s" keyTimes="0;0.5;1" calcMode="discrete" dur="&dur;" repeatCount="indefinite" />
                                    </circle>
                                    </g>

                                    <g>
                                    <animateMotion begin="0s" dur="&dur;" path="&smallCirCW;" repeatCount="indefinite" />
                                    <circle id="b1" cx="25" cy="30" r="10" fill="blue" >
                                    <animateMotion begin="0s" dur="&dur;" path="&smallCirCCW;" repeatCount="indefinite" />
                                    <animate attributeName="r" begin="0s" dur="&dur;"
                                    values="&rvalues;" keyTimes="&keyTimes;" calcMode="&calcMode;" repeatCount="indefinite" />
                                    <animate attributeName="display" values="inline;none;none" begin="0s" keyTimes="0;0.5;1" calcMode="discrete" dur="&dur;" repeatCount="indefinite" />
                                    </circle>
                                    </g>

                                    <circle cx="25" cy="100" r="10" fill="green" >
                                    <animateMotion begin="6s" dur="&dur;" path="M 0 0 A 25 25 0 1 0 50 0 A 25 25 0 1 0 0 0" repeatCount="indefinite" />
                                    </circle>
                                    <circle cx="25" cy="100" r="10" fill="red" >
                                    <animateMotion begin="3s" dur="&dur;" path="M 0 0 A 25 25 0 1 0 50 0 A 25 25 0 1 0 0 0" repeatCount="indefinite" />
                                    </circle>
                                    <circle cx="25" cy="100" r="10" fill="blue" >
                                    <animateMotion begin="0s" dur="&dur;" path="M 0 0 A 25 25 0 1 0 50 0 A 25 25 0 1 0 0 0" repeatCount="indefinite" />
                                    </circle>
                                    </svg>
                                  • Alex Wykel
                                    I like these animations, they run on my cellphone and I can set them as a fancy animated wall paper, think I am going to invest some effort in learning this
                                    Message 17 of 17 , May 17, 2010
                                    View Source
                                    • 0 Attachment
                                      I like these animations, they run on my cellphone and I can set them as a fancy animated wall paper, think I am going to invest some effort in learning this tenique.

                                      thanks,
                                      Alex W.

                                      Regarsds,
                                      Alexanader Wykel
                                      ----------
                                      Sent from AT&T Wireless using Yahoo! Mail

                                      ------Original Message------
                                      From: bruce <bruce.rindahl@...>
                                      To: <svg-developers@yahoogroups.com>
                                      Date: Friday, May 7, 2010 11:02:59 PM GMT-0000
                                      Subject: [svg-developers] Re: Carousel Animation - any way declaratively?

                                      How's this for picking up a 2.5 year old thread...

                                      In honor of Minefield getting animateMotion working (Yeah Daniel!!)
                                      I reworked this to use pure animateMotion commands to control movement. The top linear motion is simply two overlaping circular motions going in opposite directions. The vertical factors cancel out while the horizontal motions amplify. Minefield handles it beautifully.

                                      There is a small bug in Minefield in one of the display animations that I will pass on to him.

                                      The scary thing about this is my suggestion about direct graphical hardware calls over 2 years ago. (I'm a PC and IE9 was my idea.. ;)

                                      Bruce

                                      Here is the final code (the old links are broken):

                                      <?xml version="1.0" standalone="no"?>
                                      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
                                      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
                                      <!ENTITY dur "9s">
                                      <!ENTITY rvalues "10;10.4;10.8;11.2;11.6;11.2;10.8;10.4;10.0;9.6;9.2;8.8;8.4;8.8;9.2;9.6;10">
                                      <!ENTITY keyTimes "0;0.0625;0.125;0.1875;0.25;0.3125;0.375;0.4375;0.5;0.5625;0.625;0.6875;0.75;0.8125;0.875;0.9375;1">
                                      <!ENTITY smallCirCCW "M 0 0 A 12.5 12.5 0 1 1 25 0 A 12.5 12.5 0 1 1 0 0">
                                      <!ENTITY smallCirCW "M 0 0 A 12.5 12.5 0 1 0 25 0 A 12.5 12.5 0 1 0 0 0">
                                      <!ENTITY largeCirCW "M 0 0 A 25 25 0 1 0 50 0 A 25 25 0 1 0 0 0">
                                      <!ENTITY calcMode "paced">
                                      ]>
                                      <svg width="100%" height="100%" viewBox="0 0 100 150"
                                      xmlns:xlink="http://www.w3.org/1999/xlink"
                                      xmlns="http://www.w3.org/2000/svg">

                                      <g>
                                      <animateMotion begin="0s" dur="&dur;" path="&smallCirCW;" repeatCount="indefinite" />
                                      <circle id="b1" cx="25" cy="30" r="10" fill="blue" >
                                      <animateMotion begin="0s" dur="&dur;" path="&smallCirCCW;" repeatCount="indefinite" />
                                      <animate attributeName="r" begin="0s" dur="&dur;"
                                      values="&rvalues;" keyTimes="&keyTimes;" calcMode="&calcMode;" repeatCount="indefinite" />
                                      <animate attributeName="display" values="none;inline;inline" begin="0s" keyTimes="0;0.5;1" calcMode="discrete" dur="&dur;" repeatCount="indefinite" />
                                      </circle>
                                      </g>

                                      <g>
                                      <animateMotion begin="3s" dur="&dur;" path="&smallCirCW;" repeatCount="indefinite" />
                                      <circle id="b1" cx="25" cy="30" r="10" fill="red" >
                                      <animateMotion begin="3s" dur="&dur;" path="&smallCirCCW;" repeatCount="indefinite" />
                                      <animate attributeName="r" begin="3s" dur="&dur;"
                                      values="&rvalues;" keyTimes="&keyTimes;" calcMode="&calcMode;" repeatCount="indefinite" />
                                      <animate attributeName="display" values="none;inline;inline" begin="3s" keyTimes="0;0.5;1" calcMode="discrete" dur="&dur;" repeatCount="indefinite" />
                                      </circle>
                                      </g>

                                      <g>
                                      <animateMotion begin="6s" dur="&dur;" path="&smallCirCW;" repeatCount="indefinite" />
                                      <circle id="b1" cx="25" cy="30" r="10" fill="green" >
                                      <animateMotion begin="6s" dur="&dur;" path="&smallCirCCW;" repeatCount="indefinite" />
                                      <animate attributeName="r" begin="6s" dur="&dur;"
                                      values="&rvalues;" keyTimes="&keyTimes;" calcMode="&calcMode;" repeatCount="indefinite" />
                                      </circle>
                                      </g>

                                      <g>
                                      <animateMotion begin="3s" dur="&dur;" path="&smallCirCW;" repeatCount="indefinite" />
                                      <circle id="b1" cx="25" cy="30" r="10" fill="red" >
                                      <animateMotion begin="3s" dur="&dur;" path="&smallCirCCW;" repeatCount="indefinite" />
                                      <animate attributeName="r" begin="3s" dur="&dur;"
                                      values="&rvalues;" keyTimes="&keyTimes;" calcMode="&calcMode;" repeatCount="indefinite" />
                                      <animate attributeName="display" values="inline;none;none" begin="3s" keyTimes="0;0.5;1" calcMode="discrete" dur="&dur;" repeatCount="indefinite" />
                                      </circle>
                                      </g>

                                      <g>
                                      <animateMotion begin="0s" dur="&dur;" path="&smallCirCW;" repeatCount="indefinite" />
                                      <circle id="b1" cx="25" cy="30" r="10" fill="blue" >
                                      <animateMotion begin="0s" dur="&dur;" path="&smallCirCCW;" repeatCount="indefinite" />
                                      <animate attributeName="r" begin="0s" dur="&dur;"
                                      values="&rvalues;" keyTimes="&keyTimes;" calcMode="&calcMode;" repeatCount="indefinite" />
                                      <animate attributeName="display" values="inline;none;none" begin="0s" keyTimes="0;0.5;1" calcMode="discrete" dur="&dur;" repeatCount="indefinite" />
                                      </circle>
                                      </g>

                                      <circle cx="25" cy="100" r="10" fill="green" >
                                      <animateMotion begin="6s" dur="&dur;" path="M 0 0 A 25 25 0 1 0 50 0 A 25 25 0 1 0 0 0" repeatCount="indefinite" />
                                      </circle>
                                      <circle cx="25" cy="100" r="10" fill="red" >
                                      <animateMotion begin="3s" dur="&dur;" path="M 0 0 A 25 25 0 1 0 50 0 A 25 25 0 1 0 0 0" repeatCount="indefinite" />
                                      </circle>
                                      <circle cx="25" cy="100" r="10" fill="blue" >
                                      <animateMotion begin="0s" dur="&dur;" path="M 0 0 A 25 25 0 1 0 50 0 A 25 25 0 1 0 0 0" repeatCount="indefinite" />
                                      </circle>
                                      </svg>
                                    Your message has been successfully submitted and would be delivered to recipients shortly.