Как создать анимацию масштабирования в Kinetic.js?

Question

У меня есть следующий код, который должен масштабировать фигуру при наведении курсора мыши, а затем масштабировать ее до исходного размера на мыши. У меня есть несколько проблем:

1. Как изменить масштаб?
2. Как завершить анимацию за определенное время?
3. Как сделать 1 и 2 без возникновения сбоев.
4. Когда указатель мыши быстро проходит по форме, некоторые кадры внезапно перескакивают. Как это исправить?

Все, что мне нужно, это форма, которая становится медленнее, когда она затуманивается, а затем возвращается к исходному размеру, когда мышь отсутствует.

<div id="container"></div> 
    <script src="js/kinetic.min.js" charset="utf-8"></script> 
    <script defer="defer" type="text/javascript"> 
     function zoomHex() { 
     } 
     var stage = new Kinetic.Stage({ 
      container: 'container', 
      width: 500, 
      height: 500 
     }); 
     var shapesLayer = new Kinetic.Layer(); 
     var hex = new Kinetic.RegularPolygon({ 
      x: 250, 
      y: 250, 
      sides: 6, 
      radius: 80, 
      fill: '#00D2FF', 
      stroke: '#00D2FF', 
      strokeWidth: 30, 
      lineJoin: 'round' 
     }); 
     var zoomIn = new Kinetic.Animation(function(frame) { 
      var period = 1000; 
      var duration = 1000; 
      zoomAmount = 1; 
      var scale =frame.time/period; 
      hex.setScale(frame.time/period + zoomAmount); 
      if(frame.time > duration) { 
       zoomIn.stop(); 
       this.frame.time = 0; 
      } 
     }, shapesLayer); 
     var zoomOut = new Kinetic.Animation(function(frame) { 
      var period = 1000; 
      var duration = 1000; 
      zoomAmount = 2; 
      hex.setScale(frame.time/period - zoomAmount); 
      if(frame.time > duration) { 
       zoomOut.stop(); 
       this.frame.time = 0; 
      } 
     }, shapesLayer); 
     hex.on('mouseover', function() { 
      zoomIn.start(); 
      //zoomIn.stop(); 
     }); 
     hex.on('mouseleave', function() { 
      zoomOut.start(); 
      //zoomOut.stop(); 
     }); 
     shapesLayer.add(hex); 
     stage.add(shapesLayer); 
    </script> 

Answer 1

Для этой цели я предложил бы использовать Kinetic.Tween вместо Kinetic.Animation

Смотрите этот учебник для основного использования анимации: http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

var tween = new Kinetic.Tween({ 
    node: hex, 
    duration: 1, // <--2) How do I end the animation in a certain time? 
    scaleX: 1.5 // <-- 1) How do I change the scale amount? 
    scaleY: 1.5 // <-- 1) How do I change the scale amount? 
}); 

//3) How do I do 1 and 2 without causing a glitch. 
//4) When the mouse pointer passes over the shape fast, some frames jump suddenly. 
hex.on('mouseover', function() { 
    tween.play(); 
}); 
hex.on('mouseleave', function() { 
    tween.reverse(); 
}); 

Итак, когда вы mouseover шестигранной формы, tween будет играть вперед и показ масштаба до 1.5 (от 1.0, который является шкалой по умолчанию). Когда вы окажетесь mouseleave, твин вернется к исходному состоянию шестнадцатеричной формы.

jsfiddle

Примечание: Технически, вы должны быть в состоянии использовать scale свойство вместо scaleX и scaleY, как это:

var tween = new Kinetic.Tween({ 
    node: hex, 
    duration: 1, //time in seconds 
    scale: 1.5 //should scale both x and y 
}); 

Но по какой-то причине, он не работал меня. Вы можете сделать это, хотя, если хотите.