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

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

Ответы

Ответ 1

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

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

одушевленные

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

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

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

Ответ 2

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

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

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

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

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

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

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

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

Ответ 4

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

Intro - это некоторый объект raphael, 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);