复杂补间动画

我们可以使用 GreenSock Konva Plugin 来设置补间动画。
GreenSock tweens 的功能比Konva的tween更强大。
下面的例子演示了 GreenSock fillLinearGradientColorStops的使用。
Konva Complex Tweening Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <script src="https://rawgit.com/konvajs/greensock-plugin/master/KonvaPlugin.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
    <script src="https://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Complex Tweening 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 star = new Konva.Star({
        x: 100,
        y: 250,
        numPoints: 5,
        innerRadius: 40,
        outerRadius: 70,
        fill: 'red'
      });

      layer.add(star);
      stage.add(layer);

      var tl = new TimelineLite();

      // plugin example
      tl.to(star, 2, {
        konva: {
          x: 300,
          y: 130,
          innerRadius: 15,
          rotation: 360
        },
        ease: Power4.easeOut
      })
        .to(star, 2, {
          konva: {
            fill: 'rgb(0,0,255)',
            scaleX: 1.5,
            scaleY: 1.5
          }
        })
        .to(star, 1, {
          konva: {
            fill: '#0F0',
            scaleX: 3,
            scaleY: 1,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowBlur: 10,
            shadowColor: 'black',
            rotation: 0
          }
        });

      var linearGradPentagon = new Konva.RegularPolygon({
        x: 70,
        y: 70,
        sides: 5,
        radius: 70,
        fillLinearGradientStartPoint: {
          x: -50,
          y: -50
        },
        fillLinearGradientEndPoint: {
          x: 50,
          y: 50
        },
        fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
      });

      layer.add(linearGradPentagon);
      linearGradPentagon.moveToBottom();

      //activate ColorPropsPlugin
      TweenPlugin.activate([ColorPropsPlugin]);

      //object to store color values
      var tmpColors = {
        color0: 'white',
        color1: 'black'
      };

      //tween the color values in myObject
      TweenLite.to(tmpColors, 5, {
        colorProps: {
          color0: 'black',
          color1: 'red'
        },
        yoyo: true,
        repeat: 5,
        ease: Linear.easeNone,
        onUpdate: applyProps
      });

      //apply new color values to gradient css of target
      function applyProps() {
        linearGradPentagon.setAttrs({
          fillLinearGradientColorStops: [
            0,
            tmpColors.color0,
            1,
            tmpColors.color1
          ]
        });
        layer.batchDraw();
      }
    </script>
  </body>
</html>