使用SVG SMIL动画接口实现仰望星空的小孩

SVG's SMIL animations 注意：SMIL动画接口已经过时，这里只是起参考作用。我们应该使用CSS3动画或新的WEB Animation接口。

svg，smil

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

第三方库
作品简介 1612
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var starDensity = .216;
var speedCoeff = .05;
var width;
var height;
var starCount;
var circleRadius;
var circleCenter;
var first = true;
var giantColor = '180,184,240';
var starColor = '226,225,142';
var cometColor = '226,225,224';
var canva = document.getElementById('universe');
var stars = [];

windowResizeHandler();
window.addEventListener('resize', windowResizeHandler, false);

createUniverse();

function createUniverse() {
    universe = canva.getContext('2d');

for (var i = 0; i < starCount; i++) {
        stars[i] = new Star();
        stars[i].reset();
    }

draw();
}

function draw() {
    universe.clearRect(0, 0, width, height);

var starsLength = stars.length;

for (var i = 0; i < starsLength; i++) {
        var star = stars[i];
        star.move();
        star.fadeIn();
        star.fadeOut();
        star.draw();
    }

window.requestAnimationFrame(draw);
}

function Star() {

this.reset = function() {
        this.giant = getProbability(3);
        this.comet = this.giant || first ? false : getProbability(10);
        this.x = getRandInterval(0, width - 10);
        this.y = getRandInterval(0, height);
        this.r = getRandInterval(1.1, 2.6);
        this.dx = getRandInterval(speedCoeff, 6 * speedCoeff) + (this.comet + 1 - 1) * speedCoeff * getRandInterval(50, 120) + speedCoeff * 2;
        this.dy = -getRandInterval(speedCoeff, 6 * speedCoeff) - (this.comet + 1 - 1) * speedCoeff * getRandInterval(50, 120);
        this.fadingOut = null;
        this.fadingIn = true;
        this.opacity = 0;
        this.opacityTresh = getRandInterval(.2, 1 - (this.comet + 1 - 1) * .4);
        this.do = getRandInterval(0.0005, 0.002) + (this.comet + 1 - 1) * .001;
    };

this.fadeIn = function() {
        if (this.fadingIn) {
            this.fadingIn = this.opacity > this.opacityTresh ? false : true;
            this.opacity += this.do;
        }
    };

this.fadeOut = function() {
        if (this.fadingOut) {
            this.fadingOut = this.opacity < 0 ? false : true;
            this.opacity -= this.do / 2;
            if (this.x > width || this.y < 0) {
                this.fadingOut = false;
                this.reset();
            }
        }
    };

this.draw = function() {
        universe.beginPath();

if (this.giant) {
            universe.fillStyle = 'rgba(' + giantColor + ',' + this.opacity + ')';
            universe.arc(this.x, this.y, 2, 0, 2 * Math.PI, false);
        } else if (this.comet) {
            universe.fillStyle = 'rgba(' + cometColor + ',' + this.opacity + ')';
            universe.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, false);

//comet tail
            for (var i = 0; i < 30; i++) {
                universe.fillStyle = 'rgba(' + cometColor + ',' + (this.opacity - (this.opacity / 20) * i) + ')';
                universe.rect(this.x - this.dx / 4 * i, this.y - this.dy / 4 * i - 2, 2, 2);
                universe.fill();
            }
        } else {
            universe.fillStyle = 'rgba(' + starColor + ',' + this.opacity + ')';
            universe.rect(this.x, this.y, this.r, this.r);
        }

universe.closePath();
        universe.fill();
    };

this.move = function() {
        this.x += this.dx;
        this.y += this.dy;
        if (this.fadingOut === false) {
            this.reset();
        }
        if (this.x > width - (width / 4) || this.y < 0) {
            this.fadingOut = true;
        }
    };

(function() {
        setTimeout(function() {
            first = false;
        }, 50)
    })()
}

function getProbability(percents) {
    return ((Math.floor(Math.random() * 1000) + 1) < percents * 10);
}

function getRandInterval(min, max) {
    return (Math.random() * (max - min) + min);
}

function windowResizeHandler() {
    width = window.innerWidth;
    height = window.innerHeight;
    starCount = width * starDensity;
    circleRadius = (width > height ? height / 2 : width / 2);
    circleCenter = {
        x: width / 2,
        y: height / 2
    }

canva.setAttribute('width', width);
    canva.setAttribute('height', height);
}

编译

CSS

html,
body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    position: fixed;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-filter: contrast(120%);
    filter: contrast(120%);
    background-color: black;
}
.container {
    width: 100%;
    height: 100%;
    background-image: -webkit-radial-gradient(70% 120%, 1600px, rgba(33, 39, 80, 1) 10%, #020409 100%);
    background-image: radial-gradient(1600px at 70% 120%, rgba(33, 39, 80, 1) 10%, #020409 100%);
}
.content {
    width: inherit;
    height: inherit;
}
#universe {
    width: 100%;
    height: 100%;
}
#footerContent {
    font-family: sans-serif;
    font-size: 110%;
    color: rgba(200, 220, 255, .3);
    width: 100%;
    position: fixed;
    bottom: 0px;
    padding: 20px;
    text-align: center;
    z-index: 20;
}
#footer {
    position: absolute;
    bottom: 0px;
    height: 300px;
    width: 100%;
}
#scene {
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -800px;
}
a {
    text-decoration: none;
    color: rgba(200, 220, 255, 1);
    opacity: .4;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease;
}
a:hover {
    opacity: 1;
}

HTML

SVG's SMIL animations 注意：SMIL动画接口已经过时，这里只是起参考作用。我们应该使用CSS3动画或新的WEB Animation接口。

svg，smil

编辑器支持Emmet

快捷键

SVG's SMIL animations 注意：SMIL动画接口已经过时，这里只是起参考作用。我们应该使用CSS3动画或新的WEB Animation接口。

svg，smil

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：