Question

我正在处理一个Flash项目，该项目必须转换为HTML5和SVG。在Flash中，有一个称为动画片段的东西。影片剪辑就像Flash电影中的class。

所以，如果我想成群结队的蝴蝶...

我将使用variable类属性行为（例如拍打翅膀，随机移动以及可能避开障碍物）的定义来创建一个蝴蝶类/ MovieClip。
在那之后，我只是在屏幕上扔了很多蝴蝶电影剪辑，然后看它们在做什么。

例如：使用For-loop，我可以像这样生成类的多个实例...

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);

}

我的问题：

如何在JavaScript中创建一个类，其中视觉元素是SVG动画，并且该视觉元素可以由其他类属性（例如.x和.y位置）控制？

现在，使用SVG，这似乎要复杂得多，因为我不知道如何制作类似于动画片段的东西。

我会在HTML文档中投入大量对Butterfly SVG的引用，然后以某种方式使用管理所有Butterfly的代码同时对它们进行动画处理，但是与movieclip机制相比，这不是很优雅。换句话说：它不适合制作复杂的动画

我前段时间也问过类似的问题： Previous question

有什么想法吗？

Answer 1

您可以将动画定义为标签中的资源，然后使用将其放置在所需的位置，例如：

<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动画。您定义的资源可以是包含许多动画路径的组对象。

SVG相当于movieclip

1 个答案: