Анимация с синхронизацией в SnapSvg

Question

В настоящее время я использую SnapSvg и сталкиваюсь с некоторыми проблемами в анимации. У меня есть элемент say circle и хочу, чтобы он появился с анимацией после 10 секунд загрузки страницы. Мы можем выполнить его как следующее в HTML5 SVG

<circle id="c1" cx="50" cy="30" r="26" fill="#ff0000" opacity="0" /> 
<set xlink:href="#c1" attributeName="opacity" attributeType="CSS" from="0" to="1" /> 

В SnapSVG также мы можем создать анимацию без времени следующим образом:

var c1=page.circle(50,30,26); 
c1.attr({ 
fill:"#ff0000", 
opacity:0 
}); 
c1.animate({opacity:1},1000); 

Но я действительно не в состоянии применить сроки на втором случае. Кто-нибудь, пожалуйста, помогите.

Answer 1

Я много исследовал эту тему и узнал, что @lan абсолютно прав.

Единственное решение этой проблемы состоит в:

setTimeout(function(){c1.animate({opacity:"1"},1000)},1500); 

В случае, если второй аргумент в setTimeout() функции является время, чтобы начать анимацию. С помощью этого метода вы также можете разместить столько анимаций, сколько сможете.

Answer 2

Вы можете использовать setInterval для добавления шагов непрозрачности к вашему SVG, таким образом имитируя замирание.

---

Это может дать вам подсказку: (если у вас есть элемент с id="c1":

//Function that fades out elements 
function fadeOutElement(elementId,time){ 

    var element = document.getElementById(elementId); 
    var opacity = 1; 

    function fadeOut(){ 
     opacity = opacity - 0.01; 
     element.setAttribute('opacity',String(opacity)); 
     //clear interval when opacity reaches 0; 
     if (opacity<=0) clearInterval(fadeInterval); 
    } 
    var fadeInterval = setInterval(function(){fadeOut()},time); 
} 

//call function and pass arguments, id of element and the interval time for each step 
fadeOutElement('c1',1); 

Вот JSFiddle для приведенного выше фрагмента кода

---

Примечание: Это, однако, doe s not использовать методы snap.svg, которые можно было бы использовать, так как вы хотите писать единый код повсюду. Поэтому решение snap.svg было бы лучше.