react-konva - running sprite animation and filter at the same time

Question

To summarize, I can't animate Konva sprites and apply Konva filters at the same time.

I'm drawing a complex stage using react-konva, and parts of it contains animated images using Sprite component animations. In order to start the animations, I am waiting until the nodes are drawn in the browser, with a bit of a "hack" (setTimeout), and then calling shape.start() on each one to start them.

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

I also add a color overlay to these images, depending on properties that I feed into the Sprite components before render. I use the Konva RGBA filter for this - it's not perfect but kind of gets the job done. In order to initiate and draw the filter, Konva needs the images to be re-cached, and so after the nodes are drawn in render(), I use the cache and batchDraw functions for this.

   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();
   }

I have all of this both in componentDidMount and componentDidUpdate.

The problem I am encountering is that the animations and filters work on their own, but never together, regardless of time delays or which order they are in. In conjunction, only the filter will work. On the other hand, if I run only the animation script, the animations start and run fine. But together, the animation just doesn't start. I think I just don't understand the lifecycle here well enough, but maybe someone can help point me in the right direction?

Answer 1

At the current moment [email protected] doesn't support caching/filters for Sprite object.

As a workaround you can:

1. Create Konva.Image instance with the image of sprite and use filters on it.
2. Use node.toImage() method to convert Konva.Image instance into a native image element. As a result you will have and sprite image but with filters applied
3. Use resulted native image for the animated sprite