Javascript movieclip的SVG等价物

我正在做一个Flash项目，它必须被翻译成HTML5和SVG。在Flash中有一种叫做movieclip的东西。movieclip可以像Flash电影中的

类

所以，如果我想做一群蝴蝶

• 我将创建一个蝴蝶类/MovieClip，其中包含

  变量

  类属性行为的定义（例如拍打翅膀、随机移动和可能的避障）

• 在那之后，我只是在屏幕上扔了很多蝴蝶电影的嘴唇，看他们做他们的事情

例如：使用

For循环

我可以生成类的多个实例，比如

for (int i = 0; i < 30; i++)
{
    my_Butterfly = new ButterFly();

    my_Butterfly.graphics = SVG_referenced_HERE;
    my_Butterfly.flappingwings = true;
    my_Butterfly.flapspeed = 10;
    my_Butterfly.x = math.random(i * 40);
    my_Butterfly.y = math.random(i * 20);

}

for（int i=0；i<30；i++）
{
我的蝴蝶=新蝴蝶（）；
my_Butterfly.graphics=SVG_在此处引用；
我的蝴蝶。拍打=真的；
my_Butterfly.flapspeed=10；
my_Butterfly.x=数学随机（i*40）；
my_Butterfly.y=数学随机（i*20）；
}

我的问题:

如何在JavaScript中创建一个类，其中可视元素是SVG动画，并且该可视元素可以由其他类属性（如

.x

和

.y

位置）控制

---

现在，使用SVG似乎要复杂得多，因为我不知道如何制作类似电影唇的东西

我会在HTML文档中放满对butterfly SVG的引用，然后以某种方式，使用管理所有蝴蝶的代码同时对它们进行动画制作，但与movieclip机制相比，这并不十分优雅。换句话说：它不适合构建复杂的动画

我刚才也问过类似的问题：

---

有什么想法吗？

您可以将动画定义为标记中的资源，然后使用它将其放置在任何您想要的地方，如：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="myAnimation" class="wavingPath" d="M0,0C0,-20,100,20,100,0" stroke="black">
            <animate attributeName="d" attributeType="XML" from="M0,0C0,-20,100,20,100,0" to="M0,0C0,20,100,-20,100,0" dur="1s" repeatCount="indefinite"/>
        </path>
    </defs>
    <use x="10" y="10" xlink:href="#myAnimation" />
    <use x="100" y="100" xlink:href="#myAnimation" />
</svg>

---

这可能是我创作过的最丑陋的图像，但它展示了这个概念。同一动画的两个副本。您可以改用css动画。您定义的资源可以是一个包含许多动画路径的组对象。

很抱歉：本网站不涉及美学或优雅。显示您的代码努力和尝试，然后有人可能会帮助您。祝你好运。这个问题是关于一个在Flash中常用的概念，但在HTML5中似乎没有类似的概念。如果我不知道te在HTML5中使用了什么概念，我就无法生成代码。我真的尽可能清楚地解释了这一点。。。请让我知道遗漏了什么，我会补充它…正如我所说的Bigman，这个网站不是关于抽象概念的。尝试再次询问，显示您已经完成的代码工作，以获得所需的结果。那你可能会更幸运。请不要让我被误解，我只是想帮你。我对你的问题和你的工作表示敬意。这里没有人对你的事情漠不关心，我们只是用我们的时间和耐心来解释这个网站上的事情是如何运作的。做你的工作，潜入代码，然后带着对代码的怀疑回到这里。你说你不知道该用什么概念。所以学习html5，然后深入研究Javascript中的类是不可能的吗？FlashStage类似于画布，所以生成蝴蝶作为类（SVG数据）并绘制到画布。让Javascript控制类的每个唯一实例（butterfly）。。。在Flash中，我可以将actionscript和图形放在一个实体中。它在概念上不同于HTML5通常的工作方式。movieclip的行为就像是从基类movieclip“继承”的对象，可以说……如果你从未使用过Flash，这是一个很好的概念，很难解释……很好的方法。恭喜。我认为html最接近这个概念的是iframes。Javascipt、SVG和HTML都可以嵌入到一个HTML文件中，然后作为一个实体加载到iFrame中。问题是同步。除非父级访问iframe中文档的JavaScript，否则它们都会在iframe加载时的不同时间启动。与使用剪辑的flash相比，处理这些iFrame的大小也更加困难。现在有一些东西我可以处理。谢谢你的主意！