在滾動過程中多次調用D3.js轉換是否昂貴？

我有一個滾動事件監聽器，當頁面擊中特定的滾動目標時，觸發D3.js轉換。動畫效果很好，不會滯後，但每個滾動位置都會調用該過渡。這個貴嗎？在第一個draw()之後#mySvgShape設置爲fill-opacity:0.8。在滾動期間繼續調用轉換是否是一個問題？在滾動過程中多次調用D3.js轉換是否昂貴？

scrollPosition是滾動頁面的百分比（0到1）。

function draw(scrollPosition) { 
     if (scrollPosition > 0.2 && scrollPosition < 0.4) { 
     el.select('#mySvgShape') 
     .transition() 
     .style("fill-opacity", "0.8"); 
     }else{ 
     el.select('#mySvgShape') 
     .transition() 
     .style("fill-opacity", "1e-6"); 
     }

來源

2017-03-14 jm22

在調用轉換之前檢查元素的不透明度。 –

好的建議。謝謝，傑拉爾多。 – jm22

不用擔心。默認的持續時間是250ms。所以，更好的方法是檢查是否有任何主動轉換。 –

您可以檢查是否有任何轉換髮生，如果是，請不要再次調用轉換。

爲了做到這一點，使用d3.active：

d3.active（節點[，名稱]）：

返回具有指定名稱的指定節點上的活性過渡，如果有的話。

所以，你if可以改成這樣：

if (percentage > 0.2 && percentage < 0.4) { 
    if (!d3.active(d3.select("#dam-fill").node())) { 
     d3.select("#dam-fill") 
      .transition() 
      .duration(5000) 
      .style("fill-opacity", "1") 
      .attr("transform", "translate(-50, -200) scale(1.2,1.2)"); 
    } 
}

這是你更新的提琴：https://jsfiddle.net/gerardofurtado/ze2dc976/

我調整到5000毫秒的過渡只是爲了顯示，如果向上滾動或者在轉換髮生時停下來，它不會停止（就像在你的小提琴中一樣）。因此，不僅在滾動中多次調用轉換是廣泛的，它會攪亂轉換。

來源

2017-03-21 12:39:59

在滾動過程中多次調用D3.js轉換是否昂貴？

回答

相關問題