SVG当量的movieclip [关闭]

问题描述 投票:-1回答:1

我的工作必须被转换为HTML5和SVG Flash项目。在Flash中有个东西叫一个影片剪辑。一个影片剪辑可以像Flash影片内class

所以,如果我要拍的蝴蝶群...

  • 我想创建一个蝴蝶类/ MovieClip的与类属性的行为variable定义(如拍打着翅膀,随机运动,也许避障)。
  • 从那以后,我只是扔在屏幕上有很多蝴蝶影片剪辑的,看着他们做他们的事。

例如:使用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这似乎是更为复杂,因为我不知道该怎么做一些类似于一个影片剪辑。

我把满手的蝴蝶SVG引用的HTML文档中,然后,不知何故,在同一时间用代码管理所有的蝴蝶动画所有这些,但相对于影片剪辑的机制不是很优雅。换句话说:它不适合于构建复杂的动画

我曾问过类似的问题前一段时间:Previous question

有任何想法吗?

javascript html5 flash svg svg.js
1个回答
2
投票

您可以定义动画在<DEFS>标签的资源,然后使用<使用>将它放在任何你想要的,如:

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

© www.soinside.com 2019 - 2024. All rights reserved.