Гладкая анимация в kinetic.js (html5 canvas)

Question

Мне нужно лучшее понимание анимации kinetic.js. Я использовал учебник, найденный http://www.html5canvastutorials.com/kineticjs/html5-canvas-stop-animation-with-kineticjs/. Я играл с кодом и сделал свою анимацию, установив мой прямоугольник в положение x 100. Мой вопрос в том, как сделать движение прямоугольника плавным переходом. Мне не удалось заставить мою голову обмотать объяснение анимации kinetic.js с html5canvastutorials.com. вот мой код.

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 960, 
    height: 480 
}); 
var layer = new Kinetic.Layer(); 

var block = new Kinetic.Rect({ 
    x: 100, 
    y: 465, 
    width: 14, 
    height: 14, 
    stroke: 'black', 
    strokeWidth: 1 
}); 

layer.add(block); 
stage.add(layer); 

var moveLeft = new Kinetic.Animation(function(frame) { 
    block.setX(1); 
}, layer); 

var moveRight = new Kinetic.Animation(function(frame) { 
    block.setX(100); 
}, layer); 

document.addEventListener('keydown', function(e){ 
    switch(e.keyCode) { 
     case 37: 
      moveLeft.start(); 
      break; 
     case 39: 
      moveRight.start(); 
      break; 
     default: 
      moveLeft.stop(); 
      moveRight.stop(); 
      break; 
    } 
}); 

Может кто-нибудь, пожалуйста, дайте мне пример того, как создавать плавные анимации и отличное объяснение того, как повторить процесс. Не знаете, как работает синхронизация кадров.

Answer 1

Я думаю, вы должны смотреть на это изменение:

API Изменения новый класс твин. Старый класс перехода вышел на пенсию. Для продвинутых подростков, таких как анимация движения вдоль кривых или построение временных графиков, KineticJS рекомендует GreenSock Animation Platform, которая легко интегрируется.

Answer 2

Для простых подростков вы можете использовать встроенный класс Tween. Вот пример:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/