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

Re: Interesting read about scriptless animation

Expand Messages
  • 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 1 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 2 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 3 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 4 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.