星星穿梭动画简单实现

本文作者：IMWeb 刘志龙 原文出处：IMWeb社区 未经同意，禁止转载

最近做一个动画 demo，其中有一个场景是要做星星穿梭动画。类似下图这样。

就是图中类似飞出来的一个个白点，看起来像是不断的有星星往外飞这样一个效果。

动画效果比较简单，简单说下实现吧。

首先，我们把动画简单化，实现一个星星往外飞的效果。我们用矩形来表示一个星星（当然，这里可以用图片之类的，这里简单模拟）

在 canvas 上画一个矩形很简单，就不细说了。就是调用一下 filleRect(x, y, width, height) 就可以了。

画好矩形之后，我们观察最后的动画效果。星星是从中间往外飞的，怎么实现一个往外飞的轨迹呢。毫无疑问，我们现在的重点就是找到一个数学公式，来表示随着时间x, y 两个值的变化。

首先，我们假定初始位置为 Star 的位置，以及中心位置是已知的（因为屏幕宽高知道）。如下图所示：

我们现在要做的很简单，就是找到 star 和 放大的 star 的关系。找到了这个关系，就能模拟出轨迹出来了。

尝试坐辅助线，如图所示：

两个蓝色的代表两个星星。根据高中数学我们可以轻松的发现这里面有多个相似三角形。根据相似三角形的定律可以推导出这么一个公式：

star 的初始值我们是一开始生成的，newStar 的宽度我们也可以根据自己需要的效果定义好。这样，newStar.x 的值就出来了。同理，可得 newStar.y 。

根据这个公式，再使用我们再熟悉不过的requestAnimationFrame，我们就可以把一个矩形往外飞的动画画出来了，效果类似这样：

从一个星星到多个星星的实现很简单，一个循环 + 随机位置 就搞定了。这里就不细说了，直接看代码吧。可以用类似 如下的代码简单实现：

 for (let i = 0; i < numStars; i++) {
     star = stars[i];

     let pixelX = (star.x - centerX) * (focalLength / star.z);
     pixelX += centerX;
     let pixelY = (star.y - centerY) * (focalLength / star.z);
     pixelY += centerY;
     pixelRadius = 1 * (focalLength / star.z);

     c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
     c.fillStyle = `rgba(255, 255, 255, ${star.o})`;
}

这样，就简单实现我们想要的星星穿梭效果啦~