Javascript Snap.svg缩放并设置svg动画
我试图用Javascript Snap.svg缩放并设置svg动画,javascript,css,animation,svg,snap.svg,Javascript,Css,Animation,Svg,Snap.svg,我试图用g.animate({transform:“s2.5,2.5,”+bbox.cx+,“+bbox.cy},0)来缩放SVG然后设置车轮动画的动画(bbox.cx,bbox.cy,1500) 但是我的SVG没有扩展。它只是一个旋转。如果我删除旋转-SVG缩放。如何组合它以立即缩放,然后设置旋转动画 我从未使用过Snap.svg,但您可以尝试以下方法: var i = 0; function wheelAnimation(cx, cy, speed, scale){ i++;
g.animate({transform:“s2.5,2.5,”+bbox.cx+,“+bbox.cy},0)来缩放SVG编码>然后设置车轮动画的动画(bbox.cx,bbox.cy,1500)代码>
但是我的SVG没有扩展。它只是一个旋转。如果我删除旋转-SVG缩放。如何组合它以立即缩放,然后设置旋转动画
我从未使用过Snap.svg,但您可以尝试以下方法:
var i = 0;
function wheelAnimation(cx, cy, speed, scale){
i++;
g.attr({ transform: "r0 " + cx + " " + cy + " s" + scale + "," + scale + "," + cx + "," + cy }); //Reset + Scale setup
g.animate({
transform: "r360," + cx + "," + cy + " s" + scale + "," + scale + "," + cx + "," + cy }, // Basic rotation around a point. No frills.
speed, // Nice slow turning rays
function(){
if(i == 5)
speed = 5000;
wheelAnimation(cx, cy, speed, scale); // Repeat this animation so it appears infinite.
}
);
}
希望这对你有帮助:)
var i = 0;
function wheelAnimation(cx, cy, speed, scale){
i++;
g.attr({ transform: "r0 " + cx + " " + cy + " s" + scale + "," + scale + "," + cx + "," + cy }); //Reset + Scale setup
g.animate({
transform: "r360," + cx + "," + cy + " s" + scale + "," + scale + "," + cx + "," + cy }, // Basic rotation around a point. No frills.
speed, // Nice slow turning rays
function(){
if(i == 5)
speed = 5000;
wheelAnimation(cx, cy, speed, scale); // Repeat this animation so it appears infinite.
}
);
}