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是异步的，所以我需要一些额外的lib来编写它（promises？），我对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可能会提供更好的介绍，但这种介绍并非详尽无遗。

请注意，除了IE之外，SMIL基本上无处不在。作为解决方法，您可以尝试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();

});

HTML5卡通创作

2 个答案: