Question

是否有人知道使用Raphael库以递归方式调用函数链接path.animate事件的语法？

我已经发布了一个JS小提琴，供http://jsfiddle.net/Quarkist/c4TzV/

参考

函数animString（）（左边的结果）正确地链接事件并且是动画的。

递归函数animRecursion（）（右边的结果）没有动画。

任何见解都表示赞赏。谢谢！

    <!doctype html>
    <html>
     <head>
       <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <title>Recursive animatePath w/Raphael</title>    
    <style type="text/css">
    <!--
    #displayA { position: absolute; top: 0px;   left: 0px; }
    #displayB { position: absolute; top: 0px;   left: 112px; }

    // -->
    </style>

    <script type="text/javascript" src="raphael-min.js"></script>    

    <script type="text/javascript">
    // Paths to animate
      var path1 = "M200,50c-27.5,0,50,78,50,50 c0-27.5-77.5,50-50,50c28,0-50-77.5-50-50C150,127.5,228,50,200,50z";
      var path2 = "M200,150c-27.5,0-50-22.5-50-50 s22.5-50,50-50s50,22.5,50,50S227.5,150,200,150z";
      var path3 = "M200,171 130,100 200,30 271,100 200,171z";
      var path4 = "M250,150 150,150 150,50 250,50 250,150z";
      var path5 = "M200,50 200,83.5 200,116.5 200,150";

    // animString works by stringing code along
    function animString() 
    { var tempCanvas =  Raphael(document.getElementById('displayA'), 0, 0, 320, 240);
      var path = tempCanvas.path( path1 );
      var speed = 1000;
      path.animate(
      { path: path1 }, 1000, // twist
        function(){ path.animate( { path: path1 }, speed, 2000,
        function(){ path.animate( { path: path2 }, speed, 2000,
        function(){ path.animate( { path: path3}, speed, 2000,
        function(){ path.animate( { path: path4}, speed, 2000,
        function(){ path.animate( { path: path5}, speed, 2000
        ) } ) } ) } ) } ) } );
    }

    // animRecursion fails
    function animRecursion(pathArray, speedArray, initialization) 
    { var newPath=pathArray.shift(pathArray); 
      var newSpeed=speedArray.shift(speedArray);
      if ( !initialization ) 
      { initialization=1;
        var tempCanvas =  Raphael(document.getElementById('displayB'), 0, 0, 320, 240);
        var path = tempCanvas.path( newPath );
        path.animate({path:newPath},newSpeed,animRecursion(pathArray, speedArray, initialization));
      } else
        { if ( pathArray.length !=1 )
          { path.animate({path:newPath},newSpeed,animRecursion(pathArray, speedArray, initialization));
          } else 
            {  if ( pathArray.length ==1 ) 
              { path.animate({path:newPath},newSpeed); 
              }
            }
        }
    } 

    var sendArray = new Array();
    var sendSpeed = new Array();
    sendArray = [path1, path2, path3, path4, path5];
    sendSpeed=  [100,200,300,400,500];
    </script>


     </head>
     <body onLoad="animString(); animRecursion(sendArray,sendSpeed);">  
    <div id="displayA"></div>
    <div id="displayB"></div>

     </body>
    </html>

Answer 1

请注意，工作代码执行此操作：

path.animate(x,y,z,function(){path.animate()});

而不是：

path.animate(x,y,z,path.animate());

但是失败的代码会这样做：

path.animate(x,y,z,animRecursion());

你应该做的就是按照工作代码的方式去做：

path.animate(x,y,z,function(){animRecursion()});

即传递要调用的函数，而不是调用函数。

Raphael path.animate递归函数语法

1 个答案: