pageSnapでFabricJSの奇妙な線アニメーション

Question

私はJS線アニメーションを作成するためにFabricJSを使用しており、PageSnapJSを使用してスナップセクションを作成しています。ただし、ラインアニメーションの動作は非常にランダムです。 ゆっくりとのページをスクロールすると、赤い線のアニメーションが表示されます。 1ページから2ページは通常正常ですが、2ページから3ページは失敗します。私の計算は間違っていますか？それを修正するには？ここで

は私のコードは、（JSFiddleは、質問の最後にある）である：

var canvas; 
var current_page = 1; 
var is_animating = false; 
var line_options = { 
    stroke: 'red', 
    strokeWidth: 3 
}; 
$(document).ready(function() { 
    canvas = new fabric.Canvas('line_effect'); 
    canvas.setHeight($('.indicator').height()); 
    canvas.setWidth(50); 
    canvas.renderAll(); 
    var section_h = $('.section').height(); 

    var startPts = [ 
     {x: 48, y: 0}, 
     {x: 48, y: $('.section').height()} 
    ]; 
    var endPts = [ 
     {x: 48, y: $('.section').height() * 2}, 
     {x: 48, y: $('.section').height()} 
    ]; 

    var line = new fabric.Polyline(startPts, line_options); 
    canvas.add(line); 

    function animateLine(i, prop, endPts) { 
     fabric.util.animate({ 
      startValue: line.points[i][prop], 
      endValue: endPts[i][prop], 
      duration: 1000, 
      easing: fabric.util.ease.easeInOutCubic, 
      onChange: function(value) { 
       line.points[i][prop] = value; 
       if(i === startPts.length - 1 && prop == 'y') { 
        canvas.renderAll(); 
       } 
      }, 
      onComplete: function() { 
       line.setCoords(); 
       if(i === startPts.length - 1 && prop == 'y') { 
        even = !even; 
        animateLine(i, prop, endPts); 
       } 
      } 
     }); 
    } 
    function animate(startPage, endPage) { 
     if(is_animating) { 
      return; 
     } else if(startPage == endPage) { 
      return; 
     } else if(Math.abs(startPage - endPage) > 1) { 
      // Jump to that section immediately. 
      console.log('Jump to Page ' + endPage); 
      canvas.remove(line); 
      if(endPage == 1) { 
       line = new fabric.Line([48, section_h * 0, 48, section_h * 1], line_options); 
      } else if(endPage == 2) { 
       line = new fabric.Line([48, section_h * 1, 48, section_h * 2], line_options); 
      } else if(endPage == 3) { 
       line = new fabric.Line([48, section_h * 2, 48, section_h * 3], line_options); 
      } else if(endPage == 4) { 
       line = new fabric.Line([48, section_h * 3, 48, section_h * 4], line_options); 
      } 
      canvas.add(line); 
     } else { 
      is_animating = true; 
      if(startPage == 1 && endPage == 2) { 
       console.log('Page 1 > 2'); 
       startPts = [ 
        {x: 48, y: section_h * 0}, 
        {x: 48, y: section_h * 1} 
       ]; 
       endPts = [ 
        {x: 48, y: section_h * 2}, 
        {x: 48, y: section_h * 1} 
       ]; 
      } else if(startPage == 2 && endPage == 3) { 
       console.log('Page 2 > 3'); 
       startPts = [ 
        {x: 48, y: section_h * 1}, 
        {x: 48, y: section_h * 2} 
       ]; 
       endPts = [ 
        {x: 48, y: section_h * 3}, 
        {x: 48, y: section_h * 2} 
       ]; 
      } else if(startPage == 3 && endPage == 4) { 
       console.log('Page 3 > 4'); 
       startPts = [ 
        {x: 48, y: section_h * 2}, 
        {x: 48, y: section_h * 3} 
       ]; 
       endPts = [ 
        {x: 48, y: section_h * 4}, 
        {x: 48, y: section_h * 3} 
       ]; 
      } else if(startPage == 4 && endPage == 3) { 
       console.log('Page 4 > 3'); 
       startPts = [ 
        {x: 48, y: section_h * 4}, 
        {x: 48, y: section_h * 3} 
       ]; 
       endPts = [ 
        {x: 48, y: section_h * 2}, 
        {x: 48, y: section_h * 3} 
       ]; 
      } else if(startPage == 3 && endPage == 2) { 
       console.log('Page 3 > 2'); 
       startPts = [ 
        {x: 48, y: section_h * 2}, 
        {x: 48, y: section_h * 3} 
       ]; 
       endPts = [ 
        {x: 48, y: section_h * 2}, 
        {x: 48, y: section_h * 1} 
       ]; 
      } else if(startPage == 2 && endPage == 1) { 
       console.log('Page 2 > 1'); 
       startPts = [ 
        {x: 48, y: section_h * 2}, 
        {x: 48, y: section_h * 1} 
       ]; 
       endPts = [ 
        {x: 48, y: section_h * 0}, 
        {x: 48, y: section_h * 1} 
       ]; 
      } else { 
       console.log('Others: ' + startPage + ' > ' + endPage); 
      } 
      canvas.remove(line); 
      line = new fabric.Polyline(startPts, line_options); 
      canvas.add(line); 
      for(var i = 0, len = startPts.length; i < len; i++) { 
       animateLine(i, 'y', even ? endPts : startPts); 
      } 
      is_animating = false; 
     } 
    } 

    var even = true; 
    $('.contents').panelSnap({ 
     $menu: false, // the menu DOM object 
     onSnapStart: function($target) { 
      if($target.data('panel') == 'page2') { 
       animate(current_page, 2); 
      } else if($target.data('panel') == 'page3') { 
       animate(current_page, 3); 
      } else if($target.data('panel') == 'page4') { 
       animate(current_page, 4); 
      } else if($target.data('panel') == 'page1') { 
       animate(current_page, 1); 
      } 
     }, 
     onSnapFinish: function($target) { 
      current_page = parseInt($target.data('panel').replace('page', '')); 
      console.log('Current Page: ' + current_page); 
     } 

    }); 
}); 

ここで私は他のフレームワークでのアニメーションを見てきましたJSFiddle

Answer 1

は、相対的なサイズで失敗、しかしを成功さ絶対サイズ値。私はあなたのフィドルでいくつかの追加のjsを使用して、％値の代わりにpx値に高さと幅の値を設定し始めました。

これは、JSFiddleコンテナに適合しています。

$('html, body').css({'height':$('.contents').height()+'px','width':$('.contents').width()+'px'}); 
    $('.indicator .section').css({'height':$('.contents').height/4+'px'}); 

レスポンシブデザインが必要な場合は、その方向に向かってみてください。私は、あなたがしていることが、ピンダウンされるようないくつかの調整があると思われます。