我的工作必须被转换为HTML5和SVG Flash项目。在Flash中有个东西叫一个影片剪辑。一个影片剪辑可以像Flash影片内class
。
所以,如果我要拍的蝴蝶群...
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
有任何想法吗?
您可以定义动画在<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动画代替。您定义的资源可以是包含您动画许多路径一组对象。