KineticJS：如何將SVG Sprite與KineticJS Sprites一起使用？

Question

我有一個SVG Sprite，其外觀類似於以下架構：

Image Image Image  
Image Image Image  
Image Image Image

其中Image是一個圖像，所有九個圖像都是精靈。 它們都在一層上。

這里是精靈的教程與PNG文件在這里，但我無法找到如何使SVG文件的工作。

使用SVG精靈時，如何設置幀的坐標？ 如何使用SVG精靈？

編輯：這是本教程的代碼。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-color: #222;
        display: inline-block;
        width: 580px;
        height: 202px;
      }
      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <input type="button" id="punch" value="Punch">
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

      var imageObj = new Image();
      imageObj.onload = function() {
        var blob = new Kinetic.Sprite({
          x: 250,
          y: 40,
          image: imageObj,
          animation: 'idle',
          animations: {
            idle: [
              // x, y, width, height (4 frames)
              2,2,70,119,
              71,2,74,119,
              146,2,81,119,
              226,2,76,119
            ],
            punch: [
              // x, y, width, height (3 frames)
              2,138,74,122,
              76,138,84,122,
              346,138,120,122
            ]
          },
          frameRate: 7,
          frameIndex: 0
        });

        // add the shape to the layer
        layer.add(blob);

        // add the layer to the stage
        stage.add(layer);

        // start sprite animation
        blob.start();

        var frameCount = 0;

        blob.on('frameIndexChange', function(evt) {
          if (blob.animation() === 'punch' && ++frameCount > 3) {
            blob.animation('idle');
            frameCount = 0;
          }
        });

        document.getElementById('punch').addEventListener('click', function() {
          blob.animation('punch');
        }, false);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/blob-sprite.png';
    </script>
  </body>
</html>

Answer 1

由於您未提供任何代碼，請單擊此處以了解它，並獲得有關SVG逐幀動畫的一些不錯的教程。 我永遠不會推薦它，只是因為您在每個幀上都有一個基於向量的元素，其錨點，曲線等的行為彼此獨立。 因此，只有一小部分要進行動畫處理，它將不得不一遍又一遍地加載所有點，顏色。 您可以創建動畫的SVG。

KineticJS：如何將SVG Sprite與KineticJS Sprites一起使用？

問題描述

1 個解決方案

解決方案1
1 2014-07-15 14:31:10

KineticJS：如何將SVG Sprite與KineticJS Sprites一起使用？

問題描述

1 個解決方案

解決方案1 1 2014-07-15 14:31:10

解決方案1
1 2014-07-15 14:31:10