Tween Blur Filter Tutorial

To tween a filter using Konva, we can simply tween the properties associated with the filter. In this tutorial, we'll tween the blurRadius property, which controls the amount of blur applied to the image.

Instructions: Mouseover or touch the image to focus it (reduce blur).

Vanilla

import Konva from 'konva';

const width = window.innerWidth;
const height = window.innerHeight;

const stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});

const layer = new Konva.Layer();

// create image

const imageObj = new Image();
imageObj.onload = () => {
const lion = new Konva.Image({
x: 50,
y: 50,
image: imageObj,
draggable: true,
});

layer.add(lion);

// add blur filter

lion.cache();
lion.filters([Konva.Filters.Blur]);
lion.blurRadius(10);

// create blur tween

const tween = new Konva.Tween({
node: lion,
duration: 0.5,
blurRadius: 0,
easing: Konva.Easings.EaseInOut,
});

// bind events

lion.on('mouseenter touchstart', () => {
tween.play();
});

lion.on('mouseleave touchend', () => {
tween.reverse();
});

layer.draw();
};
imageObj.src = '/images/lion.png';

stage.add(layer);

Open Sandbox

React

import { Stage, Layer, Image } from 'react-konva';
import { useRef, useEffect } from 'react';
import useImage from 'use-image';

const App = () => {
  const imageRef = useRef();
  const [image] = useImage('/images/lion.png');
  const tweenRef = useRef();

  useEffect(() => {
    if (!imageRef.current) return;

    const node = imageRef.current;
    node.cache();
    node.filters([Konva.Filters.Blur]);
    node.blurRadius(10);

    tweenRef.current = new Konva.Tween({
      node: node,
      duration: 0.5,
      blurRadius: 0,
      easing: Konva.Easings.EaseInOut,
    });
  }, [image]);

  const handleMouseEnter = () => {
    tweenRef.current.play();
  };

  const handleMouseLeave = () => {
    tweenRef.current.reverse();
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Image
          ref={imageRef}
          x={50}
          y={50}
          image={image}
          draggable
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          onTouchStart={handleMouseEnter}
          onTouchEnd={handleMouseLeave}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-image
        v-if="image"
        :config="imageConfig"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
        @touchstart="handleMouseEnter"
        @touchend="handleMouseLeave"
        ref="imageRef"
      />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import Konva from 'konva';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const image = ref(null);
const imageRef = ref(null);
let tween = null;

// Load image

const img = new Image();
img.onload = () => {
  image.value = img;
};
img.src = '/images/lion.png';

const imageConfig = computed(() => ({
  x: 50,
  y: 50,
  image: image.value,
  draggable: true
}));

onMounted(() => {
  if (!imageRef.value) return;

  const node = imageRef.value.getNode();
  node.cache();
  node.filters([Konva.Filters.Blur]);
  node.blurRadius(10);

  tween = new Konva.Tween({
    node: node,
    duration: 0.5,
    blurRadius: 0,
    easing: Konva.Easings.EaseInOut,
  });
});

const handleMouseEnter = () => {
  tween.play();
};

const handleMouseLeave = () => {
  tween.reverse();
};
</script>

Open Sandbox

</rewritten_file>