如何讓我的文字在畫布上的移動動畫更平滑（鋸齒狀運動更少）？

如何使我的文字在畫布上的移動動畫更平滑（較少交錯的動作）？如何讓我的文字在畫布上的移動動畫更平滑（鋸齒狀運動更少）？

頁面完全按照我希望的那樣運行，但文本的運動非常鋸齒狀。我怎樣才能讓它在這個速度下更平滑？

代碼：

<style> 
       #cvs { 
        position: absolute; 
        top: 0px; 
        left: 0px; 
       } 
      </style> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> 
     <script type="text/javascript"> 
      var context; 
      var text = ""; 
      var textDirection =""; 

      $(function() 
      { 
       context = document.getElementById("cvs").getContext("2d");    
       setInterval("animate()", 360); 

       textDirection ="right"; 
       textXpos = 5; 
       text = "This is my video..";  
      }); 

      function animate() {    
       // Clear screen 
       context.clearRect(0, 0, 500, 500); 
       context.globalAlpha = 1; 
      //context.fillStyle = '#fff'; 
      // context.fillRect(0, 0, 500, 500);  

       var metrics = context.measureText(text); 
       var textWidth = metrics.width; 
       if (textDirection == "right") { 
        textXpos += 10; 

        if (textXpos > 500 - textWidth) { 
         textDirection = "left"; 
        } 
       } 
       else { 
        textXpos -= 10; 

        if (textXpos < 10) { 
         textDirection = "right"; 
        }      
       } 

       context.font = '20px _sans'; 
       context.fillStyle = 'white'; 
       context.textBaseline = 'top'; 
       context.fillText (text, textXpos, 440);  
       } 
       </script> 
      </head> 
      <body> 
      <div id="page"> 
     <video id="video" autoplay loop> 
      <source id='mp4' 
      src="http://media.w3.org/2010/05/sintel/trailer.mp4" 
      type='video/mp4'> 
      <source id='webm' 
      src="http://media.w3.org/2010/05/sintel/trailer.webm" 
      type='video/webm'> 
      <source id='ogv' 
      src="http://media.w3.org/2010/05/sintel/trailer.ogv" 
      type='video/ogg'> 
      <p>Your user agent does not support the HTML5 Video element.</p> 
     </video> 
       <canvas id="cvs" width="500" height="500"> 
        Your browser does not support the HTML 5 Canvas. 
       </canvas> 
      </div> 
      </body> 
     </html>

來源

2013-03-19 user2186669

你可以請小提琴嗎？ – nycynik 2013-03-19 14:43:13

http://jsfiddle.net/jBHCN/14/ – user2186669 2013-03-19 14:52:12

是的，改變間隔和movrment，你會得到相同的結果，除了它不那麼波濤洶涌。 – nycynik 2013-03-19 16:55:33

通過減少間隔時間爲您的動畫功能。你目前已經設定每360ms調用一次，每秒不到3幀。將它設置在20到40之間以獲得流暢的動畫。

來源

2013-03-19 14:48:36

我想要那個速度。是否沒有辦法創建某種形式的補間動畫 – user2186669 2013-03-19 14:53:14

3fps動畫可能會非常參差不齊，或者只能發生非常小的動作。要保持相同的移動速度，但要保持平滑，則需要縮短間隔並減少文本移動的數量。例如。如果您將時間間隔更改爲30，那麼您還希望文本僅移動0.8幀。 – 2013-03-19 14:57:05

@ user2186669：我不認爲你很懂帆布。畫布只會在繪製時改變。如果你每360ms只畫一次，它就不會在它之間變化。 – 2013-03-19 14:57:41

如何讓我的文字在畫布上的移動動畫更平滑（鋸齒狀運動更少）？

回答

相關問題