Question

我遇到了这个用HTML5和javascript制作的精彩网站。网站的核心是随机飞来飞去的鸟儿。我对canvas和Html5的经验不多。我可以采取另一个对象，一些简单的可能是圆形或其他东西，并像这样随机移动。但是我没有获得这种自然效果。如果你仔细观察鸟类彼此远离，然后彼此靠近，当它们在天空中飞得很高时，它们很快地拍打它们的翅膀，而当它们在水平方向飞行时它们不会甩动它们的翅膀并保持直。它看起来很棒。

我想在这个网站上只知道两件事，即

1）该鸟是图像还是使用html5中的路径创建

2）鸟的翅膀如何拍打？他必须写什么逻辑？我需要为此学习一些物理书吗？

我已经下载了整个网站以查看他必须编写的代码，但是js文件删除了所有空格，因此它与加密一样接近;）而且我也没有找到任何图像那只鸟。

我对这款简约而精美的设计感到非常惊讶。向它的创造者致敬。

更新：我心不在焉，我忘记了链接。非常抱歉;）

http://thewildernessdowntown.com/

Answer 1

使用精灵创建鸟类，如果您搜索源代码，则可以找到对它们的引用：1，2，3，4。

至于机芯，它看起来像某种蜂拥算法，结合了一些（显然）仿3D效果。共有3个群体，分别移动。

处理每只鸟（以及其他东西）的精灵的代码是精灵级：

function sprite() {}
sprite.prototype = {
    create: function(c, b, f) {
        this.image = new Image();
        var a = this;
        this.image.onload = function() {
            a.onImage()
        };
        var e = new Date();
        this.image.src = c + "?" + e.getTime();
        this.step = 0;
        this.running = true;
        this.framerate = f;
        this.size = b;
        this.off_x = 0;
        this.off_y = 0;
        this.loop = true;
        this.offset = 0
    },
    onImage: function() {
        this.steps = this.image.height / this.size
    },
    blit: function(a, c, b, f) {
        if (!this.image.complete) {
            return
        }
        if (this.loop) {
            var e = ((f + this.offset) % 1);
            this.step = Math.floor(e * this.framerate) % this.steps
        } else {
            this.step = Math.floor(f * this.framerate);
            if (this.step > (this.steps - 1)) {
                this.step = this.steps - 1
            }
        }
        a.drawImage(this.image, 0, this.step * this.size, this.image.width, this.size, c - this.image.width / 2 + this.off_x, b - this.size / 2 + this.off_y, this.image.width, this.size)
    },
    start: function() {
        this.running = true
    },
    stop: function() {
        this.running = false;
        this.step = 0
    }
};

如果您有兴趣了解鸡群是如何进行初始化的，那么请查看addBirds1: function()，addBirds2: function()和addBirds3: function()，但这样做真的不会让您感到很远，因为缩小，不同变量的名称对它们的意义没有任何线索。

Answer 2

就我所知，你的问题的答案。

鸟是图像还是使用html5中的路径创建

绝对没有。检查了Inspect元素的Resources选项卡中的所有内容。没有这样的形象。太阳，树和主要标志都是pngs。

鸟的翅膀如何拍打？他必须写什么逻辑？我需要为此学习一些物理书吗？

我不确定这一点。它几乎就像闪光灯中的补间效果不，你不需要阅读一本物理书，但知道物理学对于任何优秀的动画师来说都是一个很好的补充。

由于JavaScript缩小，您无法从此网站获得任何其他信息。如果您觉得有必要使用http://www.jsbeautifier.org来美化脚本，然后逐步完成它。恕我直言，这将是非常困难的。

正如您可能已经注意到的，这是来自Chrome Experiments的展示案例，您可以在其中看到一些非常漂亮的JavaScript + HTML5效果。在那里你可以看到Josh Nimoy的balldroppings.js。它是最受欢迎的一个。为了达到这个效果，他使用了processing.js另一个由John Resig创建的精彩图书馆。

P.s：我想你可能想知道为什么我引导你到那个网站。当您在Ball Droppings网站上查看来源时，一切都会很明显。 JavaScript没有被缩小并充分评论。这将是开始学习HTML5 + CSS3 + SVG

的好地方

Answer 3

着陆页上的鸟（不是地图上的那些鸟）似乎是使用three.js制作的。这里有一个看起来几乎相同的例子：https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_birds.html

Answer 4

我相信这只鸟与website上的鸟类完全相同。

它们是使用惊人的three.js

制作的

Answer 5

我想当你可能已经弄清楚它是如何工作的时候但由于我在这篇文章中找不到你的问题的答案，我认为以下内容会有所帮助：

这是由THREEJS实现的。如果你正在使用它，那么想象力是我们唯一的限制。任何地方都没有闪光灯或图像。如果你想使用它，那么你必须添加

<canvas id='canvasID' width="1680" height="949" style="position: absolute; left: 0px; top: 0px;"></canvas>

你的HTML中的

。为此画布设置z-index = -1（最小值）。

var canvas = document.getElementById("canvasID");
renderer = new THREE.WebGLRenderer({ canvas: canvas });

将画布传递给WebGlRenderer。

你应该全力以赴。

参考：Post

Answer 6

如果您打算使用Flash，那么这是一个补间解决方案：

Flash Tween Birds

这只鸟动画是如何绘制的？

6 个答案: