正在处理一个项目，但似乎无法正确制作动画。我不会展示代码，因为它根本行不通，但如果有人能给我一些指示，让我知道如何动画化一团烟云向上移动，同时慢慢淡化和增加大小。
一旦 y 值达到 0 i.o.w，从技术上讲，这种效果应该重复。云到达画布的顶部。
我需要知道如何制作动画，以及我使用哪些方法。这是一种自学作业。
提前致谢。
【问题讨论】：
标签： javascript html animation canvas
这是一个Plunker example 的精灵，它的大小越来越大，透明度越来越低。
它是使用Pixi.js 完成的，它实际上在 webgl 中呈现并带有画布后备。应该可以采用算法并将其应用于原始画布（尽管需要一些工作）。
var insertAfter = function(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
var range = function(aCount) {
return new Array(aCount)
}
function main() {
var el_main = document.getElementById("animation_main");
var el_div = document.createElement('div');
el_div.setAttribute('id', 'main_stage');
insertAfter(el_div, el_main);
renderer = PIXI.autoDetectRenderer(300, 300, {
transparent: true,
antialias: true
});
el_div.appendChild(renderer.view);
window.stage = new PIXI.Container();
window.stage.x = 0;
window.stage.y = 0;
renderer.render(window.stage);
var s = [];
for (x of range(400)) {
tCircle = new PIXI.Graphics();
tCircle.beginFill(0x000000, 1);
tCircle.s = (Math.random() * 2) + 1;
tCircle.drawCircle(0, 0, 5 - tCircle.s);
tCircle.x = Math.random() * 300
tCircle.y = (Math.random() * 50) + 20
tCircle.endFill();
s.push(tCircle);
window.stage.addChild(tCircle)
}
window.t = 0
animate = function(t) {
d = t - window.t
window.t = t
//Animation Start
for (n in s){
s[n].x += ((s[n].s / 25) * d)
s[n].alpha = 1 - s[n].x / 300
s[n].scale.x = 1 - s[n].alpha
s[n].scale.y = 1 - s[n].alpha
if (s[n].x > 300) {
s[n].x = 0
s[n].y = (Math.random() * 50) + 20
}
}
renderer.render(window.stage)
//Animation End
requestAnimationFrame(animate);
}
requestAnimationFrame(animate)
}
document.addEventListener("DOMContentLoaded", function(e){
main();
});
目前所有补间都是线性的...使用对数或指数补间可能看起来更逼真...但为简单起见，我只是将其保留为线性。
【讨论】：
Jakob Jenkov 在这里完成了一本非常不错的关于画布的在线书籍：
http://tutorials.jenkov.com/html5-canvas/index.html
由于您的学习经历是一种学习经历，因此我将向您指出：
html5 Canvas 的基本工作流程： 在画布上绘制的任何东西都无法更改，因此所有画布动画都需要在动画循环中反复做这些事情：（1）清除画布， (2) 计算对象的新位置，以及 (3) 在新位置重新绘制对象。
动画： requestAnimationFrame 作为定时循环：http://blog.teamtreehouse.com/efficient-animations-with-requestanimationframe
变换： Canvas 让您能够缩放、旋转和移动其绘图表面的原点。
样式： Canvas 提供了所有必要的绘图样式工具，包括设置不透明度的 globalAlpha。
【讨论】：