Gmail Calendar Documents Reader Web more »
Recently Visited Groups | Help | Sign in
Google Groups Home
jQuery (English)
Home
+ new post
About this group
Join this group
SVG animation question
Options
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
   3 messages - Collapse all  -  Translate all to Translated (View all originals)
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
Vez  
View profile  
 More options Jul 10 2008, 7:48 pm
From: Vez <vezq...@gmail.com>
Date: Thu, 10 Jul 2008 16:48:23 -0700 (PDT)
Local: Thurs, Jul 10 2008 7:48 pm
Subject: SVG animation question
Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author
I am the amazing jQuery SVG plugin with the animation extension for a
browser-based game.

When the character walks around, the camera follows him. Right now I
just pan the in huge chunks with this code:

    svg.configure({viewBox: x+' '+y+' '+width+' '+height})

So I need to make a custom animation. Here's what I have so far.

jQuery.fx.step.panX  = function(fx)
{
        fx.elem.setAttribute('viewBox', fx.now+' '+y+' '+width+' '+height)

}

svg.animate({panX: x}, 100)

As you can see, it only works for the x-axis. How do I animate more
than one variable at a time?

Thanks for the help.


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Vez  
View profile  
 More options Jul 10 2008, 11:24 pm
From: Vez <vezq...@gmail.com>
Date: Thu, 10 Jul 2008 20:24:15 -0700 (PDT)
Local: Thurs, Jul 10 2008 11:24 pm
Subject: Re: SVG animation question
Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author
I have made some progress, but now I get this zoom in effect every
time I try to pan.

jQuery.fx.step.pan = function(fx)
{
        if(fx.state == 0)
        {
                fx.end = fx.options.curAnim.pan
                fx.start =
fx.elem.attributes.getNamedItem('viewBox').nodeValue.split(' ')
                fx.dist = fx.end.map(function(val, i){ return val - fx.start[i] })
                status(fx.dist)
        }

        fx.elem.setAttribute('viewBox', fx.dist.map(function(val){ return
fx.pos * val }).join(' '))

}

pan = [x, y, map.view.width, map.view.height].map(
                function(val){ return val * map.tile })
$('svg').animate({pan: pan}, {duration: 1000})

On Jul 10, 4:48 pm, Vez <vezq...@gmail.com> wrote:


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Vez  
View profile  
 More options Jul 11 2008, 12:10 am
From: Vez <vezq...@gmail.com>
Date: Thu, 10 Jul 2008 21:10:43 -0700 (PDT)
Local: Fri, Jul 11 2008 12:10 am
Subject: Re: SVG animation question
Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author
Hey, guys. I'd just like to let you know that I solved the problem and
it's working perfectly now! The previous version had two bugs. The
values in fx.start were strings and not numbers, so they are now
converted with parseFloat. The other problem was that I forgot to add
in the starting values when setting the attribute. Here is the final
extension.

jQuery.fx.step.pan = function(fx)
{
        if(fx.state == 0)
        {
                fx.end = fx.options.curAnim.pan
                fx.start =
fx.elem.attributes.getNamedItem('viewBox').nodeValue.split('
').map(parseFloat)
                fx.dist = fx.end.map(function(val, i){ return val - fx.start[i] })
        }

        fx.elem.setAttribute('viewBox', fx.dist.map(function(val, i){ return
(fx.start[i] + fx.pos * val) }).join(' '))


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »

Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2009 Google