Question

首先，我正在使用基于此的翻页动画：

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;
       }    
   }        
}

render和drawfip函数与示例中的相同。除了我已指定的内容之外，我所做的一切都是变量：

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

这条路看起来很糟糕，我需要删除它。我相信它可能与页面的大小有关，但我不完全确定。

根据要求，这里是jsfiddle上的精简版本（我清空了svg标签，因此您不必翻阅所有额外的代码）：http://jsfiddle.net/vtS2s/

我指的“踪迹”看起来像额外的页面。它在jsfiddle版本中看起来并不那么糟糕（它仍然存在），这让我相信它也与标签中的代码量有关。

Answer 1

在render功能中，您只需拨打clearRect一次。这会导致在绘制新帧时，绘制的每个先前翻转都将继续存在。

每次绘制新框架（clearRect）时，您都需要drawFlip。

画布动画在移动时会留下踪迹/碎片

1 个答案: