gsap实现图形粒子变换动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：gsap实现图形粒子变换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">



    <style>
:root {
        --width: 600;
        --height: 500;
        --background: #87CE01;
    }

        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            color: white;
            font-family: sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--background);
            position: relative;
        }

        #container canvas {
            width: calc(var(--width) *1px);
            height: calc(var(--height) *1px);
        }

        .gsap-3-logo {
            width: 100px;
            position: fixed;
            bottom: 8px;
            right: 60px;
            z-index: 100;
        }
    </style>




    <style>
        .sg {
            width: 35px;
            height: 35px;
            position: fixed;
            bottom: 10px;
            right: 10px;
        }

        .sg .eye {
            -webkit-transform: translateX(0px);
            transform: translateX(0px);
        }

        .sg:hover .eye {
            -webkit-transition: -webkit-transform 0.3s ease;
            transition: -webkit-transform 0.3s ease;
            transition: transform 0.3s ease;
            transition: transform 0.3s ease, -webkit-transform 0.3s ease;
            -webkit-transform: translateX(12px);
            transform: translateX(12px);
        }
    </style>
</head>

<body>
    <div id="container">
        <canvas width="750" height="625" style="touch-action: none; cursor: inherit;"></canvas>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MotionPathPlugin.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/PixiPlugin3.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.5.1.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrubGSAPTimeline.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi-filters.js"></script>


    <script >
        function _defineProperty(obj, key, value) {
            if (key in obj) {
                Object.defineProperty(obj, key, {
                    value: value, enumerable: true, configurable: true, writable: true
                });
            } else {
                obj[key] = value;
            }return obj;
        } // set this to true to enable Chris Gannon's timeline scrubber...
        useChrisGannonsScrubber = false;

        gsap.registerPlugin(MotionPathPlugin);

        class PackedParticles
        {















            constructor(element, width, height, count = 100) {
                _defineProperty(this, "particleImages", [{
                    name: 'particle_dot', url: '//repo.bfw.wiki/bfwrepo/image/608378e7e170f.png'
                }, {
                    name: 'particle_hex', url: '//repo.bfw.wiki/bfwrepo/image/608379050cfc3.png'
                }, {
                    name: 'particle_ring', url: '//repo.bfw.wiki/bfwrepo/image/6083791cb94c3.png'
                }, {
                    name: 'particle_hex_ring', url: '//repo.bfw.wiki/bfwrepo/image/6083793469865.png'
                }, {
                    name: 'particle_star', url: '//repo.bfw.wiki/bfwrepo/image/6083794b11fa8.png'
                }]); _defineProperty(this, "shapeImages", [{
                    name: 'shape_G', url: '//repo.bfw.wiki/bfwrepo/image/6083796064b55.png'
                }, {
                    name: 'shape_S', url: '//repo.bfw.wiki/bfwrepo/image/60837972d6bab.png'
                }, {
                    name: 'shape_A', url: '//repo.bfw.wiki/bfwrepo/image/60837984b723e.png'
                }, {
                    name: 'shape_P', url: '//repo.bfw.wiki/bfwrepo/image/608379975cc48.png'
                }, {
                    name: 'shape_3', url: '//repo.bfw.wiki/bfwrepo/image/608379ac2b31d.png'
                }]);
                this.colors = {
                    background: Utils.hexToNumber(Utils.getVar('--background'))
                };

                this.app = new PIXI.Application({
                    width: width,
                    height: height,
                    antialias: false,
                    backgroundColor: this.colors.background,
                    resolution: window.devicePixelRatio || 1
                });

                this.width = width;
                this.height = height;
                this.count = count;
                this.shapes = [];
                this.particles = [];
                this.loader = PIXI.Loader.shared;
                this.html = element;
                this.timeline = new gsap.timeline({
                    repeat: -1
                });
                this.scale = 0.5;
                if (useChrisGannonsScrubber) ScrubGSAPTimeline(this.timeline);
                this.resources = null;
                this.loadImages();
            }

            setResources(resources) {
                this.resources = resources;
                console.log(this.resources);
                this.createApp();
            }

            loadImages() {
                [...new Set(this.particleImages),
                    ...new Set(this.shapeImages)].forEach(item => this.loader.add(item.name, item.url));
                this.loader.load((loader, loaded) => this.setResources(loaded));
            }

            createApp() {
                this.container = new PIXI.Container();
                this.app.stage.addChild(this.container);

                let background = new PIXI.Graphics();
                background.drawRect(0, 0, this.width, this.height);
                background.endFill();
                background.alpha = 0;
                this.container.addChild(background);

                this.container.filters = [
                    new PIXI.filters.AdvancedBloomFilter(0.85)];

                this.prepareShapeTemplates();
            }

            prepareShapeTemplates() {
                this.shapes = this.shapeImages.map((shape) =>
                    {
                        const texture = this.resources[shape.name].texture;
                        const shapeTemplate = new Shape(new PIXI.Sprite(texture), this.app.renderer.plugins.extract, 0.02, 0.03);
                        shapeTemplate.pack(this.count);
                        return shapeTemplate;
                    });

                this.addParticles();
            }

            addParticles() {
                if (this.shapes.length > 0) {
                    for (let i = 0; i < this.count; i++) {
                        let particleShape = this.particleImages[Math.floor(Math.random() * this.particleImages.length)];
                        let sprite = new PIXI.Sprite(this.resources[particleShape.name].texture);

                        sprite.x = this.width / 4 + Math.random() * (this.width / 2);
                        sprite.y = this.height / 4 + Math.random() * (this.height / 2);
                        sprite.scale.set(0);
                        sprite.anchor.set(0.5);
                        sprite.i = i;
                        sprite.rotateSpeed = 0.1 + Math.random() * 0.3;
                        this.container.addChild(sprite);
                        this.particles.push.........完整代码请登录后点击上方下载按钮下载查看