2

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

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

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 中的动画几乎没有经验。所以我需要一些关于从哪里开始的点击，或者可能是一些教程......

4

2 回答 2

2

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 元素来为使用矢量图形编辑器创建的图形制作动画，但手工编码的图形（如本示例中的简单图形）更清晰且更易于制作动画。使用图形编辑器时，请确保以合理的方式对元素进行分组。对于更复杂的图形，您可能希望在手动编码和合并您在图形编辑器中创建的部分之间找到一个很好的组合。

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

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

请注意，除了 IE，SMIL 基本上适用于任何地方。作为一种解决方法，您可以尝试FakeSmile，它支持 SMIL 的一个子集。

于 2013-08-05T06:56:47.473 回答
1

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

您可以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();

});
于 2013-08-04T17:49:59.533 回答