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(' '))
}
Vez wrote:
> 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.
