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

Interesting read about scriptless animation

Expand Messages
  • David Dailey
    http://www.ibm.com/developerworks/web/library/x-matters42/index.html cheers D [Non-text portions of this message have been removed]
    Message 1 of 7 , Jan 2, 2013
    • 0 Attachment
      http://www.ibm.com/developerworks/web/library/x-matters42/index.html



      cheers

      D



      [Non-text portions of this message have been removed]
    • 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 2 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 3 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 4 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 5 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 6 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 7 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.