Question

我正在使用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库的在线链接，因此可能需要下载该库。

Answer 1

您可以在http://jsbin.com/uxege4/2/edit找到工作示例详情：

您的代码出现问题 - 动画是异步完成的，这意味着您的程序将在淡入之前完成。因此，您需要在动画准备就绪时设置回调函数。以下是Raphael文档的引用：

动画

  在给定的毫秒数内将属性从其当前值更改为指定值   参数


newAttrs对象动画结果的参数对象。（并非所有属性都可以>动画。）
  ms number动画的持续时间，以毫秒为单位   回调函数[可选]

最后的参数是我们需要的。你只需要在动画结束后分配函数来调用。

Answer 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对象时，将调用Callback函数。

Answer 3

澄清 -

Raphael的animate（）将在您进行函数调用后立即开始，并且继续发生，同时执行其余的JavaScript。

我修改了Eldar的示例代码来演示这一点。请参阅：http://jsbin.com/uxege4/4/edit

请注意，黄色圆圈与灰色圆圈同时绘制，即使稍后在代码中调用animate（）它们也会出现。

在完成异步代码路径时使用回调函数是JavaScript中的一种常见模式，为了提高JS的效率，必须理解它。

在Eldar的例子中，匿名函数被附加到第一个animate（）的回调处理程序。完成初始淡入的animate（）后，函数被调用，并执行淡出。

我推荐道格拉斯·克罗克福德（Douglas Crockford）的JavaScript: The Good Parts（这有点有趣，是我读过的最薄的编程书）并贯穿JavaScript Koans。这样做可以让你走上正轨。

Answer 4

我已经创造了一个永无止境的眨眼，如果你选择了一段时间后......在clousures的帮助下！

介绍是一些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);

使用Raphael和Javascript使矢量点闪烁

4 个答案: