javascript - HTML5卡通创作

我想制作一个简单的卡通短片。用棍棒和移动的精灵绘制人物的东西。这不是一个严肃的项目，只是一个小的动画明信片。

我想写这样的脚本（伪代码）：

function train_arriwes_to_the_platform() {
    while(train.x > 0) {
        train.x -= train.speed;
        delay(1000 / FPS);
        redraw();
    };
}

/// other functions

function scene1() {
    clouds_fly_in_the_sky();
    train_arriwes_to_the_platform();
    doors_of_train_opens();
    man_comes_out_of_the_train();
    man_walks_from_the_platform();
}

问题是-javascript是异步的，因此我需要一些其他的库来编写它（这样吗？因此，我需要一些有关从何入手的信息，或者可能是一些教程...

最佳答案

SMIL动画可以很好地完成此类任务。这是使用SMIL制作的little example of the described scene动画，需要很少的动画代码：

<svg width="400px" height="300px"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="www://www.w3.org/1999/xlink">
  <!-- Sky -->
  <rect width="100%" height="150" fill="#ddf"/>

  <!-- Clouds -->
  <g>
    <animateTransform attributeName="transform" attributeType="XML"
                    type="translate" from="0" to="500" dur="30s" repeatCount="indefinite"/>
    <g style="fill:#eee" opacity=".8" id="cloud">
      <circle r="40" cx="20" cy="20"/>
      <circle r="35" cx="55" cy="40"/>
      <circle r="33" cx="80" cy="20"/>
    </g>
    <use xlink:href="#cloud" x="250" y="25"/>
    <use xlink:href="#cloud" x="-250" y="25"/>
    <use xlink:href="#cloud" x="-500" y="0"/>
  </g>

  <!-- Landscape -->
  <path d="M0 300
            0 140
           C100 120 120 100 180 130
           S250 120 300 120
           L 400 150
           400 300" fill="#4a3"/>

  <!-- Man -->
  <g transform="translate(280,270) scale(1,-1)">
    <path stroke="#000" fill="none">
      <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" values="0;-100" dur="6s"
        begin="5s" fill="freeze"/>
        <animate attributeName="d" begin="5s" dur="0.3s" repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path>
  </g>

  <!-- Station -->
  <g>
    <rect width="90" height="40" x="120" y="230" fill="#dd7"/>
    <rect width="100" height="14" x="115" y="220" fill="#a22"/>
    <path stroke-width="18" d="m130 250 h70" stroke="#aac" stroke-dasharray="20 8"/>
  </g>
  <!-- Platform -->
  <rect width="250" height="15" x="70" y="270" fill="#eec"/>

  <!-- tracks -->
  <g color="#aaa">
    <path d="M0 285h400" fill="none" stroke="currentColor" stroke-width="5" id="track"/>
    <use xlink:href="#track" y="3" stroke-dasharray="4 5" color="#411"/>
  </g>

  <!-- train -->
  <g color="#50f" stroke-dasharray="10 70">
    <animateTransform attributeName="transform" attributeType="XML"
                    type="translate" values="300;200;100;50;0" dur="3s"/>
    <animateTransform attributeName="transform" attributeType="XML"
                    type="translate" values="0;-100;-200;-350" dur="3s"
      begin="5s" fill="freeze"/>
    <!-- couplings -->
    <path d="M100 273h200" stroke="#000" stroke-dasharray="0" stroke-width="2"/>
    <g id="coach">
      <!-- wheels -->
      <path d="M20 278h100"
        stroke="#ccc" stroke-width="10" stroke-linecap="round"
        stroke-dasharray="0.001 15 0.001 40"/>
      <!-- body -->
      <rect width="100" height="35" fill="currentColor" x="5" y="240"/>
      <!-- windows -->
      <path d="M10 254h90" stroke-width="10" stroke="#eef"/>
    </g>
    <use xlink:href="#coach" color="#c22" x="105" stroke-dasharray="15 4"/>
    <use xlink:href="#coach" color="#c22" x="210" stroke-dasharray="15 4"/>
  </g>
</svg>

您可以在以后通过添加SMIL元素来对使用矢量图形编辑器创建的图形进行动画处理，但是手工编码的图形（例如本示例中的简单图形）更加简洁且易于动画处理。使用图形编辑器时，请确保以合理的方式对元素进行分组。对于更复杂的图形，您可能希望在手工编码和合并在图形编辑器中创建的片段之间找到很好的组合。

对于手工编码，Tinkerbin和JS Bin是很好的工具，因为它们在编码时会显示图形。

您可以在SVG specs中查找可用的SMIL功能。 MDN可能会提供更好的介绍，但此介绍并不详尽。

请注意，除了IE之外，SMIL基本上都能在任何地方工作。解决方法是，您可以尝试FakeSmile，它支持SMIL的子集。