HTML5动画创作

Question

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

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

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

Answer 1

SMIL动画为这样的任务做了完美的工作。下面是一个使用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元素来动画使用向量图形编辑器创建的图形，但是手工编码的图形(如本例中简单的图形)更干净，更易于动画。当使用图形编辑器时，请确保以合理的方式对元素进行分组。对于更复杂的图形，您可能希望在手工编码和将您在图形编辑器中创建的部分合并之间找到一个很好的组合。

对于手工编码，丁克宾和JS Bin是很好的工具，因为它们在编写代码时向您展示了图形。

您可以在SVG规格中查找可用的SMIL功能。MDN可能会提供更好的介绍，但这个介绍并不是详尽无遗的。

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

Answer 2

您可以有一个函数数组，每个函数执行一个动画步骤。

您可以在动画的每一步之后使用setTimeout来计时，或者如果所有步骤都一样长，setInterval也可以工作。

您可以使用jQuery的动画函数，它将使它变得非常简单和流畅。

在下面的示例中，展示了一些基本的功能，但是您可以使用jQuery来实现几乎所有的动画。

下面是我所想到的一些小的演示代码：

// array of animation steps and their lengths
var anim = [
    {
        time: 1000,
        func: function() {
            // do something
            $('#thingOne').fadeIn(1000);
        }
    },
    {
        time: 500,
        func: function() {
            // do something
            // this will span longer than the frame - no problem
            $('#thingOne').fadeOut(1000);
            $('#thingTwo').animate({
                    top: "+=200px",
                }, 500 );
        }
    },
    {
        time: 4000, // long frame
        func: function() {
            // do something
            $('#thingTwo').fadeOut(4000);
        }
    }
];

var stepId = 0;

function animStep() {
    if(stepId < anim.length) {

        var step = anim[stepId];

        step.func();

        stepId++;
        setTimeout(animStep, step.time);
    }
}


// launch the animation
$(document).ready(function(){

    animStep();

});