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>

     

  • 相关阅读:
    SuperMap开发入门1——资源下载
    去除Win10快捷图标小箭头
    MongoTemplate 分组分页复合条件查询
    mongo db 去除 _class 字段
    MongoDb 快速翻页方法
    mysql select limit 大数据量查询 性能终极提升方法
    MongoDB 数据自动同步到 ElasticSearch
    用 mongodb + elasticsearch 实现中文检索
    MySql5.7InnoDB全文索引(针对中文搜索)
    spring cloud fegin传递request header
  • 原文地址:https://www.cnblogs.com/astar/p/961082.html
Copyright © 2011-2022 走看看