Заставить векторные точки мигать с помощью Raphael и Javascript

Я использую библиотеку Raphael JS и пытаюсь выяснить, как сделать точку видимой на экране, а затем исчезают.

Я использую цикл for для создания точек, а затем заставляю их исчезать. Есть ли способ, которым они также могут исчезать, и я могу их удалить?

Я новичок в Javascript, поэтому не знаю, как с этим справиться. Я не мог понять, как это сделать в документации Raphael.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>blink point</title>        
        <script src="js/raphael.js"></script> 
        <!--<script src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>-->
        <script type="text/javascript">
        window.onload = function () {

            //Point Array
            pointList = new Array ();

            // Create Canvas
            var r = Raphael(10, 50, 600, 600);            

            // Make a 'group' of points
            for( i=0; i<20; i++){   

                    //Create Point            
                    pointList[i] = r.circle(10*i, 10*i,5);
                    pointList[i].attr({stroke: "none", fill: "#999", opacity: 0});

                    //Fade in   
                    pointList[i].animate({opacity: 1}, 1000 );  

            }

            // Remove points, starting with the first
            for( i=0; i<20; i++){           

                    //Try fading them out
                    //pointList[i].animate({opacity: 0}, 1000 );
            }

        };
        </script>
    </head>

    <body>
        <div id="holder"></div>         
    </body>
</html>

Мне также не удалось заставить работать онлайн-ссылку на библиотеку Raphael, поэтому может потребоваться загрузить библиотеку.


javascript animation raphael
person djq    schedule 01.04.2011    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Вы можете найти рабочий пример здесь http://jsbin.com/uxege4/2/edit
Подробнее:

Проблема с вашим кодом - анимация выполняется асинхронно, а это означает, что ваша программа будет завершена до того, как анимация будет готова. Поэтому вам нужно настроить функцию обратного вызова, когда анимация будет готова. Вот цитата из документации Рафаэля:

animate

Изменяет текущее значение атрибута на указанное значение за указанное количество миллисекунд.
Параметры

newAttrs object Объект параметров результатов анимации. (Не все атрибуты могут быть ›анимированы.)
ms number Длительность анимации, указанная в миллисекундах.
функция обратного вызова [необязательно]

Последний параметр — то, что нам нужно. Вам просто нужно назначить функцию для вызова после завершения анимации.

person Eldar Djafarov    schedule 05.04.2011

arrow_upward
4
arrow_downward

Я сделал для вас это: http://jsbin.com/uxege4/5/edit Вы можете связать все вместе и иметь функцию обратного вызова в .animate(). Так:

r.circle(10*i, 10*i, 5).attr({stroke: "none", fill: "#999", opacity: 0}).animate({opacity: 1}, 1000, function(){
                this.animate({opacity: 0}, 1000, function(){
                  this.remove();
                });

          });

Функция обратного вызова вызывается, когда анимация заканчивается, и проходит над объектом raphäel.

person thgie    schedule 08.04.2011

arrow_upward
3
arrow_downward

Чтобы уточнить -

Animate() Рафаэля начнет выполняться, как только вы сделаете вызов функции, и будет продолжать выполняться, пока выполняется остальная часть вашего JavaScript.

Я изменил пример кода Эльдара, чтобы продемонстрировать это. См.: http://jsbin.com/uxege4/4/edit.

Обратите внимание, что желтые круги рисуются одновременно с серыми, несмотря на то, что вызов их animate() происходит позже в коде.

Вызов функции обратного вызова после завершения пути асинхронного кода — распространенный шаблон в JavaScript, и важно понимать его, чтобы продуктивно работать с JS.

В примере Эльдара анонимная функция присоединена к первому обработчику обратного вызова animate(). По завершении начального плавного появления animate() вызывается функция и выполняется постепенное исчезновение.

Я рекомендую Дугласа Крокфорда JavaScript: The Good Parts ( это, как ни странно, самая тонкая книга по программированию, которую я когда-либо читал) и прохождение через JavaScript Koans. Это должно поставить вас на правильный путь.

person jdc    schedule 06.04.2011

arrow_upward
1
arrow_downward

Я создал бесконечное мигание, если вы выберете через некоторое время ... с помощью clousures!

Интро - это какой-то объект Рафаэля, зацени его ;D

Получайте удовольствие от этого! , с уважением Меньше

var createBlink = function(i,that){     
    var fadeIn = function(i){   
        if(i == 100){
            console.log("end fadein");
            return;
        }else{
            console.log("fadein " + i);
            that.animate({ opacity: 0.8 }, 1000, "<" , function(){
                fadeOut(++i) ;
            });
        }
    }
    var fadeOut = function(i){  
        if(i == 100){
            console.log("end fadeout");
            return;
        }else{
            console.log("fadeout " + i);
            that.animate({ opacity: 0.0 }, 1000, "<" , function(){
                fadeIn(++i);
            });
        }
    }
    fadeIn(i);      
}

createBlink(0,intro);
person Less    schedule 06.08.2012