八、Animation——淡入淡出动画效果

使用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>

            -->