1

我最近一直在学习如何使用 two.js，我想围绕另一个物体（比如行星）绕一个圆轨道。由于它需要从环绕它的物体后面经过，我试图在它移动时动态地改变圆的大小，以创造深度的错觉。我看到另一个关于使用矩阵在 two.js 中更改大小的溢出问题，并尝试在此处应用它，但我无法使大小更改与轨道运动同步。我将不胜感激任何帮助。

JS bin（因为它需要两个.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>
4

1 回答 1

0

您的圈子不会平滑地扩大和缩小，因为浏览器无法以您需要的速度呈现它。

这是来自Two.js.org：

two.play()以 60fps 的速度通话two.update()。但是，如果每帧要渲染的内容太多，这个速度会变慢

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

性能不佳 - SVG 动画中的答案回顾了一些提高 two.js 性能的策略。此外，您可以使用带有 @keystrokes 的 CSS 动画重新创建它以获得相同的动画。

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

希望有帮助！

于 2019-01-02T21:01:47.803 回答