当前位置:主页 > JavsScript库 > 动画 >

JavaScript的交互式粒子动画 - JParticles
栏目分类:动画   发布日期:2021-08-28   浏览次数:

一个无依赖的 JavaScript 库,用于在Canvas对光标做出反应的元素上创建动画、交互式、可配置的粒子动画。

动画包括:

  • 粒子

  • 海浪

  • 雪落

  • 线

  • 液体装载机

安装:

$ npm install JParticles

使用:

1. 导入 JParticles。

<!-- All In One -->
<script src="/path/to/browser/jparticles.all.js"></script>
<!-- OR... -->
<script src="/path/to/browser/jparticles.base.js"></script>
<script src="/path/to/browser/line.js"></script>
<script src="/path/to/browser/particle.js"></script>
<script src="/path/to/browser/snow.js"></script>
<script src="/path/to/browser/wave.js"></script>
<script src="/path/to/browser/wave-loading.js"></script>
// 作为 Vue 组件
import { Particle } from 'jparticles'
export default {
  mounted() {
    new Particle('#demo')
  }
}
// 作为 React 组件
import { Particle } from 'jparticles'
class Example extends React.Component {
  componentDidMount() {
    new Particle('#demo')
  }
  render() {
    return <div id="demo"></div>
  }
}

2. 创建一个 DIV 容器来放置粒子动画。

<div id="demo" style="width: 400px; height: 250px;"></div>

3. 创建粒子效果。

new JParticles.particle('#demo', {
 
    // opacity: 0 ~ 1
    opacity: 1,
 
    // 'red' or ['red', 'blue', 'green']
    color: [],
 
    // 自动调整大小适应屏幕
    resize: true,
 
    // 粒子数
    num: 0.12,
 
    // 最大半径
    maxR: 2.4,
 
    // 最小半径
    minR: 0.6,
 
    // 最大速度
    maxSpeed: 1,
 
    // 最小速度
    minSpeed: 0.1,
 
    // 连接线选项
    proximity: 0.2,
    range: 0.2,
 
    // 线宽
    lineWidth: 0.2,
 
    // 蜘蛛或立方体
    lineShape: 'spider',
 
    // null = 当前画布元素
    eventElem: null,
 
    // 启用视差效果
    parallax: false,
 
    // 视差层
    parallaxLayer: [1, 2, 3],
 
    // 视差强度
    parallaxStrength: 3,
     
});

4. 创建波浪动画。

new JParticles.Wave('#demo', {
 
    // opacity: 0 ~ 1
    opacity: 1,
 
    // 'red' or ['red', 'blue', 'green']
    color: [],
 
    // 自动调整大小适应屏幕
    resize: true,
 
    // 波浪数
    num: 3,
 
    // 绘制线条
    line: true,
 
    // 线条颜色
    lineColor: [
      'rgba(0, 190, 112, 0.5)',
      'rgba(0, 190, 112, 0.7)',
      'rgba(0, 190, 112, 0.9)',
    ],
 
    // 宽度
    lineWidth: [0.5, 0.7, 0.9],
 
    // 填充背景
    fill: false,
 
    // 背景颜色
    fillColor: [],
 
    // offset
    offsetLeft: [2, 1, 0],
    offsetTop: 0.75,
 
    // 波峰高度
    crestHeight: [10, 14, 18],
 
    // 波峰数量
    crestCount: 2,
 
    // 动画速度
    speed: 0.1,
     
})

5创建一个下雪的效果。

new JParticles.Snow('#demo', {
 
    // opacity: 0 ~ 1
    opacity: 1,
 
    // 'red' or ['red', 'blue', 'green']
    color: [],
 
    // 自动调整大小适应屏幕
    resize: true,
 
    // 雪花数量
    num: 6,
 
    // 颜色
    color: '#fff',
 
    // 最大半径
    maxR: 2.4,
 
    // 最小半径
    minR: 0.6,
 
    // 最大速度
    maxSpeed: 1,
 
    // 最小速度
    minSpeed: 0.1,
 
    // 动画持续时间以毫秒为单位
    duration: 200,
 
    // 随机改变下落
    swing: true,
    swingInterval: 2000,
    swingProbability: 0.06,
 
    // 自定义形状
    shape: [
      'triangle', 'circle', 'star', 'star:4:0.5',
      'gift.png'
    ],
 
})

6. 创建线条动画。

new JParticles.Line('#demo', {
 
    // opacity: 0 ~ 1
    opacity: 1,
 
    // 'red' 或 ['red', 'blue', 'green']
    color: [],
 
    // 自动调整大小适应屏幕
    resize: true,
 
    // 行数
    num: 6,
 
    // 最大宽度
    maxWidth: 2,
 
    // 最小宽度
    minWidth: 1,
 
    // 最大速度
    maxSpeed: 3,
 
    // 最小速度
    minSpeed: 1,
 
    // 最大度数
    maxDegree: 90,
 
    // 最小度数
    minDegree: 80,
 
    // 单击时创建新行
    createOnClick: true,
 
    // 单击时创建的行数
    numberOfCreations: 3,
 
    // 离开画布时移除行
    removeOnOverflow: true,
    overflowCompensation: 20, // in px
 
    // 要保留的行数
    reservedLines: 6,
 
})

7. 创建一个液体加载动画。

new JParticles.WaveLoading('#demo', {
 
    // opacity: 0 ~ 1
    opacity: 1,
 
    // 'red' 或 ['red', 'blue', 'green']
    color: [],
 
    // 自动调整大小适应屏幕
    resize: true,
 
    // 波浪数
    num: 1,
 
    // 字体样式
    font: 'normal 400 16px Arial',
 
    // 字体颜色
    textColor: '#333',
 
    // 加载文本
    textFormatter: 'loading...%d%',
 
    // 画线
    line: false,
 
    // 填充背景
    fill: true,
 
    // 背景颜色
    fillColor: [],
 
    // offset
    offsetLeft: 0,
 
    // 峰高
    crestHeight: 4,
 
    // 波峰数量
    crestCount: 1,
 
    // 动画
    duration: 5000,
     
    // 线性或摆动
    easing: 'swing',
 
})

8. API 方法。

const instance = new JParticles.Particle('#demo');
// 启动动画
instance.open()
// 暂停动画
instance.pause()

9. 实例销毁时触发一个函数。

instance.onDestroy(() => {
  // 做某事
})


官方网站:https://jparticles.js.org/

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库