作者:Anna Prenzel翻译:疯狂的技术宅
原文:https://www.smashingmagazine....
未经允许严禁转载
你是否曾经想过用花哨的、闪闪发光的粒子动画分吸引你网站用户的注意力,而同时又在后台加载一些数据呢?幸运的是,没有必要用诸如 Three.js 之类的 3D 库进行非常深入的图形编程。相反,你需要的是 CSS 和 JavaScript 的一些基本知识以及轻便的动画库(例如 anime.js)。最后我们应该得到以下结果:
Anime.Js 的下载和集成
你可以从官方 GitHub 下载 anime.js 库。从lib/
文件夹下载文件anime.js 或 anime.min.js。
在我的例子中,HTML 部分如下所示:
Anime.js Particles
CSS 文件 styles.css 用来定义页面和每个粒子的背景色。位置是必需要设置的,稍后我们可以用 CSS 属性 left
和 top
在页面上自由放置粒子。
body {
background-color: hsl(30, 3%, 14%);
}
.anime-container {
position: relative;
}
.anime-container .dot{
position: absolute;
/*draw particles as circles:*/
border-radius: 50%;
background-color: hsl(60, 100%, 80%);
}
生成粒子
顾名思义,粒子动画由许多遵循特定模式在空间中移动的小粒子组成。在动画开始之前,同时生成所有粒子。
对于以下解释,anime.js的官方文档 对你非常有用。
在我的例子中,粒子位于阿基米德螺旋上。屏幕上粒子的 x 和 y 位置(在 CSS 中又称为 left
和 top
)是根据其在螺旋上的位置 angle 来计算的:
x=a*angle*cos(angle)
y=a*angle*sin(angle)
角度以及螺旋的长度由参数 l
确定。通过参数 a
,你可以控制螺旋线的密度。
var container = document.querySelector(".anime-container");
var n = 15;
var a = 20;
var l = 110;
for (var i = 0; i <= l; i += 1) {
var angle = 0.1 * i;
//shift the particles to the center of the window
//by adding half of the screen width and screen height
var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;
var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;
var dot = document.createElement("div");
dot.classList.add("dot");
container.appendChild(dot);
var size = 5;
dot.style.width = size + "px";
dot.style.height = size + "px";
dot.style.left = x + "px";
dot.style.top = y + "px";
dot.style.backgroundColor = "hsl(60, 100%, 80%)";
}
}
这样,我们得到一个螺旋,每个位置只有一个粒子,但是只有在每个位置生成一个以上的粒子时,才能实现真正的拖尾效果。为了使轨迹显得浓密,各个粒子的位置必须略有不同。动画库为此提供了实用的辅助函数:
anime.random(minValue, maxValue);
粒子的大小也随机变化:
for (var i = 0; i <= l; i += 1) {
var angle = 0.1 * i;
//shift particles to the center of the window
//by adding half of the screen width and screen height
var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;
var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;
var n = 15;
//create n particles for each angle
for (var j = 0; j < n; j++) {
var dot = document.createElement("div");
dot.classList.add("dot");
container.appendChild(dot);
var size = anime.random(5, 10);
dot.style.width = size + "px";
dot.style.height = size + "px";
dot.style.left = x + anime.random(-15, 15) + "px";
dot.style.top = y + anime.random(-15, 15) + "px";
dot.style.backgroundColor = "hsl(60, 100%, 80%)";
}
}
在这里,你可以尝试中间结果:
请参阅 CodePen 上的 js 粒子动画 wip:https://codepen.io/smashingma...。
在动画开始之前,所有粒子都必须是不可见的。所以我将添加:
dot.style.opacity = "0";
粒子动画
动画的基本设置
我的动画的基本设置如下:
- 动画要连续重复(loop:true),
- 移动是线性的(但是你可以尝试不同的值),
- 目标是所有带有 "dot" 类的元素。
anime({
loop: true,
easing: "linear",
targets: document.querySelectorAll(".dot"),
});
在下一步中,我将为目标的各种 CSS 属性设置动画。 CSS 动画的基本步骤可以在 anime.js 文档中属性相关的章节中找到。
动画效果
这是我们第一个属性动画的样子,其中所有粒子在 50 毫秒内逐渐可见:
anime({
loop: true,
easing: "linear",
targets: document.querySelectorAll(".dot"),
opacity: { value: 1, duration: 50}
});
现在,我将揭示导致粒子螺旋运动的技巧!想法是使粒子以一定的时间延迟(例如,以 2 ms 的间隔)可见。首先使螺旋中间的粒子可见,然后从内到外的使所有其他粒子可见。 anime.js 的 stagger 函数非常适合此功能。我认为,交错是该库的最大优势之一,它使你可以实现出色的效果。
opacity: { value: 1, duration: 50, delay: anime.stagger(2) }
为了产生飞行轨迹的错觉,粒子一旦出现就必须开始缓慢消失。幸运的是 anime.js 提供了属性的关键帧符号:
opacity: [
{ value: 1, duration: 50, delay: anime.stagger(2) },
{ value: 0, duration: 1200}
],
在这里,你可以看到中间结果:
请参阅 CodePen 上的 js 粒子动画 wip 2:https://codepen.io/smashingma...。
动画大小
彗星踪迹出现时应该比消失前更大。为此,我让粒子在 500ms 内缩小到 2px 的直径。选择与不透明度动画相同的时间延迟很重要,这样每个粒子只有在出现后才开始收缩:
width: { value: 2, duration: 500, delay: anime.stagger(2) },
height: { value: 2, duration: 500, delay: anime.stagger(2) },
个体运动
粒子动画的典型特征是粒子的独立性、不可预测的行为。最后,我通过沿 x
和 y
方向的运动将粒子带入动画:
translateX: {
value: function() {
return anime.random(-30, 30);
},
duration: 1500,
delay: anime.stagger(2)
},
translateY: {
value: function() {
return anime.random(-30, 30);
},
duration: 1500,
delay: anime.stagger(2)
}
同样,重要的是运动开始的时间应该与粒子的出现有相同的时间延迟。
另外在这种情况下,绝对有必要用 functions
来计算 translateX
和 translateY
的值。在这里,我们将参数用作基于函数的参数,其值是针对每个目标单所独确定的。否则所有目标移动相同的量都会是相同的(尽管是随机确定的)。
最后的想法
你可以在此处查看最终结果:
请参阅查看 CodePen 上的 js 动画粒子:https://codepen.io/smashingma...。
你可以通过简单地调整这些值来根据自己的喜好修改动画。关于最后的修饰有一个小技巧:现在我们熟悉了基于函数的参数,可以稍微改善动画的透明度:
opacity: [
{ value: 1, duration: 50, delay: anime.stagger(2) },
{ value: 0, duration: function(){return anime.random(500,1500);}}
],
现在分别为每个粒子设置粒子消失之前的持续时间。这能够使动画在视觉上更加精致。
我建议你访问 CodePen,在这里你可以看到更多令人印象深刻的例子。
本文首发微信公众号:前端先锋
欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章:
- 深入理解Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13个帮你提高开发效率的现代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的?从调用栈到Promise你需要知道的一切
- WebSocket实战:在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么?
- 30分钟用Node.js构建一个API服务器
- Javascript的对象拷贝
- 程序员30岁前月薪达不到30K,该何去何从
- 14个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把HTML转成PDF的4个方案及实现