是否可以在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); 
    } 
    });