Raphael的動畫設置如何？

我試圖在拉斐爾完成一些動畫，但即使不透明動畫起作用，我也無法在畫布周圍移動一組（甚至一個圓圈）。Raphael的動畫設置如何？

我在網上發現移動一個集合應該設置翻譯，而不是x，y位置（因爲它們可能對集合中的每個元素都不相同，只是x和y可能不足以移動一些元素），但它不適合我。正如預期的那樣，即使動畫回調按時執行，也沒什麼動靜。

到現在爲止，我可以使用下面的代碼的最好辦法就是看時間是如何流逝（控制檯）...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Set, circle animation</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script> 
    <script type="text/javascript"> 
     $(document).ready (function() 
     { 
      var canvas = Raphael ('canvas', 400, 300); 
      window.tset = canvas.set() 
       .push(
        window.tap = canvas.circle (100, 100, 40) 
         .attr ({stroke: 'blue', fill: 'red'}) 
       ); 

      setTimeout (function() 
      { 
       console.log ('Starting tset animation #1.'); 
       window.tset.animate ({translation: '15,25'}, 1000, function() 
       { 
        console.log ('Starting tap animation #1.'); 
        window.tap.animate ({translation: '15,25'}, 1000, function() 
        { 
         console.log ('Starting tset animation #2.'); 
         window.tset.animate ({translate: '15,25'}, 1000, function() 
         { 
          console.log ('Starting tap animation #2.'); 
          window.tap.animate ({translate: '15,25'}, 1000, function() 
          { 
           console.log ('Starting tset animation #3.'); 
           window.tset.animate ({translation: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000, function() 
           { 
            console.log ('Starting tap animation #3.'); 
            window.tap.animate ({translation: 'matrix(1, 0, 0, 1, 15, 25'}, 1000, function() 
            { 
             console.log ('Starting tset animation #4.'); 
             window.tset.animate ({transform: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000, function() 
             { 
              console.log ('Starting tap animation #4.'); 
              window.tap.animate ({transform: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000); 
             }); 
            }); 
           }); 
          }); 
         }); 
        }); 
       }); 
      }, 1000) 
     }); 
    </script> 
</head> 
<body> 
    <div id="canvas"></div> 
</body> 
</html>

來源

2011-11-26 Jānis Elmeris

要拉斐爾移動一組，使用：

// move to (100,100) over 1 second 

theSetNameGoesHere.animate({transform: "t100,100"}, 1000);

來源

2011-12-02 05:10:40 RobNYC

我打這個有點（和掃描通過源），它看起來像你需要指定一個像{transform:'M 1 .5 .5 1 15 25'}形式的轉換。看看這個fiddle看到一些轉變。

順便說一句，轉換並不像我預期的那樣完全正常工作，我不能假裝我明白爲什麼......我對Raphael和SVG來說很新穎。無論如何，我希望這有助於你朝着正確的方向前進。

來源

2011-12-01 14:50:57

是，矩陣的值並不像我希望的那樣挺直向前。我最好使用「變換」功能，讓拉斐爾計算矩陣。 –

我同意，矩陣有點難以理解 - 您可以使用translate（'t'），rotate（'r'）和scale（'s'）函數，這些函數更容易，但我不認爲是一種無矩陣歪曲集合的方法。 –

Raphael的動畫設置如何？

回答

相關問題