zoukankan      html  css  js  c++  java
  • 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;
                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>

     

  • 相关阅读:
    hadoop的文件系统FileSystem
    关于hadoop的日志
    top命令的使用
    对于多个集合求两两交集(共同关注的用户、共同转载的微薄等)
    hadoop配置含义(继续更新中)
    thrift
    【VS2015】Win7 X64上面安装VS2015
    【经验记录】开发中的实际问题记录
    【VS2012】F5不能自动编译新修改
    斯巴达三百程序员
  • 原文地址:https://www.cnblogs.com/astar/p/961082.html
Copyright © 2011-2022 走看看