Просмотр полной версии : Анимация Raphael
SeqviriouM
24.10.2012, 17:38
Здравствуйте.
Очень нужна помощь.
Недавно начал изучать библиотеку Raphael и столкнулся с проблемой. Нужно, чтобы после выполнения анимации, элемент исчезал(т.е. скрывался). В документации прочитал, что для этого надо просто в конце анимации вставить вызываемую после неё функцию.
im1.animate({'transform': "r" + 720}, 2e3, im1.hide1());
Вот пример моей анимации. Но вместо того чтобы вызвать функцию hide() в конце анимации, она вызывается сразу же, и вся анимация исчезает.
DjDiablo
26.10.2012, 14:38
вот что у тебя получается
z=function(x){
alert ("z");
if (typeof x=="function") x();
}
z1=function(){
alert("z1")
}
// сначало сработает z1 и только потом z
z(z1());
// решение
z( function(){z1()} );
а значит
im1.animate({'transform': "r" + 720}, 2e3, function(){ im1.hide1() });
SeqviriouM
28.10.2012, 12:52
Спасибо, разобрался)
Правда столкнулся с ещё одной проблемкой: хочу сделать чтобы при нажатии мыши на прямоугольник он трансформировался в треугольник.
Нашёл на офиц. сайте пример и делал точно так же как в нём:
rec.click(function()
{
rec.animate({path: "M150,100L300,100,200,200,z" ,"opacity":0.1})
})
Но при нажатии мыши, меняется только прозрачность, т.е. строчка path полностью игнорируется.
SeqviriouM
08.11.2012, 18:14
Смотрю мало кто пользуется данной библиотекой:)
Решение проблемы:
Атрибут .attr({"path"}) можно менять только у объектов paper.path, т.е. если прямоугольник задать не через paper.rect(), а через paper.path(), то тогда данная анимация будет изменять данную фигуру на ту, которая указана в анимации.
Пример:
1) rec = paper.path("M100,300L300,300,300,400,100,400,z");
rec.attr({"fill": "red","opacity": 0.5});
rec.click(function()
{
rec.animate({path: "M100,300L300,300,200,400,z "},1e3)
})
Данный фрагмент код рисует прямоугольник, указанный в paper.path и при нажатии изменяет его, на треугольник указанный в анимации
2) rec = paper.rect(100,300,200,100);
rec.attr({"fill": "red","opacity": 0.5});
rec.click(function()
{
rec.animate({path: "M100,300L300,300,200,400,z "},1e3)
})
Данный фрагмент программы рисует только прямоугольник. Анимация по нажатию на него не работает т.к. прямоугольник нарисован не через paper.path
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot