是否可以在 Fabric.js 中为过滤器设置动画？答案

【问题标题】：Is it possible to animate filter in Fabric.js?是否可以在 Fabric.js 中为过滤器设置动画？
【发布时间】：2017-10-12 21:04:31
【问题描述】：

是否可以在 Fabric.js 中为图像过滤器设置动画？例如“像素化”滤镜。

【问题讨论】：

您希望如何为过滤器设置动画？一段时间内应该改变哪个参数？
例如过滤亮度以慢慢改变亮度
在哪里可以用俄语提问
如果你在这个演示中拖动亮度滑块——fabricjs.com/image-filters——我想这就是你想要的效果。这就是您需要设置动画的属性（例如，通过fabric.util.animate fabricjs.com/docs/symbols/fabric.util.html#.animate）

标签： fabricjs

【解决方案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的图片测试过，也许你可以用小一点的图片）

【讨论】：

使用fabric.util.requestAnimFrame 可能会更有效（而不是手动递归setTimeout）

【解决方案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);
    }
  });

【讨论】：