全部缓动函数

本篇教程将演示Konva内置的各种缓动函数的效果，包括Linear, Ease, Back, Elastic, Bounce, 和 Strong。
说明：点击 “Play” 运行动画。
More Easing Functions 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 All Easings Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
      #buttons {
        position: absolute;
        top: 10px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <input type="button" id="play" value="Play" />
      <input type="button" id="pause" value="Pause" />
      <input type="button" id="reverse" value="Reverse" />
    </div>
    <script>
      var width = window.innerWidth;
      var height = 707;

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

      var layer = new Konva.Layer();

      var easings = [
        { name: 'Linear', color: 'blue' },
        { name: 'EaseIn', color: 'green' },
        { name: 'EaseOut', color: 'green' },
        { name: 'EaseInOut', color: 'green' },
        { name: 'BackEaseIn', color: 'blue' },
        { name: 'BackEaseOut', color: 'blue' },
        { name: 'BackEaseInOut', color: 'blue' },
        { name: 'ElasticEaseIn', color: 'green' },
        { name: 'ElasticEaseOut', color: 'green' },
        { name: 'ElasticEaseInOut', color: 'green' },
        { name: 'BounceEaseIn', color: 'blue' },
        { name: 'BounceEaseOut', color: 'blue' },
        { name: 'BounceEaseInOut', color: 'blue' },
        { name: 'StrongEaseIn', color: 'green' },
        { name: 'StrongEaseOut', color: 'green' },
        { name: 'StrongEaseInOut', color: 'green' }
      ];

      var tweens = [];

      for (var n = 0; n < easings.length; n++) {
        var num = n + 1;
        var ease = easings[n];
        var text = new Konva.Text({
          x: 10,
          y: 60 + (n * 400) / easings.length,
          padding: 4,
          text: num + ') ' + ease.name,
          fontSize: 18,
          fontFamily: 'Calibri',
          fill: ease.color
        });

        layer.add(text);

        // the tween has to be created after the node has been added to the layer
        var tween = new Konva.Tween({
          node: text,
          x: 280,
          easing: Konva.Easings[ease.name],
          duration: 2
        });

        // add tween to tweens array
        tweens.push(tween);
      }

      stage.add(layer);

      // play
      document.getElementById('play').addEventListener(
        'click',
        function() {
          for (var n = 0; n < tweens.length; n++) {
            tweens[n].play();
          }
        },
        false
      );

      // pause
      document.getElementById('pause').addEventListener(
        'click',
        function() {
          for (var n = 0; n < tweens.length; n++) {
            tweens[n].pause();
          }
        },
        false
      );

      // reverse
      document.getElementById('reverse').addEventListener(
        'click',
        function() {
          for (var n = 0; n < tweens.length; n++) {
            tweens[n].reverse();
          }
        },
        false
      );
    </script>
  </body>
</html>