动画多边形点snap.svg

Question

it's the first time I tried to animate polygon points with snap.svg and I have the felling I'm doing something wrong there.

Here is my code :

var fdr = Snap('#fdright');

var time1_stp0 = [363.617,262.895, 363.562,367.4, 273.145,315.191, 273.145,315.191];
var time1_stp1 = [363.617,262.895, 363.562,367.4, 273.145,315.191, 273.145,210.688];

var timeline1 = fdr.polygon(time1_stp0).attr({fill:'red',opacity:'0.5'});

timeline1_anim = function(){
timeline1.animate({"points":time1_stp1},3000,mina.linear);
}

timeline1_anim();

As soon as the page is loaded, my polygon disappears (I guess it's because my function is called right after the creation of the polygon). I checked the html, my polygon's still there but here is what i get :

<polygon fill="#ff0000" style="opacity: 0.5;" points="363.617"></polygon>

I don't get what might be the issue, so if someone's got an answer i'll be glad to hear it.

EDIT : I tried to add "toString()" but it's still not working :

timeline1_anim = function(){
timeline1.animate({"points":time1_stp1.toString()},3000,mina.linear);
}

Answer 1

I think there's a bug in Snaps polygon animation.. its listed here There is a patch submitted linked from there.

However, you can get around this easily by animating the array values though if needed.

timeline1_anim = function(){
  Snap.animate(time1_stp0, time1_stp1, 
    function( val ){ 
      timeline1.attr({ points: val })
    }, 
  2000);  
}

jsfiddle

If you are doing a lot of them, you could write a small plugin to include it...

Snap.plugin( function( Snap, Element, Paper, global ) {
  Element.prototype.polyAnimate = function( destPoints, duration, easing, callback ) {
    var poly = this;
    Snap.animate( this.attr('points'), destPoints,  
       function( val ){ poly.attr({ points: val }) }, duration, easing, callback)
    };
});

timeline1.polyAnimate( time1_stp1, 2000, mina.linear, function() { alert('finished')})

jsfiddle