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

原创

wx63914693c5388 2022-12-08 10:30:40 ©著作权

文章标签 animation server div 制造 ci 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者wx63914693c5388的原创作品，请联系作者获取转载授权，否则将追究法律责任

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