html5那些事：Canvas所有与KineticJS二层控制！_javascript canvas 2层-优快云博客

本文通过实例演示了如何使用KineticJS中的play(), pause(), reverse(), reset(), finish(), 和 seek()方法来控制动画效果。提供了完整的HTML代码实现，包括动画播放、暂停、反向播放、重置、强制结束及跳转到指定时间点的功能。

到播放、暂停、反向、复位,完成,并寻求与KineticJS吞世代,我们可以用play(), pause(), reverse(), reset(), finish(), 和 seek() 方法。本教程演示了每个控制。

其它的话也不多说啦，直接看代码吧：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
        display: inline-block;
        margin-right: 5px;
      }
    </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">
      <input type="button" id="reset" value="Reset">
      <input type="button" id="seek" value="Seek 3">
      <input type="button" id="finish" value="Finish">
      
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.1.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      var rect = new Kinetic.Rect({
        x: 100,
        y: 130,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 2,
        opacity: 0.2
      });

      layer.add(rect);
      stage.add(layer);
      
      var tween = new Kinetic.Tween({
        node: rect, 
        duration: 6,
        x: 400,
        y: 75,
        rotation: Math.PI * 10,
        opacity: 1,
        strokeWidth: 6,
        scaleX: 1.3,
        scaleY: 1.3,
        easing: Kinetic.Easings.Linear,
        fillR: 0,
        fillG: 0,
        fillB: 255
      });

      // pause tween
      document.getElementById('pause').addEventListener('click', function() {
        tween.pause();
      }, false);
      
      // reverse tween
      document.getElementById('reverse').addEventListener('click', function() {
        tween.reverse();
      }, false);
      
      // play tween forward
      document.getElementById('play').addEventListener('click', function() {
        tween.play();
      }, false);
      
      // reset tween
      document.getElementById('reset').addEventListener('click', function() {
        tween.reset();
      }, false);
      
      // force tween to finish
      document.getElementById('finish').addEventListener('click', function() {
        tween.finish();
      }, false);
      
      // seek to 3 seconds
      document.getElementById('seek').addEventListener('click', function() {
        tween.seek(3);
      }, false);
      
    </script>
  </body>
</html>