<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 GSAP 会爆炸的雪花</title>
<style>
body {
overflow: hidden;
background: #000;
}
#canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<canvas></canvas>
<script src='js/TweenMax.min.js'></script>
<script src='js/pixi.js?v=1'></script>
<script src='js/lodash.min.js'></script>
<script>
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 = "./images/";
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)
HTML5 GSAP实现会爆炸的雪花飘落动画特效源码.zip
版权申诉
166 浏览量
2022-11-03
23:36:53
上传
评论
收藏 1.21MB ZIP 举报
HTML5 GSAP实现会爆炸的雪花飘落动画特效源码.zip （9个子文件） 
132689834979006742 images 
snowflakes.png 5KB explosions.png 899KB treats.png 73KB
explosions.json 6KB
index.html 8KB js jquery-1.11.1.min.js 94KB TweenMax.min.js 107KB pixi.js 812KB lodash.min.js 65KB资源评论
