[英]Loop animation with svg.js
我有一個非常簡單的svg.js動畫,只要頁面打開,我想在循環上運行。 在查看github , 文檔或堆棧溢出頁面時,我無法找到任何內容。 可以在此處找到沒有循環的動畫的工作版本。 重要的js是:
//create the svg element and the array of circles
var draw = SVG('canvas').size(300, 50);
var circ = [];
for (var i = 0; i < 5; i++) {
//draw the circles
circ[i] = draw.circle(12.5).attr({
fill: '#fff'
}).cx(i * 37.5 + 12.5).cy(20);
//first fade the circles out, then fade them back in with a callback
circ[i].animate(1000, '<>', 1000 + 100 * i).attr({
opacity: 0
}).after(function () {
this.animate(1000, '<>', 250).attr({
opacity: 1
});
});
}
我知道如果沒有js庫這很容易,但我認為這只是使用svg.js的第一步。 后來我計划將它用於更強大的動畫。 感謝您的任何建議或指示。
從版本0.38的svg.js開始, loop()
方法內置於:
https://github.com/wout/svg.js#loop
我還計划在即將發布的版本中創建一個reverse()
方法。 現在, loop()
方法從頭開始重新啟動動畫。
我不確定它是否可能僅僅使用svg.js屬性,因為從svg.js中可以看出它是否創建了典型的svg動畫元素。 無論如何,它可以通過循環來完成。 所以...
function anim( obj,i ) {
obj.animate(1000, '<>', 1000 + 100 * i).attr({
opacity: 0
}).after(function () {
obj.animate(1000, '<>', 250).attr({
opacity: 1
});
});
};
function startAnims() {
for( var i = 0; i< 5; i++ ) {
anim( circ[i],i );
}
setTimeout( startAnims, 5000 ); // Or possibly setInterval may be better
};
jsfiddle這里http://jsfiddle.net/8bMBZ/7/由於不清楚它是否每次都在幕后添加元素(你可能想要存儲動畫,如果是這樣就開始)。 如果你需要像Raphael,snap,d3,Pablo.js那樣你可以嘗試作為替代品,如果你需要從略微不同的方式看動畫,還有其他的libs與SVG不同。
我用after來調用一個遞歸啟動動畫的函數。 這樣我就可以實現無限循環和反轉。 當然,你可以指望避免無限循環,但一般的想法如下:
//custom animation function whose context is the element animated
function myCustomAnimation(pos, morph, from, to) {
var currentVal = morph(from, to); //do morphing and your custom math
this.attr({ 'some prop': currentVal });
}
var animationStart = 0; //just extra values for my custom animation function
var animationEnd = 1; //animation values start at 0 and ends at 1
line.attr({ 'stroke-width': 2, stroke: 'red' });
animateMeRepeatedly.apply(line);
function animateMeRepeatedly()
{
this.animate(1500)
.during(function (pos, morph) {
myCustomAnimation.apply(this, [pos, morph, animationStart, animationEnd]);
})
.after(function () {
this.animate(1500).during(function (pos, morph) {
myCustomAnimation.apply(this, [pos, morph, animationEnd, animationStart]);
}).after(animateMeRepeatedly);
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.