Question

处理一个项目，似乎无法使我的动画正确。我不会展示代码，因为它根本不起作用，但是如果有人给我一些关于如何使一团烟雾向上移动同时慢慢褪色并且尺寸增加的话，那将会很酷。

一旦y值达到0 i.o.w，这种效果应该在技术上重复。云到达画布的顶部。

我需要知道的是如何设置动画，以及我使用哪些方法。这是一种自我学习的任务。

提前致谢。

Answer 1

以下是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();
  });

目前所有的补间都是线性的......用对数或指数补间看起来可能看起来更逼真......但为了简单起见，我只是把它保持为线性。

Answer 2

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为绘图提供了所有必要的样式工具 - 包括设置不透明度的globalAlpha。

Javascript画布动画。移动，生长和褪色的物体

2 个答案: