HTML5 GSAP 会爆炸的雪花 - 踏得网

Exploding Snow 雪花坠落到蛋糕上时，呈现爆炸动画。

html5, gsap, snow

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2746
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var __extends = (this && this.__extends) || function(d, b) {
    for (var p in b)
        if (b.hasOwnProperty(p)) d[p] = b[p];

function __() {
        this.constructor = d;
    }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
console.clear();
var Demo;
(function(Demo) {
    var baseURL = "/uploads/161001/";
    var view = document.querySelector("canvas");
    var vw = window.innerWidth;
    var vh = window.innerHeight;
    //
    // SCENE
    // ===========================================================================
    var Scene = (function() {
        function Scene(assets) {
            var _this = this;
            this.assets = assets;
            this.dirty = false;
            this.vw = window.innerWidth;
            this.vh = window.innerHeight;
            this.snowflakes = [];
            this.explosions = [];
            this.snowflakeTextures = [];
            this.explosionTextures = [];
            this.explosionContainer = new PIXI.Container();
            this.snowflakeContainer = new PIXI.ParticleContainer(10000, {
                position: true,
                rotation: true,
                alpha: true,
                scale: true,
                uvs: false
            });
            this.stage = new PIXI.Container();
            this.renderer = PIXI.autoDetectRenderer(vw, vh, {
                transparent: true,
                view: view
            });
            this.superHero = new SuperHero(this.assets.superHero.texture);
            var baseTexture = assets.snowflakes.texture.baseTexture;
            var sw = baseTexture.width / 5;
            var sh = baseTexture.height;
            for (var i = 0; i < 5; i++) {
                var frame = new PIXI.Rectangle(sw * i, 0, sw, sh);
                var texture = new PIXI.Texture(baseTexture, frame);
                this.snowflakeTextures.push(texture);
            }
            _.times(100, function() {
                TweenLite.delayedCall(_.random(0.1, 8), function() {
                    var texture = _.sample(_this.snowflakeTextures);
                    var snowflake = new Snowflake(texture);
                    _this.snowflakes.push(snowflake);
                    _this.snowflakeContainer.addChild(snowflake);
                });
            });
            for (var i = 0; i < 26; i++) {
                var texture = PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i + 1) + ".png");
                this.explosionTextures.push(texture);
            }
            for (var i = 0; i < 50; i++) {
                var explosion = new Explosion(this.explosionTextures);
                this.explosions.push(explosion);
                this.explosionContainer.addChild(explosion);
            }
            this.stage.addChild(this.superHero);
            this.stage.addChild(this.snowflakeContainer);
            this.stage.addChild(this.explosionContainer);
            window.addEventListener("resize", function() {
                _this.dirty = true;
            });
            TweenLite.ticker.addEventListener("tick", this.render.bind(this));
        }
        Scene.prototype.render = function() {
            var hero = this.superHero;
            var total = this.snowflakes.length;
            for (var i = 0; i < total; i++) {
                var snowflake = this.snowflakes[i];
                if (!snowflake.isActive) {
                    snowflake.init();
                    continue;
                }
                var x = snowflake.x;
                var y = snowflake.y;
                if (hero.containsPoint({
                        x: x,
                        y: y
                    })) {
                    var sx = Math.round(x - hero.x);
                    var sy = Math.round(y - hero.y);
                    var index = (sy * hero.width + sx) * 4;
                    var pixel = hero.imageData[index + 3];
                    if (!!pixel) {
                        TweenMax.killTweensOf(snowflake);
                        snowflake.init();
                        var explosion = this.explosions.shift();
                        explosion.position.set(x, y);
                        explosion.gotoAndPlay(Math.random() * 15);
                        this.explosions.push(explosion);
                    }
                }
            }
            if (this.dirty) {
                this.dirty = false;
                this.resize();
            }
            this.renderer.render(this.stage);
        };
        Scene.prototype.resize = function() {
            vw = window.innerWidth;
            vh = window.innerHeight;
            this.superHero.updatePosition();
            this.renderer.resize(vw, vh);
        };
        return Scene;
    })();
    //
    // SNOWFLAKE
    // ===========================================================================
    var Snowflake = (function(_super) {
        __extends(Snowflake, _super);

function Snowflake(texture) {
            _super.call(this, texture);
            this.isActive = false;
            this.alpha = 0;
            this.anchor.set(0.5);
            this.init();
        }
        Snowflake.prototype.init = function() {
            var _this = this;
            this.isActive = true;
            this.x = _.random(vw + 100);
            this.y = -this.height;
            this.alpha = _.random(0.2, 0.8);
            this.scale.set(_.random(0.4, 0.8));
            TweenMax.to(this, _.random(2, 6, true), {
                x: "-=" + _.random(150, 300),
                y: vh + this.height,
                rotation: _.random(-Math.PI, Math.PI) * 4,
                ease: Linear.easeNone,
                onComplete: function() {
                    _this.isActive = false;
                }
            });
        };
        return Snowflake;
    })(PIXI.Sprite);
    //
    // SUPER HERO
    // ===========================================================================
    var SuperHero = (function(_super) {
        __extends(SuperHero, _super);

function SuperHero(texture) {
            _super.call(this, texture);
            var sw = this.width;
            var sh = this.height;
            var canvas = document.createElement("canvas");
            canvas.width = sw;
            canvas.height = sh;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(texture.baseTexture.source, 0, 0);
            this.imageData = ctx.getImageData(0, 0, sw, sh).data;
            this.updatePosition();
        }
        SuperHero.prototype.updatePosition = function() {
            var x = vw / 2 - this.width / 2;
            var y = vh - this.height;
            this.position.set(x, y);
        };
        return SuperHero;
    })(PIXI.Sprite);
    //
    // EXPLOSION
    // ===========================================================================
    var Explosion = (function(_super) {
        __extends(Explosion, _super);

function Explosion(textures) {
            _super.call(this, textures);
            this.loop = false;
            this.position.set(-1000, -1000);
            this.rotation = _.random(-Math.PI, Math.PI) * 2;
            this.scale.set(_.random(0.5, 1.2));
            this.anchor.set(0.5);
        }
        return Explosion;
    })(PIXI.extras.MovieClip);
    //
    // LOADER
    // ===========================================================================
    var loader = new PIXI.loaders.Loader(baseURL)
        .add("superHero", "treats.png")
        .add("explosions", "explosions.json")
        .add("snowflakes", "snowflakes.png")
        .load(function(loader, assets) {
            return new Scene(assets);
        });
})(Demo || (Demo = {}));

编译

CSS

HTML