javascript - HTML5卡通创作

Question

我想制作一个简单的短卡通。带有用棍子和移动 Sprite 绘制的字符的东西。不是一个严肃的项目，只是一张小动画明信片。

我想写这样的脚本(伪代码):

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 是异步的，所以我需要一些额外的库来编写它( promise ？)而且我对 canvas 或 SVG 中的动画没有什么经验。所以我需要一些关于从哪里开始的点击，或者可能是一些教程......

Answer 1

SMIL 动画非常适合此类任务。这是一个 little example of the described scene ，使用 SMIL 制作动画，需要很少的动画代码:

<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可能会提供更好的介绍，但此介绍并不详尽。

请注意，SMIL 基本上可以在除 IE 之外的任何地方使用。作为解决方法，您可以提供 FakeSmile尝试一下，它支持 SMIL 的一个子集。