使用Raphael和Javascript使矢量点闪烁

Question

使用Raphael和Javascript使矢量点闪烁

djq*_*djq 10 javascript animation raphael

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

我也无法获得Raphael库的在线链接,因此可能需要下载该库.

Answer 1

Eld*_*rov 5

您可以在这里找到工作示例http://jsbin.com/uxege4/2/edit
详细信息:

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

animate

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

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

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

归档时间：	14 年，8 月前
查看次数：	3740 次
最近记录：	13 年，4 月前