HTML5画布更广泛的KineticJS函数

最新推荐文章于 2021-06-04 01:59:48 发布

linyahuis

最新推荐文章于 2021-06-04 01:59:48 发布

阅读量849

点赞数

分类专栏： HTML5画布更广泛的KineticJS函数文章标签： HTML5画布更广泛的KineticJS

本文链接：https://blog.csdn.net/linyahuis/article/details/12754335

版权

HTML5画布更广泛的KineticJS函数专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本教程演示了所有的广泛的KineticJS提供的函数集,包括直线、缓和、背部、弹性、弹,和强大的。

说明:按“播放”转换所有的文本节点。

文字的东西，就不多说了，直接上图和上代码。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #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 src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 480
      });
      var layer = new Kinetic.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 Kinetic.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);
        
        var tween = new Kinetic.Tween({
          node: text, 
          x: 420,
          easing: Kinetic.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>