帆布動畫留下痕跡/片段，因爲它移動

http://www.netmagazine.com/tutorials/create-page-flip-effect-html5-canvas

我有點改變了它，以適合我的應用程序。沒有點擊頁面可以將其打開 - 您可以按下畫布外的按鈕使其成爲動畫。他們提供動畫的例子很流暢，但是當翻頁動畫在畫布上移動時，我的版本留下了痕跡。以下是其中一個按鈕的示例：

function page2Down(event) { 
    if(page != 1) 
    { 
     var canvas = document.getElementById("pageflip-canvas"); 
     canvas.style.zIndex = 100; 
     var a = function(){ 
     var canvas = document.getElementById("pageflip-canvas"); 
     canvas.width = canvas.width; 
     canvas.style.zIndex = 0; 
     }; 
     var b = setTimeout(a, 1100); 
     if(page < 1) 
     flips[page].dragging = true; 
     else 
     flips[page-1].dragging = true; 
    } 
} 

function page2Up(event) 
{ 
    var page_num = 1; 
    while(page > page_num) 
    { 
     for(var i = total_pages; i > -1; i--) { 
     if(flips[i].dragging) { 
      flips[i].target = 1; 
      if(i>page_num) 
       flips[i-1].dragging = true; 
      page--; 

     } 
     console.log(page); 
     flips[i].dragging = false; 
     } 
    } 

    while(page < page_num) 
    { 
     for(var i = 0; i < flips.length; i++) { 
     if(page == page_num) return false; 
     if(flips[i].dragging) { 
      flips[i].target = -1; 
      if(i<page_num) 
       flips[i+1].dragging = true; 
      page++; 
     } 
     console.log(page); 
     flips[i].dragging = false; 
     }  
    }   
}

呈現和drawfip函數與示例中的相同。所有我改變，除了我指定的已經是一些變量：

var BOOK_WIDTH = 2264; 
var BOOK_HEIGHT = 431; 
var PAGE_WIDTH = 1132; 
var PAGE_HEIGHT = 426;

該小道看起來很不好，我需要刪除它。我相信這可能與頁面大小有關，但我不完全確定。

按照要求，這裏的一對的jsfiddle一個精簡版（我清空了SVG標籤，這樣你就不必通過所有額外的代碼來犁）：http://jsfiddle.net/vtS2s/

的「蹤跡」我指的是長相像額外的頁面。它在jsfiddle版本中看起來並不糟糕（它仍然存在），這使我相信它也與標籤中的代碼量有關。

來源

2011-11-16 Fibericon

你有一個在線測試代碼的例子嗎？ –

你可以在http://jsfiddle.net/上創建演示嗎？ – pradeek

演示添加 - 檢查我編輯的問題。 – Fibericon

在您的render功能中，您只需撥打clearRect一次。這會導致當您繪製新框架時，每個先前繪製的翻轉畫面都會繼續存在。

每次畫一個新框架（即drawFlip）時都需要clearRect。

來源

2011-11-22 23:11:40 jzila

帆布動畫留下痕跡/片段，因爲它移動

回答

相關問題