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

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
    }
};

如果您有兴趣观察鸟是如何initalized,寻找addBirds1: function(),addBirds2: function()和addBirds3: function(),但真的不会让你很远,因为,由于缩小,不同的变量名给不知道他们的意义.

Answer 2

据我所知,你的问题的答案.

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

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

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

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

随着JavaScript的缩小,你无法从这个网站上学到任何东西.如果您觉得有必要使用http://www.jsbeautifier.org来美化脚本,然后再进行操作.恕我直言,这将是非常困难的.

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

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