HTML5 TweenSpace.js构建细胞分解动画

cell spreading animation，life multiplication。可用来模拟生命繁衍过程，带一个简单的移动设备检测脚本，可自适应手机和电脑。

h5, cell, generation

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var max, min, r;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    max = 200;
    min = 135;
    strokeWidth = 8;
    r = 8;
} else {
    max = 700;
    min = 468;
    strokeWidth = 2;
    r = 4;
}
var i = 0,
    j = 0,
    k = 0;
var svg = document.getElementById('svg');
document.addEventListener("visibilitychange", onVizChange);

mitosis(0.5 * parseInt($('#svg').width()), 0.5 * parseInt($('#svg').height()));

function mitosis(from_x, from_y) {
        //Increments
        i++;
        j++;

//Calculates destination coordinates
        var to_x = from_x + (Math.random() * parseInt($('#svg').width()) * 0.15) * ((Math.random() < 0.5) ? 1 : -1);
        var to_y = from_y + (Math.random() * parseInt($('#svg').height()) * 0.15) * ((Math.random() < 0.5) ? 1 : -1);
        if (to_x < 0) to_x = -to_x;
        else if (to_x > parseInt($('#svg').width())) to_x = parseInt($('#svg').width()) * (0.45 + Math.random() * 0.45);
        if (to_y < 0) to_y = -to_y;
        else if (to_y > parseInt($('#svg').height())) to_y = parseInt($('#svg').height()) * (0.45 + Math.random() * 0.45);

//Creates and animates a dot
        var id = createDot(from_x, from_y, r, 'rgba(50, 180, 125, ' + (0.1 + Math.random() * 0.5) + ')');
        TweenSpace.to({
            elements: '#' + id,
            duration: (800 + Math.random() * 800),
            ease: TS.params.ease.quad.inOut,
            cx: {
                wiggle: {
                    frequency: (to_y * 0.0008),
                    amplitude: (to_y * 0.0081)
                },
                to: to_x
            },
            cy: {
                wiggle: {
                    frequency: (to_x * 0.0009),
                    amplitude: (to_x * 0.0090)
                },
                to: to_y
            },
            onComplete: function() {
                TweenSpace.to({
                    elements: this.elements(),
                    duration: (1500 + Math.random() * 1500),
                    r: {
                        wiggle: {
                            frequency: 0.2,
                            amplitude: 4
                        },
                        to: 0
                    },
                    opacity: 0,
                    onComplete: function() {
                        this.destroy();
                    }
                });
                /* When 'i' reaches 1000, 'j' starts
                counting down while no more dots are created. */
                if (i < max) {
                    //Creates a dot
                    mitosis(to_x, to_y);
                    //Creates a second dot every 3 increments
                    if (i % 3 == 0) {
                        mitosis(to_x, to_y);
                        var idRing = createDot(this.elements()[0].style.cx, this.elements()[0].style.cy, r, 'rgba(50, 180, 125, 0.3', true, strokeWidth);
                        TweenSpace.to({
                            elements: '#' + idRing,
                            duration: 2000,
                            opacity: 0,
                            r: 20,
                            onComplete: function() {
                                this.destroy();
                            }
                        });
                    }
                } else {
                    /* No dots are created until all dots disappear
                    except for the last one which will start over
                    creating more dots */
                    j--;
                    if (j < min) i = j = 0;
                }
            }
        });
    }
    //Prevents this browser window to get frozen.
function onVizChange(e) {
    if (document.visibilityState == 'hidden') {
        setTimeout(function() {
            TweenSpace.stopAll();
            $('#svg').empty();
        }, 500);
    } else {
        i = j = k = 0;
        setTimeout(function() {
            mitosis(0.5 * parseInt($('#svg').width()), 0.5 * parseInt($('#svg').height()));
        }, 500);
    }
}

function createDot(x, y, r, color, ring, strokeWidth) {
    k++;
    var newDotId = 'dot_' + k;
    var dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    dot.setAttribute('id', newDotId);
    dot.setAttribute('cx', x);
    dot.setAttribute('cy', y);
    dot.setAttribute('r', r);
    if (ring) {
        dot.setAttribute('stroke-width', strokeWidth);
        dot.setAttribute('stroke', color);
        dot.setAttribute('fill', 'rgba(50, 180, 125, 0)');
    } else {
        dot.setAttribute('stroke-width', 0);
        dot.setAttribute('stroke', 'rgba(50, 180, 125, 1)');
        dot.setAttribute('fill', color);
    }
    svg.appendChild(dot);

return newDotId;
}

编译

CSS

HTML

cell spreading animation，life multiplication。可用来模拟生命繁衍过程，带一个简单的移动设备检测脚本，可自适应手机和电脑。

h5, cell, generation

编辑器支持Emmet

快捷键

cell spreading animation，life multiplication。可用来模拟生命繁衍过程，带一个简单的移动设备检测脚本，可自适应手机和电脑。

h5, cell, generation

HTML5 SVG+jQuery.wavify.js 沙滩情侣动画

HTML5 Rx.js+Hammer.js城市规划拿破仑定理交互动画图解

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：