这是我第一次尝试使用javascript/jquery/snap动画SVG,并且我发现即使是一些相当新的设备(测试iPhone 4s),动画也不能很好地运行。似乎是一个性能问题?Snap svg多个动画 - 性能问题
我试图在svg中嵌入到我的html中的一些分组元素动画。它们在页面加载时动画,这里是相关的代码。
注:我的SVG绘制在动画的“结束”状态,插画家,所以我使用捕捉抵消它们,然后动画回到它们的自然位置
$(function() {
//initialise renderer
var renderer = Snap(".bg-space_svg");
//define animation start states
var stars_bg_transform = new Snap.Matrix().translate(0, 200).scale(1.5, 1.5, 260, 0);
var shard_center_transform = new Snap.Matrix().translate(0, 80).scale(1.8, 1.8, 260, 0);
var shard_left_transform = new Snap.Matrix().translate(-45, 30).scale(1.3, 1.3, 220, 0);
var shard_right_transform = new Snap.Matrix().translate(50, 40).scale(1.3, 1.3, 300, 0).rotate(-16);
var stars_center_transform = new Snap.Matrix().translate(0, -80).scale(0.8, 0.8, 260, 0);
var stars_left_transform = new Snap.Matrix().translate(-70, -30).scale(0.7, 0.7, 220, 0);
var stars_right_transform = new Snap.Matrix().translate(80, -30).scale(0.7, 0.7, 300, 0).rotate(-16);
//capture svg elements in variables
var greenline = renderer.select('.green-line');
var starsbg = renderer.select('.stars-background').transform(stars_bg_transform);
var shard_center = renderer.select('.shard-center').transform(shard_center_transform).attr({'fill-opacity': 0.8});
var shard_left = renderer.select('.shard-left').transform(shard_left_transform);
var shard_right = renderer.select('.shard-right').transform(shard_right_transform);
var stars_center = renderer.select('.stars-center').transform(stars_center_transform);
var stars_left = renderer.select('.stars-left').transform(stars_left_transform);
var stars_right = renderer.select('.stars-right').transform(stars_right_transform);
//define original positions of svg elements as a "null" transform - this is the end state of the animations
var origin = new Snap.Matrix().translate(0, 0).scale(1);
//initialise animations
starsbg.animate({'transform': origin}, 3000, mina.easeinout);
shard_center.animate({'transform': origin, 'fill-opacity': 1}, 3000, mina.easeinout);
shard_left.animate({'transform': origin}, 3000, mina.easeinout);
shard_right.animate({'transform': origin}, 3000, mina.easeinout);
stars_center.animate({'transform': origin}, 3000, mina.easeinout);
stars_left.animate({'transform': origin}, 3000, mina.easeinout);
stars_right.animate({'transform': origin}, 3000, mina.easeinout);
greenline.animate({'stroke-opacity': 1}, 1000);
});
会发生什么事是,开始状态的初始化很好,但是动画本身不会运行,并在几秒钟的延迟之后简单地弹出到结束状态。
有没有更好的方法来处理这些动画,以便它们表现更好?
我是否需要编写自定义绘制循环,然后使用requestAnimationFrame或类似的方法调用它? (我对这个概念很陌生,帮助!)
可能会弹出相同的svg以及小提琴上的代码? – Ian