如何在网页中实现对象自旋转动画的效果

　　如何在网页中实现对象自旋转动画的效果
解决思路：
通过上一个例子的学习，我们知道 Matrix 滤镜可以使对象旋转任意角度显示，如果有合适的事件驱动，不断更新对象旋转的角度，就成了对象旋转的动画效果了。
具体步骤：
代码示例：

<script>
var rate = Math.PI/180
var degree = 0
function rotation(){
    degree += 5
    with(event.srcElement.filters[0]){
        M11 = M22 = Math.cos(degree*rate)
        M12 = Math.sin(degree*rate),M21 = -M12
    }
}
</script>
<img src="demo.gif" id="oDiv"
style="filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod=’auto expand’)" onfilterchange="rotation()">

技巧：如果需要使对象绕自身的几何中心点自转，可以用DirectAnimation控件和Redirect滤镜来实现：

<object id="DAControl"
classid="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D"></object>
<img src="demo.gif" id="demo" style="filter:redirect">
<script>
    DAControl.Image = demo.filters.redirect.elementImage().Transform(DAControl.MeterLibrary.Rotate2RateDegrees(90))  
    DAControl.Start()
</script>

关于 DirectAnimation 的控件的方法和属性，请参数MSDN：
http://msdn.microsoft.com/archive/en-us/dnarmulmed/html/msdn_directan.asp
 提示：onfilterchange在可视滤镜更改状态或完成转换时触发。
试一试：使图片以顺时针旋转运动。
特别提示
代码运行后，图片将不断作逆时针的旋转运动，图2.3.16为图片动作过程中的一个截图。

图2.3.13 图片旋转运动效果

特别说明

本例通过用onfilterchange事件不断触发rotation函数来实现图片的旋转效果。