EaselJS水珠形态的粒子螺旋动画

很炫的水滴螺旋特效！

html5, canvas, particle

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// configurable:
var dotSize = 56,
    blurLevels = 9,
    speed = 1,
    particleScale = 0.33;

// globals:
var c = createjs,
    stage, t = 0,
    count = 0,
    w, h, max, min;
var spriteSheet, helixes = [];

/* Objects */
function HelixParticle(spriteSheet) {
    this.Sprite_constructor(spriteSheet);
    this.t = 0;
    this.speed = 1;
    this.size = 1;
    this.altAmp = 1;
    this.altPer = 1;
}
c.extend(HelixParticle, c.Sprite);
c.promote(HelixParticle, "Sprite");

// base helix shape:
        if (t < 0) {
            t = 1 + t;
        }
        var x = t * adjW - adjW / 2;

t = x / adjW;
        var y = Math.sin(t * rotations + startRotation) * min * a0;
        var z = Math.cos(t * rotations + startRotation) * min * a0;

// introduce variation:
        y += Math.sin(t * altPer + dot.altStart) * min * dot.altAmp * a1;
        z += Math.cos(t * altPer + dot.altStart) * min * dot.altAmp * a1;

var s = fov / (z + fov);
        dot.x = x * s; // disable perspective on the particle positions
        dot.y = y * s;
        dot.scaleX = dot.scaleY = Math.pow(s * (1 + dot.size), 2) * pScale;
        dot.alpha = s - 0.6;
    }
}
p.clone = function(particleCount) {
    var o = new Helix(particleCount || this.particleCount);
    this._cloneProps(o);
    o.set(this);
    return o;
}
c.promote(Helix, "Container");

/* global methods */
setup();

function setup() {
    stage = new c.StageGL("target");
    stage.tickChildren = false;
    stage.setClearColor("#201624"); // #206699

window.addEventListener("resize", onResize);
    onResize();

spriteSheet = generateSpriteSheet();

var helix;

helix = stage.addChild(new Helix(100));
    helix.x = w / 2;
    helix.y = h / 2;
    helix.speed = 0.1;
    helix.alpha = 0.1;
    helix.particleScale = 5;
    helix.altAmplitude = 1.6;
    helix.amplitude = 0.6;
    helix.rotations = 3;
    helixes.push(helix);

helix = stage.addChild(helix.clone(150));
    helix.particleScale = 3;
    helix.rotation = -20;
    helix.speed = -0.5;
    helix.amplitude = 0.1;
    helix.altAmplitude = 2;
    helix.alpha = 0.3;
    helixes.push(helix);

helix = stage.addChild(new Helix(1500));
    helix.x = w / 2;
    helix.y = h / 2;
    helix.amplitude = 0.4;
    helix.particleScale = 0.2;
    helix.rotation = -40;
    helix.rotations = 2.5;
    helix.speed = 2;
    helix.startRotation = 0.33;
    helixes.push(helix);

helix = stage.addChild(helix.clone());
    helix.startRotation = 0.83;
    helixes.push(helix);

helix = stage.addChild(helix.clone(100));
    helix.particleScale = 0.1;
    helix.speed = -3;
    helixes.push(helix);

helix = stage.addChild(helix.clone());
    helix.startRotation = 0.33;
    helixes.push(helix);

c.Ticker.timingMode = c.Ticker.RAF;
    c.Ticker.on("tick", tick);
}

function generateSpriteSheet() {
    // generates a 4x4 sheet of dots at different blur levels.
    var holder = new c.Container(),
        shape = holder.addChild(new c.Shape()),
        g = shape.graphics;
    var pow = Math.ceil(Math.log(dotSize * 2.2) / Math.log(2)),
        size2 = Math.pow(2, pow);
    var rect = new c.Rectangle(-size2 / 2, -size2 / 2, size2, size2);
    var builder = new c.SpriteSheetBuilder();
    builder.padding = 0;
    builder.maxWidth = Math.ceil(Math.sqrt(blurLevels)) * size2;
    for (var i = 0; i < blurLevels; i++) {
        builder.addFrame(holder, rect, 1, prepFrame, i);
    }
    return builder.build();
}

function prepFrame(holder, i) {
    var shape = holder.getChildAt(0);
    var g = shape.graphics,
        m = i / blurLevels,
        r = dotSize / 2 * Math.pow(2 - m, 1.2),
        x = 0 * (1 - m) * 0.2 * r;
    g.c().rf(["hsla(" + (m * 120 + 190) + ",100%,95%,1)", "hsla(270,100%,85%,0)"], [m * 0.8 + 0.1, 1], x, 0, 0, x, 0, r).dc(0, 0, r);
    shape.alpha = 0.3 + 0.7 * m;
}

function tick(evt) {
    var d = evt.delta;
    for (var i = 0, l = helixes.length; i < l; i++) {
        helixes[i].tick(d);
    }
    stage.update();
}

function rnd(min, max) {
    if (max === undefined) {
        max = min;
        min = 0;
    }
    return Math.random() * (max - min) + min;
}

function onResize() {
    w = window.innerWidth
    h = window.innerHeight;
    max = Math.max(w, h);
    min = Math.min(w, h);
    target.width = w;
    target.height = h;
    stage.updateViewport(w, h);
    for (var i = 0; i < helixes.length; i++) {
        helixes[i].x = w / 2;
        helixes[i].y = h / 2;
    }
    particleScale = min / 1000 * 0.3;
    stage.update();
}

编译

CSS

HTML

很炫的水滴螺旋特效！

html5, canvas, particle

编辑器支持Emmet

快捷键

很炫的水滴螺旋特效！

html5, canvas, particle

EaselJS可以切换色彩风格的粒子喷泉动画特效

CSS-Doodle.js实现的瀑布流粒子动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：