Angular6使用粒子特效插件particlejs

最新推荐文章于 2024-07-30 14:59:34 发布

kksw1121

最新推荐文章于 2024-07-30 14:59:34 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： angular particlejs 粒子特效插件

本文链接：https://blog.youkuaiyun.com/qq_43225030/article/details/84966346

本文介绍了如何在Angular6项目中使用粒子特效插件particlejs，包括安装angular-particle，模块导入，HTML和Component.ts的配置，以及最终实现的粒子特效截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装angular-particle

npm install angular-particle --save

2.使用该组件的module.ts中导入模块
在这里插入图片描述

3.对应的html中

<particles [params]="myParams" [style]="myStyle" [width]="width" [height]="height"></particles>

4.对应的component.ts中定义如下

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myStyle: object = {};
  myParams: object = {};
  width: number = 100;
  height: number = 100;


  ngOnInit() {
    this.myStyle = {
      'position': 'fixed',
      'width': '100%',
      'height': '100%',
      'z-index': -1,
      'top': 0,
      'left': 0,
      'right': 0,
      'bottom': 0,
      'background-color': '#ccc'
    };

    this.myParams = {
      particles: {
        number: {
          value: 80,
        },
        color: {
          value: '#fff'
        },
        shape: {
          type: 'triangle',
        },
        move:{
          attract:{
            enable:true
          }
        }
      }
    };
}