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

RE: [svg-developers] Re: Interesting read about scriptless animation

Expand Messages
  • David Dailey
    Hi Joe, Your examples didn t seem to make it through, so they may be needed for me to see what you mean. Usually when I want something to blink I do something
    Message 1 of 7 , Jan 3, 2013
      Hi Joe,



      Your examples didn't seem to make it through, so they may be needed for me
      to see what you mean.



      Usually when I want something to blink I do something like

      <animate attributeName="opacity" values="0;1;0" ./> or use a collection of
      sets as in the bottom illustration at

      http://cs.sru.edu/~ddailey/svg/2011/SMIL.html



      It seems like rotate is more naturally cyclic than translate, so I don't
      think I'm following the distinction (probably since I can't see the
      examples).



      I find it quite intriguing to solve problems with these approaches (whether
      or not "declarative" in the proper sense of "declarative programming")



      Cheers

      David



      From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
      On Behalf Of Joe Doll
      Sent: Thursday, January 03, 2013 3:30 PM
      To: svg-developers@yahoogroups.com
      Subject: [svg-developers] Re: Interesting read about scriptless animation





      Hi David,

      I have noticed that when I code in SMIL that I have to break the tags
      into 2 categories, depending on whether they will cycle. By that I mean,
      rotate, skew, translate, and scale will cycle, but all other SMIL tags
      will only cycle if they reference a tag that cycles. For example, if you
      try to use a set attribute on opacity to blink a light, the light will
      not blink unless you reference it to a tag that will cycle such as scale
      ( won't cycle). Is this by intent? If it is, then I wouldn't say
      that SMIL passes as a declarative language. You could call the animation
      tags declarative, or maybe you could call the other tags a declarative
      markup.

      For example, this will not blink.







      But, this will blink.
































      Best Regards,
      Joe





      [Non-text portions of this message have been removed]
    • Joe Doll
      Hi David, I was only using the blink example to show that the animation tags will begin and end in a cycle of their own, but the set tags (as in setting CSS)
      Message 2 of 7 , Jan 5, 2013
        Hi David,

        I was only using the blink example to show that the animation tags will
        begin and end in a cycle of their own, but the "set" tags (as in setting
        CSS) will not, even though they have "begin", "end", and "dur". The
        "set" tags will cycle if you reference them to an animation tag. The
        code explained it much better, but something filtered it out. Does
        anyone know how to submit code on this forum? The code is SVG so it has
        markup tags.

        Joe
      • Joe Doll
        Hi David, I think if I use svg tags that the code will get through the E-mail filter, so I will try again with svg tags. This will not blink,
        Message 3 of 7 , Jan 5, 2013
          Hi David,

          I think if I use svg tags that the code will get through the E-mail
          filter, so I will try again with svg tags.

          This will not blink,

          <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          version="1.0"
          width="744"
          height="200"
          id="svg_anm_atb_ctrl"
          >


          <set attributeName="opacity" id="sa_g2_0_f0" to="0" dur="6s"
          begin="0s; sa_g2_0_f2.end"/>

          <set attributeName="opacity" id="sa_g2_0_f2" to="1"
          begin="6s; sa_g2_0_f0.end" dur="6s"/>
          </svg>

          I guess because it only uses the "Set" tag.

          This will blink,

          <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          version="1.0"
          width="744"
          height="200"
          id="svg_anm_atb_ctrl"
          >

          <set attributeName="opacity" id="sa_g2_0_f0" to="0" dur="6s"
          begin="0s; scl_g2_0_f3.end"/>

          <set attributeName="opacity" id="sa_g2_0_f2" to="1"
          begin="6s; scl_g2_0_f3.end+6s" dur="6s"/>

          <g id="scl_g2_0" parnt_nod="g2_0">

          <use x="0" y="0" id="us_g2_0" width="1000" height="1000"
          xlink:href="#g2_sprt"/>

          <animateTransform attributeName="transform" attributeType="XML"
          type="scale"
          fill="remove" repeatCount="1"
          begin="0s; scl_g2_0_f3.end" dur="6s" id="scl_g2_0_f0"
          from="0.6" to="0.15"/>

          <animateTransform attributeName="transform" attributeType="XML"
          type="scale"
          fill="remove" repeatCount="1"
          begin="6s; scl_g2_0_f3.end+6s" dur="3s" id="scl_g2_0_f2"
          bgn_scl_nmbr="0.15"
          from="0.15" to="0.3" />

          <animateTransform attributeName="transform" attributeType="XML"
          type="scale"
          fill="remove" repeatCount="1" begin="9s; scl_g2_0_f2.end" dur="3s"
          id="scl_g2_0_f3" from="0.3" to="0.6" />

          </g>
          </svg>

          because it references the "set" tags to the "animateTransform" tags.

          In most languages, the creators make an attempt to be consistent with
          how the language functions. In SVG, we have the same attributes working
          differently depending on the owner tag. If "begin" and "end" work
          differently in "animateTransform" than in "set", then that will be
          confusing. It would be better to make them work the same or call them
          something else.

          Best Regards,
          Joe
        • Ken Stacey
          Hi Joe, Your first example doesn t blink because there is no content in the svg. If you add a rect to the example, the rect blinks. Your second example blinks
          Message 4 of 7 , Jan 7, 2013
            Hi Joe,

            Your first example doesn't blink because there is no content in the svg.
            If you add a rect to the example, the rect blinks.

            Your second example blinks because there is content to be rendered
            (#g2_sprt).

            begin and end work the same on all animation elements.

            (I get these messages in digest form and the svg tags are _not_ filtered
            out. I notice that they are filtered in the browser view. Must be a new
            feature)

            Ken
          • Joe Doll
            Hi Ken, I guess you saw some of the code. I only intended to put a snippet of the code in to demonstrate the problem. I guess I wasn t consistent between the
            Message 5 of 7 , Jan 8, 2013
              Hi Ken,

              I guess you saw some of the code. I only intended to put a snippet of
              the code in to demonstrate the problem. I guess I wasn't consistent
              between the two snippets. In any event, I have never seen "Set" tags
              cycle (in this case blink) because the "Begin", "End", and "Dur"
              attributes in a "Set" tag won't do that. On the other hand, the
              "animateTransform" tag will cycle with exactly the same "Begin", "End",
              and "Dur" attributes. My comment is that the same attributes in the
              "Set" and "animateTransform" tags should be made consistent or the
              attributes should be named something different. It would be less confusing.

              The "Set" tags with the "Begin", "End", and "Dur" attributes will cycle
              if they reference an "animateTransform" tag, so I know the attributes
              are somewhat functional.

              Best Regards,
              Joe
            Your message has been successfully submitted and would be delivered to recipients shortly.