如何恢復動畫Kineticjs畫布？

Question

停止它後，我遇到了恢復動畫的問題。任何建議？我使用kineticjs使元素沿着路徑運行，在達到結尾後，動畫停止2秒，然後再次開始。

這裏我的代碼：

var stage = new Kinetic.Stage({ 
       container: 'canvas', 
       height: 484, 
       width: 478 
      }); 

      var layer = new Kinetic.Layer(); 
      stage.add(layer); 

      var img = new Image(); 
      img.src = 'images/ani/bullet_blue.png'; 

      var circle = new Image(); 
      circle.src = 'images/ani/1.png'; 

      var shapeCircle = new Kinetic.Image({ 
       x: 10, 
       y: 10, 
       image: circle, 
       width: circle.width, 
       height: circle.height, 
       offset: { 
        x: 0, 
        y: 0 
       } 
      }); 

      layer.add(shapeCircle); 
      layer.draw(); 

      function animation(points, shape, duration, loop, callback) { 
       layer.add(shape); 
       window.anim = new Kinetic.Animation(function (frame) { 
        var time = frame.time, timeDiff = frame.timeDiff, frameRate = frame.frameRate; 

        var percent = time/duration, scale = 0.5, opacity = 0; 

        if (percent < 0.05 || percent > 0.95) opacity = 0; 
        else opacity = 1; 

        // scale calculate 
        if (percent < 0.5) { 
         scale += percent 
        } 
        else if (percent > 0.5) { 
         scale = 1 - (percent - 0.5) 
        } 

        if (percent > 1) { 
         anim.stop(); 
         percent = 0; 
         setTimeout(function() { anim.start(); }, 500); 

        } else { 
         var pos = Math.ceil(percent * points.length); 
         pos = pos > (points.length - 1) ? (points.length - 1) : pos; 
         if (pos == points.length - 1) anim.stop(); 
         shape.setScale(scale, scale); 
         shape.setOpacity(opacity); 
         shape.setPosition(points[pos].x, points[pos].y); 
        } 
       }, layer); 
       anim.start(); 

      } 

      animation(points1, new Kinetic.Image({ 
       x: points1[0].x, 
       y: points1[0].y, 
       image: img, 
       width: img.width, 
       height: img.height, 
       opacity: 0, 
       scaleX: 0.5, 
       scaleY: 0.5, 
       offset: { 
        x: 15, 
        y: 30 
       } 
      }), 2000); 

Answer 1

如果你想重複動畫，你可以考慮，而不是補間。

當補間完成時，它會觸發完成的事件。在完成處理程序，您可以：

• 重置補間使用tween.reset起始位置，
• 啓動一個定時器使用SetTimer的等待2秒，
• 定時器觸發時，重新啓動吐溫使用tween.start。