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>

     

  • 相关阅读:
    文档的几何形状和滚动
    聊聊并发——生产者消费者模式
    在JavaScript中什么时候使用==是正确的?
    HTML5使用canvas画图时,图片被自动放大模糊的问题
    获取元素的几种方式
    利用jQuery和CSS实现环形进度条
    最实用、最常用的jQuery代码片段
    表格样式
    javascript常量的定义
    null 和 undefined 的区别
  • 原文地址:https://www.cnblogs.com/astar/p/961082.html
Copyright © 2011-2022 走看看