动画多边形点捕捉.svg
Animate polygon points snap.svg
这是我第一次尝试使用 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>
我不明白可能是什么问题,所以如果有人得到答案,我会很高兴听到它。
编辑:我尝试添加"toString()",但它仍然不起作用:
timeline1_anim = function(){
timeline1.animate({"points":time1_stp1.toString()},3000,mina.linear);
}
我认为 Snaps 多边形动画中存在错误.. 它在这里列出 有一个补丁从那里链接。
但是,如果需要,您可以通过对数组值进行动画处理来轻松解决此问题。
timeline1_anim = function(){
Snap.animate(time1_stp0, time1_stp1,
function( val ){
timeline1.attr({ points: val })
},
2000);
}
斯菲德尔
如果你做了很多,你可以写一个小插件来包含它......
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')})
斯菲德尔
相关文章:
- SVG/JavaScript:尝试选择和更改多边形点
- svg,多边形,JS函数错误
- 在多边形贴图上显示 svg 圆
- 如何对单个 SVG 多边形点进行动画处理
- D3 map - 将两个不相交的 SVG 多边形路径合并为一个路径
- 将 Google 地图多边形路径转换为 SVG 路径
- svg 多边形标签的宽度
- 对 SVG 多边形进行动画处理
- 在多边形中包含 png/svg
- SVG 多边形过渡
- 动画多边形点捕捉.svg
- 在svg多边形上单击时更改填充属性
- 在Raphael Javascript库中渲染SVG多边形
- 调整多边形点路径(svg)内的图像大小并使其不被剪裁
- SVG多边形边的厚度不规则
- 转换SVG多边形点到路径
- 通过Javascript更改svg多边形属性
- 转换SVG多边形路径到纬度和长坐标
- 随机放置svg多边形
- SVG多边形比例和相应的设置点