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

Re: Interesting read about scriptless animation

Expand Messages
  • Joe Doll
    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,
    Message 1 of 7 , Jan 3, 2013
    • 0 Attachment
      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
      (<set> 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.

      <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"/>

      But, this will blink.

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


      Best Regards,
      Joe
    • 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 2 of 7 , Jan 3, 2013
      • 0 Attachment
        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 3 of 7 , Jan 5, 2013
        • 0 Attachment
          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 4 of 7 , Jan 5, 2013
          • 0 Attachment
            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 5 of 7 , Jan 7, 2013
            • 0 Attachment
              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 6 of 7 , Jan 8, 2013
              • 0 Attachment
                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.