Question

我最近一直在学习如何使用two.js，我想围绕另一个物体做一个圆形轨道，就像行星一样。因为它需要在绕其轨道运行的对象后面传递，所以我试图在它移动时动态地改变圆的大小以创建深度的幻觉。我看到另一个关于使用矩阵在two.js中改变大小的溢出问题，并试图在这里应用它但是我无法获得大小更改以匹配与轨道运动的同步。我将不胜感激任何帮助。

JS bin（因为它需要two.js库，这一开始不会产生任何东西，但我为了方便任何想要帮助的人而制作它）：https://jsbin.com/rugakojivu/edit?html,output

<html>
<head>
<script src = "two.js"></script>
</head>
<body>
<div id = "frame"></div>
<script>
var el = document.getElementById("frame");
var two = new Two({fullscreen:true}).appendTo(el);
var bigAngle = 0,
smallAngle  = 0,
distance   = 10,
radius     = 50,
orbit      = 200,
orbits     = two.makeGroup();
var  offset = 300;

function getPositions(angle, orbit) {
return {
    x: Math.cos(angle * Math.PI / 180) * orbit,
    y: Math.sin(angle * Math.PI / 180) * orbit
};
}

var pos = getPositions(bigAngle,orbit),
big = two.makeCircle(pos.x+offset,pos.y+offset,radius);

big.stroke="#123456";
big.linewidth=7;
big.fill="#194878";

big._matrix.manual=true;

two.bind("update",function(frameCount){
  var pos = getPositions(bigAngle++,orbit);
  big.translation.x=pos.x+offset;
  big.translation.y=pos.y+offset;
});

  two.bind("update",function(frameCount,timeDelta){
  var sx=Math.sin(frameCount/200);
  big._matrix
    .identity()
    .translate(big.translation.x, big.translation.y)
    .rotate(big.rotation)
    .scale(sx);

    });
    two.play();


    </script>
    </body>
    </html>

Answer 1

您的圈子无法平滑地增长和缩小，因为浏览器无法按照您的需要快速渲染它。

这来自Two.js.org：

two.play()以60fps的速度呼叫two.update()。但是，此速率将如果每帧要渲染的内容过多，则会减慢速度

无论您使用frameCount还是timeDelta，都会发生这种情况。

Poor performance - SVG animations中的答案回顾了一些提高two.js性能的策略。另外，您可以使用带有@keystrokes的CSS动画重新创建该动画，以获取相同的动画。

我认为这与您的工作非常接近： https://jsfiddle.net/merhoo/skmz279w/1/

希望有帮助！

如何在two.js中创建深度

1 个答案: