Добрый день!
Использую анимацию линии формата SVG.Линия плавно появляется до определенного значения.
На данный момент у меня задача такая- если анимация линии закончена(то есть прогресс=1), то должен появитьcя следующий элемент.(например див)
Хочу создать универсальную функцию анимации и оперировать в дальнейшем переменной progress или result для задания определенных эффектов
Вот изначальная функция анимации которая вызывается в файле svg
function anim_obj(){
var start=new Date().getTime()
var to=300
var duration=3000
setTimeout(function(){
var now=new Date().getTime()-start;
progress=now/duration;
var result=Math.floor(to*progress);
/*ниже производится доступ к обьекту svg и его элементу (линии)*/
var obj_id=parent.document.getElementById('svg_right_line');
var obj=obj_id.contentDocument.getElementById('line1');
/*ниже используем атрибут svg - stroke-dasharray для постепенного появления линии*/
obj.setAttribute('stroke-dasharray',result+' '+ to);
if(progress<1){
setTimeout(arguments.callee);
}
/*Если анимация закончена делаем появления дива*/
if(progress>1){
/*появляется див*/
}
},10);
}
Все просто ,все работает.Но эта функция не универсальна ..задавать множество условий в ней не вариант..не верное решение.
Ниже представлены 2 вариант решения(1 вариант работает,но надеюсь он не самый лучший....и ест ьдругие варианты)со 2 вариантом возникли проблема.
1 вариант - используем в данной функции параметры
function anim_obj_new(to,duration,obj_ids,svg_elem_id,prop,propf){
var to=to;
var duration=duration;
var start=new Date().getTime()
setTimeout(function(){
var now=new Date().getTime()-start;
var progress=now/duration;
var result=Math.floor(to*progress);
var obj_id=parent.document.getElementById(obj_ids);
var obj=obj_id.contentDocument.getElementById(svg_elem_id);
obj.setAttribute('stroke-dasharray',result+' '+ to);
/*если значение [B]result[/B] равно значению параметра [B]prop[/B],то выполняется функция заданная в параметре [B]propf[/B]*/
if(result==prop){
propf()
}
if(progress<1){
setTimeout(arguments.callee);
}
},10);
}
/*Вызываем данную функцию */anim_obj_new(300,3000,'svg_right_line','line1',[B]200[/B],test_f)
/*если длина анимации линии = [B]200[/B] то вызываем функцию ниже*/
function test_f(){
alert('sd')
}
Все работает,но было бы намного удобнее получать просто доступ к переменой result или progress
для доступа к перемынным внутри функции я решил использовать обьекты
В коде ниже многое можно упростить,например создать параметры для анимации а не указывать их в обьекте.Но здесь Сама суть в том что я могу получить значение извне.
Главное полезное свойство-
anim_prop.arr.В функции ниже я добавляю в этот массив значение result.
Я могу получит в любом месте значение массива путем перебора и в дальнейшем оперировать им.
Но вот собственно и есть проблема для меня..Так как
массив будет заполнен только после полного прохода setTimeout..
То есть при первом клике на нужном диве линия будет анимироваться но после окончание анимации ничего не произойдет..Необходимо будет
делать второй клик и только так начинать работу с готовым массивом anim_prop.arr
var anim_prop={};
anim_prop.to=300;
anim_prop.duration=2000;
anim_prop.start;
anim_prop.progress;
anim_prop.arr=[];
function anim_obj(){
anim_prop.start=new Date().getTime()
setTimeout(function(){
var now=new Date().getTime()-anim_prop.start;
anim_prop.progress=now/anim_prop.duration;
var result=Math.floor(anim_prop.to*anim_prop.progress);
/*добавляем в массив значение result*/
anim_prop.arr.push(result);
parent.document.getElementById('testobj').innerHTML=result
var obj_id=parent.document.getElementById('svg_right_line');
var obj=obj_id.contentDocument.getElementById('line1');
obj.setAttribute('stroke-dasharray',result+' '+ anim_prop.to);
if(anim_prop.progress<1){
setTimeout(arguments.callee);
}
},10);
}
Если понятна проблема,то подскажите варианты решения если они есть..может я все усложняю и все намного проще))