刘志龙

2018-06-03 23:07

星星穿梭动画简单实现

本文作者: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})`;
}

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

1条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。