使用Animation控件,可以制造出各种漂亮的动画效果,使用户在操作时有良好的视觉体验。
举例如下:
1. 添加一个ScriptManage控件
2. 添加一段div如下:
<div id="fade" runat="server">
ddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />
ddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />
ddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />
ddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />
ddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />
ddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />
</div>
3. 拖入Animation控件:
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="fade">
<Animations>
<OnMouseOver> //触发动画的事件
<FadeIn duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" /> //动画效果
</OnMouseOver>
<OnMouseOut>
<FadeOut duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
</OnMouseOut>
</Animations>
</cc1:AnimationExtender>
4. 动画效果举例:
<!-- 淡入淡出分开的动画效果
<OnMouseOver>
<FadeIn duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
</OnMouseOver>
<OnMouseOut>
<FadeOut duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
</OnMouseOut>
-->
<!-- 淡入淡出合并的动画效果
<OnMouseOver>
<Fade duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
</OnMouseOver>
<OnMouseOut>
<Fade duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
</OnMouseOut>
-->
<!-- 变化颜色的动画效果
<OnMouseOver>
<Color Duration=".2" PropertyKey="color" StartValue="#000000" EndValue="#ff0000"></Color>
</OnMouseOver>
<OnMouseOut>
<Color Duration=".2" PropertyKey="color" StartValue="#ff0000" EndValue="#000000"></Color>
</OnMouseOut>
-->