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

Re: [svg-developers] Svg Card Flip Animation

Expand Messages
  • ddailey
    Take a look at http://srufaculty.sru.edu/david.dailey/svg/MatrixTransform.svg it is working in Opera, Safari, FF, and IE (at least the versions I have loaded)
    Message 1 of 7 , Oct 26, 2007
    • 0 Attachment
      Take a look at http://srufaculty.sru.edu/david.dailey/svg/MatrixTransform.svg

      it is working in Opera, Safari, FF, and IE (at least the versions I have loaded)

      dpd
      ----- Original Message -----
      From: Sam
      To: svg-developers@yahoogroups.com
      Sent: Friday, October 26, 2007 7:00 AM
      Subject: [svg-developers] Svg Card Flip Animation


      Hello,

      Im working on a Java / SVG card game. SVG is used for the drawing of
      the gameboard and its animation. Part of the game involves having a
      card facedown and then it being flipped and placed on a pile. Ideally
      this card flipping would be animated with something along the lines of
      a page turning effect. I had a bit of a google around but couldnt
      find anything similar. Could anyone point me in the right direction
      or give me some pointers?

      http://sourceforge.net/projects/shead
      (Please note the name of the game could offend some people)

      Cheers,

      Sam





      [Non-text portions of this message have been removed]
    • Sam
      I would prefer to use an animateTransform rather than a script. I played around with the skew but i cant make it look like its flipping. ...
      Message 2 of 7 , Oct 30, 2007
      • 0 Attachment
        I would prefer to use an animateTransform rather than a script. I
        played around with the skew but i cant make it look like its flipping.

        --- In svg-developers@yahoogroups.com, "ddailey" <ddailey@...> wrote:
        >
        > Take a look at
        http://srufaculty.sru.edu/david.dailey/svg/MatrixTransform.svg
        >
        > it is working in Opera, Safari, FF, and IE (at least the versions I
        have loaded)
        >
        > dpd
        > ----- Original Message -----
        > From: Sam
        > To: svg-developers@yahoogroups.com
        > Sent: Friday, October 26, 2007 7:00 AM
        > Subject: [svg-developers] Svg Card Flip Animation
        >
        >
        > Hello,
        >
        > Im working on a Java / SVG card game. SVG is used for the drawing of
        > the gameboard and its animation. Part of the game involves having a
        > card facedown and then it being flipped and placed on a pile. Ideally
        > this card flipping would be animated with something along the lines of
        > a page turning effect. I had a bit of a google around but couldnt
        > find anything similar. Could anyone point me in the right direction
        > or give me some pointers?
        >
        > http://sourceforge.net/projects/shead
        > (Please note the name of the game could offend some people)
        >
        > Cheers,
        >
        > Sam
        >
        >
        >
        >
        >
        > [Non-text portions of this message have been removed]
        >
      • "~:'' ありがとうございました
        sam, this may be something like what you have in mind... Jonathan Chetwynd Accessibility Consultant on Media Literacy and the Internet
        Message 3 of 7 , Oct 30, 2007
        • 0 Attachment
          sam,

          this may be something like what you have in mind...

          Jonathan Chetwynd
          Accessibility Consultant on Media Literacy and the Internet

          <svg xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="100%" height="100%" >

          <rect x="0" y="0" width="100%" height="100%" fill="#888"/>
          <g id="Q" transform="matrix(1 .3 0 .6 0 0)">
          <animateTransform attributeType="XML"
          attributeName="transform" type="matrix"
          from="1 .3 0 .6 0 0" to="0 .4 .8 .6 0 0" dur="4s"
          fill="freeze"/>
          <text x="250" y="-15" fill="#800" font-size="40">Click to start/stop</
          text>
          <image id="P" x="250" y="0"
          width="280" height="300" xlink:href="http://marble.sru.edu/~ddailey/
          mp/p2.jpg" />
          </g>
          </svg>

          On 30 Oct 2007, at 17:27, Sam wrote:

          I would prefer to use an animateTransform rather than a script. I
          played around with the skew but i cant make it look like its flipping.

          --- In svg-developers@yahoogroups.com, "ddailey" <ddailey@...> wrote:
          >
          > Take a look at
          http://srufaculty.sru.edu/david.dailey/svg/MatrixTransform.svg
          >
          > it is working in Opera, Safari, FF, and IE (at least the versions I
          have loaded)
          >
          > dpd
          > ----- Original Message -----
          > From: Sam
          > To: svg-developers@yahoogroups.com
          > Sent: Friday, October 26, 2007 7:00 AM
          > Subject: [svg-developers] Svg Card Flip Animation
          >
          >
          > Hello,
          >
          > Im working on a Java / SVG card game. SVG is used for the drawing of
          > the gameboard and its animation. Part of the game involves having a
          > card facedown and then it being flipped and placed on a pile. Ideally
          > this card flipping would be animated with something along the
          lines of
          > a page turning effect. I had a bit of a google around but couldnt
          > find anything similar. Could anyone point me in the right direction
          > or give me some pointers?
          >
          > http://sourceforge.net/projects/shead
          > (Please note the name of the game could offend some people)
          >
          > Cheers,
          >
          > Sam
          >
          >
          >
          >
          >
          > [Non-text portions of this message have been removed]
          >
        • Julien Reichel
          Hi Jonathan, Small question regarding your example:
          Message 4 of 7 , Oct 31, 2007
          • 0 Attachment
            Hi Jonathan,

            Small question regarding your example:
            <animateTransform attributeType="XML" attributeName="transform"
            type="matrix" from="1 .3 0 .6 0 0" to="0 .4 .8 .6 0 0" dur="4s"
            fill="freeze"/>

            Is type="matrix" supported in the svg specs ? I couldn't find it
            anywhere.
            I've found: type = "translate" | "scale" | "rotate" | "skewX" | "skewY"

            Moreover, how do you interpolate between two matrix ? I have some
            problem picturing the transition between two states. I supose that's the
            reason why this type is not described in the specification. But is it
            supported by some player ?

            Julien



            ________________________________

            From: svg-developers@yahoogroups.com
            [mailto:svg-developers@yahoogroups.com] On Behalf Of "~:'' ????????????"
            Sent: 30 October 2007 23:06
            To: svg-developers@yahoogroups.com
            Cc: Sam
            Subject: Re: [svg-developers] Re: Svg Card Flip Animation



            sam,

            this may be something like what you have in mind...

            Jonathan Chetwynd
            Accessibility Consultant on Media Literacy and the Internet

            <svg xmlns="http://www.w3.org/2000/svg
            <http://www.w3.org/2000/svg> "
            xmlns:xlink="http://www.w3.org/1999/xlink
            <http://www.w3.org/1999/xlink> "
            width="100%" height="100%" >

            <rect x="0" y="0" width="100%" height="100%" fill="#888"/>
            <g id="Q" transform="matrix(1 .3 0 .6 0 0)">
            <animateTransform attributeType="XML"
            attributeName="transform" type="matrix"
            from="1 .3 0 .6 0 0" to="0 .4 .8 .6 0 0" dur="4s"
            fill="freeze"/>
            <text x="250" y="-15" fill="#800" font-size="40">Click to
            start/stop</
            text>
            <image id="P" x="250" y="0"
            width="280" height="300"
            xlink:href="http://marble.sru.edu/~ddailey/
            <http://marble.sru.edu/~ddailey/>
            mp/p2.jpg" />
            </g>
            </svg>

            On 30 Oct 2007, at 17:27, Sam wrote:

            I would prefer to use an animateTransform rather than a script.
            I
            played around with the skew but i cant make it look like its
            flipping.

            --- In svg-developers@yahoogroups.com
            <mailto:svg-developers%40yahoogroups.com> , "ddailey" <ddailey@...>
            wrote:
            >
            > Take a look at
            http://srufaculty.sru.edu/david.dailey/svg/MatrixTransform.svg
            <http://srufaculty.sru.edu/david.dailey/svg/MatrixTransform.svg>
            >
            > it is working in Opera, Safari, FF, and IE (at least the
            versions I
            have loaded)
            >
            > dpd
            > ----- Original Message -----
            > From: Sam
            > To: svg-developers@yahoogroups.com
            <mailto:svg-developers%40yahoogroups.com>
            > Sent: Friday, October 26, 2007 7:00 AM
            > Subject: [svg-developers] Svg Card Flip Animation
            >
            >
            > Hello,
            >
            > Im working on a Java / SVG card game. SVG is used for the
            drawing of
            > the gameboard and its animation. Part of the game involves
            having a
            > card facedown and then it being flipped and placed on a pile.
            Ideally
            > this card flipping would be animated with something along the
            lines of
            > a page turning effect. I had a bit of a google around but
            couldnt
            > find anything similar. Could anyone point me in the right
            direction
            > or give me some pointers?
            >
            > http://sourceforge.net/projects/shead
            <http://sourceforge.net/projects/shead>
            > (Please note the name of the game could offend some people)
            >
            > Cheers,
            >
            > Sam
            >
            >
            >
            >
            >
            > [Non-text portions of this message have been removed]
            >







            [Non-text portions of this message have been removed]
          • "~:'' ありがとうございました
            Julien, excellent point and thank you for drawing this to my attention... I ve asked Erik to explain. I found this to work, in Opera nightlies, I assumed it
            Message 5 of 7 , Oct 31, 2007
            • 0 Attachment
              Julien,

              excellent point and thank you for drawing this to my attention...
              I've asked Erik to explain.

              I found this to work, in Opera nightlies, I assumed it would work as
              the code is derived from the script version provided by David earlier
              in the thread.
              this is a practical rather than intellectual process for me.
              transforming matrices is stretching my comprehension too...

              it did remind me that I'm still waiting for an SVG authoring tool
              with a timeline and to email Sketsa ~:"

              cheers

              Jonathan Chetwynd
              Accessibility Consultant on Media Literacy and the Internet



              On 31 Oct 2007, at 11:04, Julien Reichel wrote:

              Hi Jonathan,

              Small question regarding your example:
              <animateTransform attributeType="XML" attributeName="transform"
              type="matrix" from="1 .3 0 .6 0 0" to="0 .4 .8 .6 0 0" dur="4s"
              fill="freeze"/>

              Is type="matrix" supported in the svg specs ? I couldn't find it
              anywhere.
              I've found: type = "translate" | "scale" | "rotate" | "skewX" | "skewY"

              Moreover, how do you interpolate between two matrix ? I have some
              problem picturing the transition between two states. I supose that's the
              reason why this type is not described in the specification. But is it
              supported by some player ?

              Julien


              ________________________________

              From: svg-developers@yahoogroups.com
              [mailto:svg-developers@yahoogroups.com] On Behalf Of "~:'' ????????????"
              Sent: 30 October 2007 23:06
              To: svg-developers@yahoogroups.com
              Cc: Sam
              Subject: Re: [svg-developers] Re: Svg Card Flip Animation



              sam,

              this may be something like what you have in mind...

              Jonathan Chetwynd
              Accessibility Consultant on Media Literacy and the Internet

              <svg xmlns="http://www.w3.org/2000/svg
              <http://www.w3.org/2000/svg> "
              xmlns:xlink="http://www.w3.org/1999/xlink
              <http://www.w3.org/1999/xlink> "
              width="100%" height="100%" >

              <rect x="0" y="0" width="100%" height="100%" fill="#888"/>
              <g id="Q" transform="matrix(1 .3 0 .6 0 0)">
              <animateTransform attributeType="XML"
              attributeName="transform" type="matrix"
              from="1 .3 0 .6 0 0" to="0 .4 .8 .6 0 0" dur="4s"
              fill="freeze"/>
              <text x="250" y="-15" fill="#800" font-size="40">Click to
              start/stop</
              text>
              <image id="P" x="250" y="0"
              width="280" height="300"
              xlink:href="http://marble.sru.edu/~ddailey/
              <http://marble.sru.edu/~ddailey/>
              mp/p2.jpg" />
              </g>
              </svg>

              On 30 Oct 2007, at 17:27, Sam wrote:

              I would prefer to use an animateTransform rather than a script.
              I
              played around with the skew but i cant make it look like its
              flipping.

              --- In svg-developers@yahoogroups.com
              <mailto:svg-developers%40yahoogroups.com> , "ddailey" <ddailey@...>
              wrote:
              >
              > Take a look at
              http://srufaculty.sru.edu/david.dailey/svg/MatrixTransform.svg
              <http://srufaculty.sru.edu/david.dailey/svg/MatrixTransform.svg>
              >
              > it is working in Opera, Safari, FF, and IE (at least the
              versions I
              have loaded)
              >
              > dpd
              > ----- Original Message -----
              > From: Sam
              > To: svg-developers@yahoogroups.com
              <mailto:svg-developers%40yahoogroups.com>
              > Sent: Friday, October 26, 2007 7:00 AM
              > Subject: [svg-developers] Svg Card Flip Animation
              >
              >
              > Hello,
              >
              > Im working on a Java / SVG card game. SVG is used for the
              drawing of
              > the gameboard and its animation. Part of the game involves
              having a
              > card facedown and then it being flipped and placed on a pile.
              Ideally
              > this card flipping would be animated with something along the
              lines of
              > a page turning effect. I had a bit of a google around but
              couldnt
              > find anything similar. Could anyone point me in the right
              direction
              > or give me some pointers?
              >
              > http://sourceforge.net/projects/shead
              <http://sourceforge.net/projects/shead>
              > (Please note the name of the game could offend some people)
              >
              > Cheers,
              >
              > Sam
              >
              >
              >
              >
              >
              > [Non-text portions of this message have been removed]
              >





              [Non-text portions of this message have been removed]
            • Erik Dahlström
              On Wed, 31 Oct 2007 14:22:08 +0100, ~: ありがとうございました。 ... type= matrix is not supported on animateTransform according to the spec as
              Message 6 of 7 , Oct 31, 2007
              • 0 Attachment
                On Wed, 31 Oct 2007 14:22:08 +0100, ~:'' ありがとうございました。
                <j.chetwynd@...> wrote:

                > Julien,
                >
                > excellent point and thank you for drawing this to my attention...
                > I've asked Erik to explain.
                >
                > I found this to work, in Opera nightlies, I assumed it would work as
                > the code is derived from the script version provided by David earlier
                > in the thread.

                type="matrix" is not supported on animateTransform according to the spec
                as Julien points out.
                From the 1.2T spec:
                "If 'type' has an unsupported value (e.g. type="foo" or type="ref(svg)")
                the 'animateTransform' element is ignored."

                > this is a practical rather than intellectual process for me.
                > transforming matrices is stretching my comprehension too...
                ...
                >> Moreover, how do you interpolate between two matrix ? I have some
                >> problem picturing the transition between two states. I supose that's the
                >> reason why this type is not described in the specification.

                Yes, that's a reason the spec doesn't allow you to do that.

                Cheers
                /Erik

                --
                Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
              Your message has been successfully submitted and would be delivered to recipients shortly.