0

总而言之，我不能同时为 Konva 精灵设置动画并应用 Konva 过滤器。

我正在使用 react-konva 绘制一个复杂的舞台，其中部分包含使用 Sprite 组件动画的动画图像。为了启动动画，我一直等到节点在浏览器中绘制出来，有点“hack”（setTimeout），然后在每个节点上调用 shape.start() 来启动它们。

    initiateAnimations = () => {
       setTimeout(() => {
           let stage = this.stageRef.getStage();  
           var shapes = stage.find('.canvas-animation');
           shapes.map(shape => {
               shape.start();
           })
       },100)      
   }

我还为这些图像添加了颜色叠加层，具体取决于我在渲染之前输入 Sprite 组件的属性。我为此使用了 Konva RGBA 过滤器——它并不完美，但可以完成工作。为了启动和绘制过滤器，Konva 需要重新缓存图像，因此在 render() 中绘制完节点后，我使用了 cache 和 batchDraw 函数。

   applyEffects = () => {
       setTimeout(() => {
           let stage = this.stageRef.getStage();
           var shapes = stage.find(node => { return node.attrs.id.includes("-f1") ? true : false; });
           shapes.map(shape => {
               this.applyCache(shape)
           })
       },100)      
   }

   applyCache(target) {
       target.cache();
       target.getLayer().batchDraw();
   }

我在 componentDidMount 和 componentDidUpdate 中都有所有这些。

我遇到的问题是动画和过滤器单独工作，但永远不会一起工作，无论时间延迟或它们的顺序如何。结合起来，只有过滤器才能工作。另一方面，如果我只运行动画脚本，动画就会启动并运行良好。但是在一起，动画就没有开始。我想我只是不太了解这里的生命周期，但也许有人可以帮助我指出正确的方向？

4

1 回答 1

0

目前konva@7.0.3不支持Sprite对象的缓存/过滤器。

作为一种解决方法，您可以：

  1. 使用精灵图像创建Konva.Image实例并在其上使用过滤器。
  2. 使用node.toImage()方法将Konva.Image实例转换为本机图像元素。结果，您将拥有精灵图像，但应用了过滤器
  3. 为动画精灵使用生成的原生图像
于 2020-07-23T14:41:44.327 回答