Question

我正在尝试复制此效果，如下所示： https://dribbble.com/shots/1783699-Blocks?list=users&offset=2

我在3d空间中有一堆立方体，沿着x和z轴定位有环 - 到目前为止一直很好。我能够以这样的特定顺序获得动画的悬念。我想我应该循环遍历它们并根据它的位置以不同的时间沿着Y轴缩放它们中的每一个？

其次，我想我应该使用setInterval（）来触发动画序列，但我不知道如何实现它......

我现在有了这个代码来循环框并缩放它们：

var r = -1;
(function f(){
    r = (r + 1) % cubes.length;
    cubes[r].scale.y += cubes[r].vy;
    if (cubes[r].scale.y >= 1.4) {
        cubes[r].vy *= -1;
}
setInterval(f, 200);

但是这并没有完成这种波浪形，一步一步地缩放......

这是我目前所拥有的链接： http://codepen.io/gbnikolov/pen/NPGqqq

Answer 1

您链接的演示中的效果主要表现为正弦波传播。如果您想实现这一目标，您将需要根据时间和空间参数缩放与正弦波相关的立方体。

我们将从时间开始。我建议单独执行这些步骤，这样您就可以看到它们如何组合以产生最终结果。 requestAnimationFrame回调采用单个参数，即高分辨率动画时间。我们可以简单地将其应用于立方体高度尺度：

function drawFrame(ts) {
    requestAnimationFrame(drawFrame);
    render.render(scene, camera);
    cubes.forEach(function(c) {
        c.scale.y = Math.sin(ts/500) + 1;
    });
}

请注意，我们将时间戳ts除以500;这允许您调整动画的速度。时间戳以毫秒为单位，因此除以500表示它将每3.14（pi）秒完成一次循环。如果你想在N秒内完成，你将除以500 * pi并乘以N.

我们还在正弦波上加1，使其所有值都为正（通常，其范围为[-1,1];加1使其范围为[0,2]）。

现在我们可以开始＃34; wave＆＃34;通过向正弦函数添加一个维度组件。我们将随意开始使用x维：

c.scale.y = Math.sin(ts/500 + c.position.x/4.95) + 1;

我通过反复试验找到了4.95;通过调整该数字，您可以确定＆＃34;分辨率＆＃34;波浪数字越大意味着波浪越平滑。

然后，最后，我添加了z维度：

c.scale.y = Math.sin(ts/500 + c.position.x/4.95 + c.position.z/12) + 1;

再次，我玩了z-divider，直到找到一个看起来不错的参数。

此处使用此解决方案修改了CodePen：

http://codepen.io/anon/pen/JoYdGv

使用three.js按顺序制作立方体动画

1 个答案: