Заставление векторных точек мигать с использованием Raphael и Javascript - PullRequest
Новая
       1

Заставление векторных точек мигать с использованием Raphael и Javascript

10 голосов
/ 01 апреля 2011

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

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

Я довольно новичок в Javascript, поэтому я не знаю лучшей стратегии для борьбы с этим. Я не мог понять, как это сделать в документации Рафаэля. 

<!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, поэтому может потребоваться загрузить библиотеку.

Ответы [ 4 ]

5 голосов
/ 05 апреля 2011

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

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

animate

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

newAttrs объект Объект параметров результатов анимации.(Не все атрибуты могут быть> анимированными.)
мс Число Продолжительность анимации, указанная в миллисекундах.
функция обратного вызова [необязательно]

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

4 голосов
/ 08 апреля 2011

Я сделал вам это: 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.

3 голосов
/ 06 апреля 2011

уточнить -

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

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

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

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

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

Я рекомендую JavaScript Дагласа Крокфорда: «Хорошие части» (что довольно забавно, самая тонкая книга по программированию, которую я когда-либо читал) и которая проходит через JavaScript Koans . Это должно сделать вас на правильном пути.

1 голос
/ 06 августа 2012

Я создал бесконечное моргание, если вы выберете через некоторое время .. с помощью 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);
...