是否可以在Fabric.js中設置動畫效果？

Question

是否可以在Fabric.js中爲圖像過濾器設置動畫效果？如「像素化」濾鏡。

Answer 1

我用像演示一樣的方式解決了它。 不幸的是過濾器不能被動畫 - 他們需要太多的處理時間。

這裏是我的代碼：

image = ... //Image, where the filter should be applied 

var filter = new fabric.Image.filters.RemoveWhite({ 
    threshold: 0, 
    distance: 140 
}); 
image.filters.push(filter); 
image.applyFilters(canvas.renderAll.bind(canvas)); 

animate(image,1, 400); //Start the Animation 

function animate(image,value, stop){ 
    value += ((stop-value)*0.02); //Change the threshold-value 

    if (image.filters[0]) { 
     image.filters[0]['threshold'] = value; 
     console.log(value); 
     image.applyFilters(canvas.renderAll.bind(canvas)); //Start creating the new image 

     if(value<stop-100){ 
      setTimeout(function(){act(image,value,stop);},1); 
     } 
    } 
} 

我知道代碼是不是最有效的，但它的工作原理。你可以看到動畫過濾器消耗的時間太多。

（我用1920x1080px圖像測試它，也許你可以用更小的圖像使用它）

Answer 2

這裏是亮度過濾器更新版本

var brightnessValue = 0.9; 
    var brightnessFilter = new fabric.Image.filters.Brightness({ 
    brightness: brightnessValue 
    }); 
    fabricImage.filters.push(brightnessFilter); 

    fabric.util.requestAnimFrame(function brightnessFilterAnimation() { 
    brightnessValue = brightnessValue - 0.04; 
    brightnessFilter.brightness = brightnessValue; 
    fabricImage.applyFilters(); 
    if (brightnessValue > 0) { 
     fabric.util.requestAnimFrame(brightnessFilterAnimation); 
    } 
    });