滤镜补间动画效果

我们可以通过设置tween的滤镜属性来控制补间动画效果。

本教程演示了blurRadius来控制图片的模糊补间动画效果。

说明：鼠标放到图片上查看效果。

Konva Tween Blur Filter Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Tween Filter Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

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

      var layer = new Konva.Layer();

      var lion = new Konva.Image({
        x: 80,
        y: 30,
        draggable: true
      });
      layer.add(lion);
      stage.add(layer);

      var image = new Image();
      image.onload = function() {
        lion.image(image);
        lion.cache();
        lion.filters([Konva.Filters.Blur]);
        lion.blurRadius(10);
        layer.draw();

        // the tween has to be created after the node has been added to the layer
        var tween = new Konva.Tween({
          node: lion,
          duration: 0.6,
          blurRadius: 0,
          easing: Konva.Easings.EaseInOut
        });

        lion.on('mouseover', function() {
          tween.play();
        });

        lion.on('mouseout', function() {
          tween.reverse();
        });
      };
      image.src = '/assets/lion.png';
    </script>
  </body>
</html>