随笔- 219 文章- 6 评论- 828 阅读- 24万

Animation

Animation是一个非常有特色的动画控件，适合网站的装饰！

属性列表：这个控件有很多的效果，在VS2005中设计此控件没有提供智能提示的功能，所以要掌握这个控件的各个属性，因为每一个动画效果其属性各不相同。但都遵守下面的代码格式：
        <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="">
        <Animations>
        <OnLoad>.....</OnLoad>
        <OnClick>.....</OnClick>
        <OnMouseOver>.....</OnMouseOver>
        <OnMouseOut>.....</OnMouseOut>
        <OnHoverOver>.....</OnHoverOver>
        <OnHoverOut>.....</OnHoverOut>
        </Animations>
        </cc1:AnimationExtender>

实例解析一、变化颜色的动画效果
属性：
Duration:动画显示的效果的时间间隔
PropertyKey:要设置的属性值
StartValue:属性的开始值
EndValue:属性的结束值
1.UI界面
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    </div>
        <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
        <Animations>
        <OnMouseOver>
        <Color Duration=".2" PropertyKey="color" StartValue="#ffffff" EndValue="#ff0000"></Color>
        </OnMouseOver>
        <OnMouseOut>
        <Color Duration=".2" PropertyKey="color" StartValue="#ff0000" EndValue="#ffffff"></Color>
        </OnMouseOut></Animations>
        </cc1:AnimationExtender>
        <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">变化的文本</asp:Panel>
    </form>
实例解析二、谈入谈出合并的动画效果
属性：
Duration:动画显示的效果的时间间隔
Fps:帧/秒的显示速度
MaximumOpacity:最大透明度
MinimumOpacity:最小透明度
<Fade duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
<Fade duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />

实例解析三、谈入谈出分开的动画效果
属性：
Duration:动画显示的效果的时间间隔
Fps:帧/秒的显示速度
MaximumOpacity:最大透明度
MinimumOpacity:最小透明度
<FadeIn duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
<FadeOut duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />

实例解析四、Action行为实例

1.设置动画目标控件不可用
        <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
        <Animations>
        <OnClick>
          <EnableAction Enabled="false" />
        </OnClick>
        </Animations>
        </cc1:AnimationExtender>
2.设置动画目标控件的属性
        <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
        <Animations>
        <OnClick>
          <StyleAction AnimationTarget="btn" Attribute="display" Value="none" />
        </OnClick>
        </Animations>
        </cc1:AnimationExtender>

实例解析五、特效文字
<head runat="server">
    <title>Animation Demo</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .itemContainer
        {
            border: 1px solid black;
            margin: 2px;
            padding: 2px;
            width: 300px;
            height: 0px;
            overflow: hidden;
            display: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sm" runat="server">
        </asp:ScriptManager>
        <asp:LinkButton ID="lbtnShow" Text="Show Items" OnClientClick="return false" runat="server"></asp:LinkButton>
        <div id="itemContainer" class="itemContainer">
            item item item item item item item item item item item item item item item item item item
            item item item item item item item item item item item item item item item item item item
            item item item item item item item item item item item item item item item item item item
            item item item item item item item item item item item item item item item item item item
            item item item item item
        </div>
        <ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="lbtnShow">
            <Animations>
                <OnClick>
                    <Sequence>
                        <EnableAction Enabled="false" />
                        <StyleAction AnimationTarget="itemContainer" Attribute="display" Value="block"/>
                        <Parallel Duration="0.3">
                            <Resize AnimationTarget="itemContainer" Height="100" Unit="px" />
                            <FadeIn AnimationTarget="itemContainer" />
                        </Parallel>
                        <Pulse AnimationTarget="itemContainer" Duration="0.1" />
                        <EnableAction Enabled="true" />
                    </Sequence>
                </OnClick>
            </Animations>
        </ajaxToolkit:AnimationExtender>
    </form>
</body>