Html5 canvas 在konvajs中设置舞台滚动动画_Html5 Canvas_Konvajs

Html5 canvas 在konvajs中设置舞台滚动动画

html5-canvas

Html5 canvas 在konvajs中设置舞台滚动动画,html5-canvas,konvajs,Html5 Canvas,Konvajs,我正在寻找一种方法，以编程方式设置舞台滚动动画。下面是我总结的一个例子（看看Konvajs的例子和文档）：正如您所看到的，舞台是可拖动的，六边形运动是动画化的，因此它会从视口向右移动。动画停止后，可以通过向左拖动舞台来找到它我要寻找的是，舞台/视口也可以沿着六边形滚动，这样当六边形停止时，舞台就位于视口的中心有没有办法做到这一点以下是jsbin中的代码： <!DOCTYPE html> <html> <head> <script sr

我正在寻找一种方法，以编程方式设置舞台滚动动画。下面是我总结的一个例子（看看Konvajs的例子和文档）：

正如您所看到的，舞台是可拖动的，六边形运动是动画化的，因此它会从视口向右移动。动画停止后，可以通过向左拖动舞台来找到它

我要寻找的是，舞台/视口也可以沿着六边形滚动，这样当六边形停止时，舞台就位于视口的中心

有没有办法做到这一点

以下是jsbin中的代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.1.0/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Animate Position Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
        draggable: true,
      });

      var layer = new Konva.Layer();

      var hexagon = new Konva.RegularPolygon({
        x: stage.width() / 2,
        y: stage.height() / 2,
        sides: 6,
        radius: 20,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      });

      layer.add(hexagon);
      stage.add(layer);

      layer.draw();

      var velocity = 500;
      var anim = new Konva.Animation(function(frame){
        var dist = velocity * (frame.timeDiff / 1000);
        if (stage.x() > stage.width() * 0.75) {
          anim.stop();
        }
        stage.move({x: dist, y: 0});
      }, layer);
      anim.start();
    </script>
  </body>
</html>


Konva动画位置演示
身体{
保证金：0；
填充：0；
溢出：隐藏；
背景色：#f0；
}
变量宽度=window.innerWidth；
var height=window.innerHeight；
var阶段=新Konva.阶段({
容器：'容器'，
宽度：宽度，
高度:高度,，
真的，
});
var layer=新Konva.layer（）；
var hexagon=新Konva.RegularPolygon({
x:stage.width（）/2，
y:舞台高度（）/2，
双方:6,，
半径：20，
填充：“红色”，
笔画：“黑色”，
冲程宽度：4
});
层。添加（六边形）；
阶段。添加（层）；
layer.draw（）；
var速度=500；
var anim=新的Konva.Animation（函数（帧）{
var dist=速度*（帧时间差/1000）；
如果（stage.x（）>stage.width（）*0.75）{
动画停止（）；
}
stage.move（{x:dist，y:0}）；
}，层）；
anim.start（）；

谢谢， K

您可以使用

stage.to（）

方法在主动画结束时制作一个简单的tween：

var速度=500；
var anim=新的Konva.Animation（函数（帧）{
var dist=速度*（帧时间差/1000）；
如果（stage.x（）>stage.width（）*0.75）{
动画停止（）；
stage.to（{x:0}）；
}
stage.move（{x:dist，y:0}）；
//stage.draw（）；
}，层）；

演示：

太棒了！谢谢医生说“tween params”。在哪里可以找到可以传递的参数的完整列表？或者，关联的示例是否显示了它们？