流畅的 KineticJS 动画，可控的速度

Posted 2023-03-24

【中文标题】流畅的 KineticJS 动画，可控的速度

【英文标题】：Smooth KineticJS animation, controlled speed

【发布时间】：2013-05-03 16:13:06

【问题描述】：

为了好玩，我正在 KineticJS 中创建一个简单的平面动画。

目前动画运行有点生涩，虽然我不知道如何开始，但我希望有一些缓动或补间。

谁能帮我算算？

<div id="container"></div>

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.5.0-beta.js"></script>

<script defer="defer">
  var stage = new Kinetic.Stage(
    container: 'container',
    width: 870,
    height: 392
  );

  var layer = new Kinetic.Layer();

  var xPos = 0;
  var yPos = 126;
  var growthFactorX = 6;
  var growthFactorY = 2.6; 
  var growthFactorP = 3; 
  var planeRotation = 30;     

  // dashed line
  var trail = new Kinetic.Line(
    points: [x: xPos,y: yPos],
    stroke: 'white',
    strokeWidth: 2,
    lineJoin: 'round',
    dashArray: [6, 5]
  );

  var imageObj = new Image();
  imageObj.src = '/assets/img/plane.png'; 
  var plane = new Kinetic.Image(
    x: xPos,
    y: yPos - 15,
    width: 54,
    height: 30
  ); 
  imageObj.onload = function() 

    plane.setImage(imageObj);
    layer.add(plane);
    stage.add(layer);
  ;
  plane.rotateDeg( planeRotation );


  layer.add(trail);
  stage.add(layer);

  var anim = new Kinetic.Animation(function(frame) 


        if( xPos < 500 ) 

            xPos = growthFactorX + xPos; // adds 3 to xPos on each loop

            if( xPos > 400 ) 

                yPos = yPos - growthFactorY;

                if( plane.getRotationDeg() > 0 )
                    plane.rotateDeg( (-growthFactorP) ) ;
            

            var curPoints = trail.getPoints();
            var newPoints = [x: xPos, y: yPos];

            trail.setPoints(curPoints.concat(newPoints));
            plane.setX(xPos + 10);
            plane.setY(yPos - 35);
        
        else 

            anim.stop();
        
  , layer);

  anim.start();      
</script>

【问题讨论】：

jsfiddle 用于戏剧：jsfiddle.net/lavrton/ZxrCv

可以尝试使用补间库，例如：html5canvastutorials.com/kineticjs/…

【参考方案1】：

我为你创造了一个小提琴，

并且已经改变了这个因素，我觉得它看起来很流畅，如果有任何规范，请告诉我

  var xPos = 0;
  var yPos = 126;
  var growthFactorX = 5;
  var growthFactorY = 2; 
  var growthFactorP = 1; 
  var planeRotation = 30;    

fiddle link

我希望这样做:)