Question

我发现这个website主页效果非常酷。如何创建这些动画效果？这些效果是否需要额外的插件？

谢谢

Answer 1

这是一个代码笔http://codepen.io/mozzi/pen/vKmJbA

这是他们正在使用的代码

//--star animation

var canvas = document.getElementById("maincanvas");
var ctx = canvas.getContext("2d");
var stars = [];
var colours = ["white"];

canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

var centre = new Vector2(canvas.width / 2, canvas.height / 2);

//In terms of canvas width to look consistent on different resolutions
var spawnWidth = canvas.width / 2;
var spawnHeight = canvas.height / 2;

//Star properties
var maxStars = 50;
var spawnRadius = 0.1;
var sizeIncreaseFactor = 0.004;

function loop() {
    clear();
    update();
    draw();
    requestAnimationFrame(loop);
}

function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function update() {
    for (var i = 0; i < stars.length; i++) {
        stars[i].update();
    }
}

function draw() {
    for (var i = 0; i < stars.length; i++) {
        stars[i].draw();
    }
}

function populateStarField() {
    for (var i = 0; i < maxStars; i++) {
        var x = Math.floor(Math.random() * canvas.width);
        var y = Math.floor(Math.random() * canvas.height);
        stars.push(new star(new Vector2(x, y), getVelocity(new Vector2(x, y), centre), new Vector2(), spawnRadius, getRandomColour()));
    }
}

function getRandomColour() {
    return colours[Math.floor(Math.random() * colours.length)];
}

function addStar() {
    var x = centre.x + Math.floor(Math.random() * spawnWidth) - (spawnWidth / 2);
    var y = centre.y + Math.floor(Math.random() * spawnHeight) - (spawnHeight / 2);
    var velocity = getVelocity(new Vector2(x, y), centre);
    stars.push(new star(new Vector2(x, y), velocity, new Vector2((velocity.x / 30), (velocity.y / 30)), spawnRadius, getRandomColour()));
}

function getVelocity(location, centre) {
    var velocity = new Vector2();

    var distance = getDistanceBetween(location, centre, true);
    var scaledXDist = distance.x / (centre.x);
    var scaledYDist = distance.y / (centre.y);

    velocity.x = scaledXDist * 8;
    velocity.y = scaledYDist * 6;

    if (location.x < centre.x) {
        velocity.x = -velocity.x;
    }
    if (location.y < centre.y) {
        velocity.y = -velocity.y;
    }
    return velocity;
}

function getDistanceBetween(vector1, vector2, vectorOut) {
    var dx = Math.abs(vector1.x - vector2.x);
    var dy = Math.abs(vector1.y - vector2.y);
    if (!vectorOut) {
        return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
    } else {
        return new Vector2(dx, dy);
    }
}

function star(location, velocity, acceleration, radius, colour) {
    this.location = location || new Vector2();
    this.velocity = velocity || new Vector2();
    this.acceleration = acceleration || new Vector2();
    this.radius = radius || 1;
    this.startRadius = radius;
    this.colour = colour || "#EEE";
}
star.prototype.move = function() {
    this.velocity.add(this.acceleration);
    this.location.add(this.velocity);
}
star.prototype.update = function() {
    this.move();

    //Increase size to give appearance of moving closer
    this.radius = this.startRadius + (getDistanceBetween(this.location, centre, false) * sizeIncreaseFactor);

    //Remove if out of bounds, replace with new
    if (this.location.x < 0 ||
        this.location.x > canvas.width ||
        this.location.y < 0 ||
        this.location.y > canvas.height) {
        var index = stars.indexOf(this);
        if (index > -1) {
            stars.splice(index, 1);
            addStar();
        }
    }
}
star.prototype.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = this.colour;
    ctx.arc(this.location.x, this.location.y, this.radius, 0, Math.PI * 2);
    ctx.fill();
}

function Vector2(x, y) {
    this.x = x || 0;
    this.y = y || 0;
}
Vector2.prototype.add = function(vector) {
    this.x += vector.x;
    this.y += vector.y;
}
Vector2.prototype.subtract = function(vector) {
    this.x -= vector.x;
    this.y -= vector.y;
}
populateStarField();
requestAnimationFrame(loop);

Answer 2

这个效果利用了html5 Canvas，它提供了一个可以通过代码操作的像素数组。

特别是他们使用商业粒子滑块插件进行图像分解：http://particleslider.com/以及星域的自定义代码，如上一个答案中所示。

在这个具体的例子中，这实际上是一个很糟糕的可用性示例 - 特别是对于主页 - 因为一些用户可能有较慢的计算机并且没有内置的优化（从我可以观察到的）。

虽然这是一个非常酷的插件。

在此处了解有关html5画布的更多信息：http://www.w3schools.com/html/html5_canvas.asp

哪种Web技术可用于创建动态动画？特别是这些效果是如何产生的？

2 个答案: