javascript 这个鸟动画是怎么画的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7035919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How is this bird animation drawn?
提问by TCM
I came across this awesome website made in HTML5 and javascript. The heart of the website is the birds flying around randomly. I have little experience with canvas and Html5. I can take another object, some simple may be circle or something and move it randomly like this. However I won't get this natural effect. If you observe carefully the birds go away from each other, then come near each other, while they are flying up high in the sky they flap their wings very fast whereas when they are flying in horizontal direction they don't flap their wings and keep it straight. It looks amazing.
我遇到了这个用 HTML5 和 javascript 制作的很棒的网站。该网站的核心是随机飞来飞去的鸟儿。我对画布和 Html5 的经验很少。我可以拿另一个物体，一些简单的可能是圆形或其他东西，然后像这样随机移动它。但是我不会得到这种自然的效果。如果你仔细观察，鸟儿相互远离，然后相互靠近，当它们在高空飞翔时，它们的翅膀拍打得非常快，而当它们水平飞行时，它们不会拍打翅膀并保持它直。看起来很神奇。
I want to know only 2 things in this website i.e
我只想知道这个网站上的两件事，即
1)Whether the bird is a image or created using path in html5
1）鸟是图像还是使用html5中的路径创建
2)How are wings of the bird flapping? What logic he must have written? Do I need to study some physics book for this?
2)鸟的翅膀是如何扇动的？他一定写了什么逻辑？我需要为此学习一些物理书吗？
I've downloaded the entire website to see what code he must have written but the js file removes all the spaces and so it is as close as encrypted ;) and also I didn't find any image of the bird.
我已经下载了整个网站以查看他必须编写的代码，但 js 文件删除了所有空格，因此它与加密一样接近 ;) 而且我也没有找到任何鸟的图像。
I am truly amazed with this simple yet so beautiful design. Hats off to it's creators.
我真的很惊讶这个简单但如此美丽的设计。向它的创造者致敬。
Update:I am so absent minded, I forgot to put the link. Extremely extremely sorry ;)
更新：我心不在焉，忘记放链接了。非常非常抱歉;)
采纳答案by naveen
The answers for your questions as far as I know.
据我所知，您的问题的答案。
Whether the bird is a image or created using path in html5
鸟是图像还是使用 html5 中的路径创建
Definitely no. Have checked everything inside the Resources Tab of the Inspect element. There is no such image. The sun, tree and the main logo all are pngs.
绝对没有。检查了 Inspect 元素的 Resources 选项卡内的所有内容。没有这样的形象。太阳、树和主要标志都是 png。
How are wings of the bird flapping? What logic he must have written? Do I need to study some physics book for this?
鸟的翅膀是怎么扇动的？他一定写了什么逻辑？我需要为此学习一些物理书吗？
I am not sure about this. Its almost like a tween effect in flash.
No. you do not need to read a physics book but knowing physics is a great add on for any good animator.
我不确定这一点。它几乎就像 Flash 中的补间效果。
不，您不需要阅读物理书籍，但了解物理对于任何优秀的动画师来说都是一个很好的补充。
You cannot learn anything else from this site as the JavaScript is minified. If you feel compelled use http://www.jsbeautifier.orgto prettify the script and then walk through it. It will would be pretty difficult IMHO.
由于 JavaScript 已被缩小，因此您无法从该站点学到任何其他内容。如果您觉得有必要，请使用http://www.jsbeautifier.org来美化脚本，然后浏览它。恕我直言，这将是非常困难的。
As you might have noted, this is from the show case of Chrome Experimentswhere you could see some pretty nifty JavaScript + HTML5 effects. There you can see balldroppings.jsby Josh Nimoy. It is one of the most popular one out there. To achieve this effects he uses processing.jsanother wonderful library created by John Resig.
正如您可能已经注意到的，这是来自Chrome Experiments的展示案例，您可以在其中看到一些非常漂亮的 JavaScript + HTML5 效果。在那里你可以看到Josh Nimoy 的balldroppings.js。它是那里最受欢迎的一种。为了实现这种效果，他使用了另一个由 John Resig 创建的精彩库processing.js。
P.s: I'd say you might be wondering why I have guided you to that site. Everything will be apparent when you view source on the Ball Droppings site. The JavaScript is un minified and adequately commentd. It will be a great place to get started on learning HTML5 + CSS3 + SVG
Ps：我会说你可能想知道为什么我引导你到那个站点。当您在 Ball Droppings 网站上查看源代码时，一切都将一目了然。JavaScript 是未压缩的并且有足够的注释。这将是开始学习 HTML5 + CSS3 + SVG 的好地方
回答by nikc.org
The birds are created using sprites, if you search through the source you can find references to them: 1, 2, 3, 4.
这些鸟是使用精灵创建的，如果您搜索源代码，您可以找到对它们的引用：1、2、3、4。
As for the movement, it looks like some sort of swarming algorithm, combined with some (apparently) faux-3D effect. There are 3 swarms altogether, moving separately.
至于运动，它看起来像是某种蜂拥算法，结合了一些（显然）人造 3D 效果。一共有3个群，分别移动。
The code which handles the sprite for each individual bird (as well as other things), is the sprite-class:
处理每只鸟（以及其他事物）的精灵的代码是精灵类：
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
}
};
If you're interested in seeing how the birds are initalized, look for addBirds1: function(), addBirds2: function()and addBirds3: function(), but that really won't get you very far since, due to the minification, the different variables' names give no clue to their significance.
如果您有兴趣了解鸟类是如何初始化的，请查找addBirds1: function(),addBirds2: function()和addBirds3: function()，但这确实不会让您走得太远，因为由于缩小，不同变量的名称无法说明它们的重要性。
回答by ionelmc
The birds on the landing page (not the the ones sprited over the map) appear to be made using three.js. There's a example that looks nearly identical here: https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_birds.html
着陆页上的鸟（不是地图上的鸟）似乎是使用 Three.js 制作的。这里有一个看起来几乎相同的示例：https: //github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_birds.html
回答by Joe Ng'ethe
回答by Tanmay
I guess by the time you might have figured out how it works but as I cannot find a answer to your question in this post I think following will help:
我猜你可能已经弄清楚它是如何工作的，但由于我在这篇文章中找不到你的问题的答案，我认为以下内容会有所帮助：
This is achieved by THREEJS. If you are using it then imagination is our only limit. There is not flash or images anywhere. If you want to use it then you have to add
这是通过THREEJS实现的。如果您正在使用它，那么想象力是我们唯一的限制。任何地方都没有闪光灯或图像。如果你想使用它，那么你必须添加
<canvas id='canvasID' width="1680" height="949" style="position: absolute; left: 0px; top: 0px;"></canvas>
in your html. Set z-index=-1 (minimum) for this canvas.
在你的 html 中。为此画布设置 z-index=-1（最小值）。
var canvas = document.getElementById("canvasID");
renderer = new THREE.WebGLRenderer({ canvas: canvas });
Pass the canvas to WebGlRenderer.
将画布传递给 WebGlRenderer。
And you should be all set.
你应该准备好了。
Ref: Post
参考：发布
回答by LAOMUSIC ARTS
Here it is a tween solution, if you plan to use Flash:
如果您打算使用 Flash，这是一个补间解决方案：
