关闭

用JavaScript 实现酷炫的粒子追踪动画

时间: 2020-02-24阅读: 627标签: 动画

你是否曾经想过用花哨的、闪闪发光的粒子动画分吸引你网站用户的注意力,而同时又在后台加载一些数据呢?幸运的是,没有必要用诸如 Three.js 之类的 3D 库进行非常深入的图形编程。相反,你需要的是 cssJavaScript 的一些基本知识以及轻便的动画库(例如 anime.js)。最后我们应该得到以下结果


Anime.Js 的下载和集成

你可以从官方 GitHub 下载 anime.js 库。从lib/文件夹下载文件anime.js 或 anime.min.js

在我的例子中,html 部分如下所示:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Anime.js Particles</title>
  <!--or use anime.min.js-->
  <script src="anime.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="anime-container">
</div>
<script src="script.js"></script>
</body>
</html>

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/

在动画开始之前,所有粒子都必须是不可见的。所以我将添加:

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/

动画大小

彗星踪迹出现时应该比消失前更大。为此,我让粒子在 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/

你可以通过简单地调整这些值来根据自己的喜好修改动画。关于最后的修饰有一个小技巧:现在我们熟悉了基于函数的参数,可以稍微改善动画的透明度:

opacity: [
    { value: 1, duration: 50, delay: anime.stagger(2) },
    { value: 0, duration: function(){return anime.random(500,1500);}}
],

现在分别为每个粒子设置粒子消失之前的持续时间。这能够使动画在视觉上更加精致。

我建议你访问 CodePen,在这里你可以看到更多令人印象深刻的例子。


本文首发微信公众号:前端先锋

作者:Anna Prenzel
翻译:疯狂的技术
原文:https://www.smashingmagazine.com/2020/04/particle-trail-animation-javascript/
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/8738

Vue.js动画笔记_vue实现动画效果

Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。

为何 Canvas 内元素动画总是在颤抖?

在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的

Vue 中 JS 动画与 Velocity.js 的结合

前面学习了用css实现动画效果,那 Vue 中能不能用js实现动画效果呢?其实 Vue 提供了很多动画钩子,入场动画钩子函数有before-enter、enter、after-enter,与入场动画对应的出场动画钩子函数有before-leave、leave、after-leave。它们的用法与入场动画用法一样

深入理解requestAnimationFrame的动画循环

requestAnimationFrame解决了浏览器不知道javascript动画什么时候开始、不知道最佳循环间隔时间的问题。它是跟着浏览器的绘制走的,如果浏览器绘制间隔是16.7ms

使用jquery封装的动画脚本(无动画、css3动画、js动画)

自己封装好的showhide.js包含无动画、css3动画、js动画,包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlideUpDown(淡入淡出+上下滑动) fadeSlideLeftRight (淡入淡出+左右滑动)

CSS中过渡与动画的区别有哪些?

过度是在动画基础上增加的,作用是如何实施动画,比如一个div从一个地方到另一个地方,设置时长,是匀速前进,或者从快到慢等,这种就是过渡。

CSS动画优雅降级的简单总结

可以看到动画在IE8(这里主要讨论IE)及以下完全不支持,IE9由于只支持transform(非transform3d),主要功臣自然是translate3d,因为IE9不支持自然会忽略掉,所以translate也在IE下不起效了

CSS 动画分类

CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画;然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes,keyframes主要是从keyframes规则和keyframes属性来介绍

css3 过渡和动画

在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到100px的位置,有时候我们为了达到某种视觉效果

CSS3动画transform、transition和animation的区别

CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation。transform:描述了元素的静态样式,本身不会呈现动画效果,transition样式过渡,从一种效果逐渐改变为另一种效果,animation动画 由@keyframes来描述每一帧的样式

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!