今天偶尔看到t:ANIMATE 的用法,可以动态修改一个对象的某个属性,实现动画的效果,觉得比较有意思,写了一个小东西放上来,抛砖引玉。具体内容首发在http://webtrados.008.net。
运用t:ANIMATE标记可以将一个普通对象动画化。
下面看一个例子
<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>t:ANIMATE Demo</TITLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<DIV ID="oDIV" STYLE="position:absolute; top:100px; left:50px; width:100px;
height:50px; border:solid black 1px; text-align:center;">Moving DIV!</DIV>
<t:ANIMATE targetElement="oDIV" attributeName="left" to="200" dur="5"
fill="hold"/>
</BODY>
</HTML>
其中:前缀t是说明xml语言的namespace,必须定义xml的命名空间为”urn:schemas-microsoft-com:time”,然后加载标记定义:<?IMPORT namespace="t" implementation="#default#time2">。
<t:ANIMATE targetElement="oDIV" attributeName="left" to="200" dur="5"
fill="hold"/>
意思为:动态修改oDIV对象的left属性值在5秒钟内从初始值逐渐修改为200.
这段代码的运行效果为,一个100px宽50px高的方框水平移动了100px。这样不通过脚本,我们也可以实现动画效果。