动画多边形指向snap.svg-Java 学习之路

这是我第一次尝试使用snap.svg为多边形点设置动画，我有感觉我在那里做错了 .

这是我的代码：

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();

加载页面后，我的多边形消失了（我猜是因为我的函数在创建多边形后立即被调用） . 我检查了html，我的多边形仍在那里，但这里是我得到的：

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

我不知道可能是什么问题，所以如果有人得到答案，我会很高兴听到它 .

EDIT : 我试图添加"toString()"但它仍然无效：

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

1 回答

我认为Snaps多边形动画中有一个错误..它列出了here有一个从那里链接提交的补丁 .

但是，如果需要，您可以通过设置数组值的动画来轻松解决这个问题 .

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

jsfiddle

如果你做了很多，你可以写一个小插件来包含它...

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

回复于 2024-05-02T14:24:50+08:00

动画多边形指向snap.svg

1 回答

相关问题