`
tof.j
  • 浏览: 135516 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类

Ex动画效果

阅读更多

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>CartoonExt</title>
        <!--加载ExtJs资源-->
        <script type="text/javascript" src="ext-base.js">
        </script>
        <script type="text/javascript" src="ext-all.js">
        </script>
        <!--我的js-->
        <script type="text/javascript">
   //图片宽
   var WIDTH=300;
   //图片高
   var HEIGHT=262;
   function reset() {
    //以Ext获得指定元素,并指定此元素左边距、上方边距、右边距、下方边距
    Ext.get('target').highlight().setBounds(10,10,WIDTH+10,HEIGHT+10);
   }
   
   function act() {
    //刷新
    reset();
    //在指定时间内移动到指定位置
    Ext.get('target').setBounds(150,80,WIDTH+150,WIDTH+80,{duration:1.0});
   }
   /**//**
    * 播放连续动作
    */
   function Anime(){
    Ext.get('target').highlight().fadeOut().fadeIn().pause(2).switchOff().puff();
    //IE下不支持switchOn()方法,这是一个Ext的bug
   }
   /**//**
    * 淡出
    */
   function fadeout() {
    //设定最后不透明度为0.0(完全透明),持续时间为1.0,方式为easeNone
    Ext.get('target').setOpacity(0.0,{ duration:1.0,easing:'easeNone'});
   }

   /**//**
    * 淡入
    */
   function fadein() {
    Ext.get('target').setOpacity(1.0,{duration:1.0,easing:'easeNone'});
   }

   function act2() {
    reset();
    var easingMethod=document.getElementById('easing').value;
    Ext.get('target').setLocation(150,150,{
     duration:1.0,
     easing:easingMethod
    });
   }
        </script>
    </head>
    <body>
        <div style="width:300px; height:450px;">
          <!--被移动的元素-->
            <img id="target" src="a.jpg">
        </div>
        <div style="text-align: center;">
            <input type="button" value="刷新" onclick="reset();">
            <input type="button" value="逐渐放大" onclick="act();">
            <input type="button" value="淡出" onclick="fadeout();">
            <input type="button" value="淡入" onclick="fadein();">
            <input type="button" value="连续动画" onclick="Anime();">
            <BR>
            <BR>
               效果列表
            <select id="easing">
                <option value="easeNone">easeNone</option>
                <option value="easeIn">easeIn</option>
                <option value="easeOut">easeOut</option>
                <option value="easeBoth">easeBoth</option>
                <option value="easeInStrong">easeInStrong</option>
                <option value="easeOutStrong">easeOutStrong</option>
                <option value="easeBothStrong">easeBothStrong</option>
                <option value="elasticIn">elasticIn</option>
                <option value="elasticOut">elasticOut</option>
                <option value="elasticBoth">elasticBoth</option>
                <option value="backIn">backIn</option>
                <option value="backOut">backOut</option>
                <option value="backBoth">backBoth</option>
                <option value="bounceIn">bounceIn</option>
                <option value="bounceOut">bounceOut</option>
                <option value="bounceBoth">bounceBoth</option>
            </select>
            <input type="button" value="执行" onclick="act2();">
        </div>
    </body>
</html>

 

---------------------------------------------------------------------------------------------

 

fadeIn( [Object options] ) : Ext.Element 渐显 options参数有以下属性
callback:Function    完成后的回叫方法
scope:Object        目标
easing:String        行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的
easeNone:匀速
easeIn:开始慢且加速
easeOut:开始快且减速
easeBoth:开始慢且减速
easeInStrong:开始慢且加速,t的四次方
easeOutStrong:开始快且减速,t的四次方
easeBothStrong:开始慢且减速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
afterCls:String        事件完成后元素的样式
duration:Number        事件完成时间(以秒为单位)
remove:Boolean        事件完成后元素销毁?
useDisplay:Boolean    隐藏元素是否使用display或visibility属性?
afterStyle:String/Object/Function        事件完成后应用样式
block:Boolean        块状化
concurrent:Boolean    顺序还是同时执行
stopFx :Boolean    当前效果完成后随合的效果是否将停止和移除

fadeOut( [Object options] ) : Ext.Element 渐隐
fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});

frame( [String color], [Number count], [Object options] ) : Ext.Element 边框变亮扩展然后渐隐
例:el.frame("ff0000", 10, { duration: 3 })

ghost( [String anchor], [Object options] ) : Ext.Element 渐渐滑出视图,anchor定义
tl     左上角(默认)
t      上居中
tr     右上角
l      左边界的中央
c      居中
r      右边界的中央
bl     左下角
b      下居中
br     右下角
例:
el.ghost('b', {
    easing: 'easeOut',
    duration: .5
    remove: false,
    useDisplay: false
});

hasActiveFx() : Boolean 指示元素是否当前有特效正在活动

hasFxBlock() : Boolean 是否有特效阻塞了

highlight( [String color], [Object options] ) : Ext.Element 高亮显示当前元素
例:el.highlight("ffff9c", {
    attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
    endColor: (current color) or "ffffff",
    easing: 'easeIn',
    duration: 1
});

pause( Number seconds ) : Ext.Element 暂停

puff( [Object options] ) : Ext.Element 元素渐大并隐没
例:el.puff({
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});

scale( Number width, Number height, [Object options] ) : Ext.Element 缩放
例:el.scale(
    [element's width],
    [element's height], {
    easing: 'easeOut',
    duration: .35
});

sequenceFx() 特效序列

shift( Object options ) : Ext.Element 位移,并可重置大小,透明度等
例:
el.shift({
    width: [element's width],
    height: [element's height],
    x: [element's x position],
    y: [element's y position],
    opacity: [element's opacity],
    easing: 'easeOut',
    duration: .35
});

slideIn( [String anchor], [Object options] ) : Ext.Element 淡入

slideOut( [String anchor], [Object options] ) : Ext.Element 淡出
例:el.slideIn('t', {
    easing: 'easeOut',
    duration: .5
});

stopFx() : Ext.Element 停止特效

switchOff( [Object options] ) : Ext.Element 收起并隐没
例:
el.switchOff({
    easing: 'easeIn',
    duration: .3,
    remove: false,
    useDisplay: false
});

syncFx() : Ext.Element 异步特效

分享到:
评论

相关推荐

    VC模仿酷狗7动画效果界面

    VC模仿酷狗7动画效果界面,给窗口加上WS_EX_LAYERED样式,使用Gdiplus画出图片,然后UpdateLayeredWindow。处理WM_MOUSEHOVER、WM_MOUSELEAVE消息,鼠标进入或移出画出不同状态。

    易语言Ex_Dui使用方法带模块_非常漂亮的UI

    3. 动画效果:Ex_Dui支持各种动画效果,如淡入淡出、滑动、旋转等,这使得界面交互更加生动有趣。 4. 高性能:Ex_Dui优化了渲染引擎,确保在不同硬件环境下都能提供流畅的用户体验,减少了界面绘制对系统资源的占用...

    C# winform窗体仿酷狗关闭等效,拉伸,动画效果

    在C# WinForm开发中,实现酷狗音乐那样的关闭、拉伸和动画效果,需要对Windows API、GDI+以及自定义控件有深入的理解。本文将详细讲解如何利用C#来模仿酷狗音乐的这些高级特性。 首先,酷狗音乐的关闭效果通常涉及...

    Ex_Ui高仿QQ登录界面(含H5动画)

    "Ex_Ui高仿QQ登录界面(含H5动画)" 这个标题揭示了我们讨论的主题是关于一个使用Ex_Ui框架设计的QQ登录界面的仿制品,其中包含了HTML5(H5)动画效果。Ex_Ui通常指的是一个用于构建用户界面的扩展框架,它可能提供了...

    动画制作.pdf

    在动画制作过程中,设计者需要确定哪些对象需要设置动画效果,并通过设置操作控制地址和显示条件来控制对象的隐现过程。这在强调特定信息或控制界面元素的可见性方面非常有用。 3. 颜色动画:颜色动画允许设计者...

    易语言自绘源码Ex_DirectUI

    5. **动画效果**:通过内置的动画引擎,开发者可以轻松实现窗口和组件的动态效果,如淡入淡出、滑动、旋转等,增强软件的视觉吸引力。 6. **资源管理**:Ex_DirectUI 内置资源管理器,支持图片、字体、声音等资源的...

    Ex_DirectUI2.0.zipEx_DirectUI2.0.zip

    2. **高级动画效果**:随着硬件加速的增强,2.0版本可能会支持更多复杂的动画效果,让UI更加生动和吸引人。 3. **更好的触控支持**:考虑到触摸设备的普及,DirectUI2.0可能增强了对触控输入的支持,使得在触摸设备...

    delphi调用API窗体实现动画

    API函数通常是由操作系统提供的,开发者可以通过它们来执行一些低级别的任务,如控制窗口的位置、大小、透明度等,从而实现复杂的动画效果。 在描述中提到的"深动画效果"可能指的是具有更丰富视觉层次和流畅过渡的...

    EX_UI界面库 (201805.26#1版).zip

    在201805.26#1版中,控件的动画效果和交互体验得到了进一步优化,增强了用户的视觉享受和操作感知。 在事件处理方面,EX_UI界面库采用了基于事件驱动的编程模型。开发者只需要为控件指定相应的事件处理函数,当用户...

    CASIO卡西欧数码相机 EX-10 中文用户说明书.pdf

    卡西欧EX-10的功能远不止于此,它还支持使用超广角拍摄、全景摄影以及特定的艺术效果拍摄,例如使用HDR艺术时保存第二幅普通影像。用户可以根据个人喜好和需求,选择适合的拍摄模式和设置。 最后,用户应当了解本...

    Ex_DirectUI3.0

    2. **高效渲染**:Ex_DirectUI3.0利用DirectUI的底层绘图机制,提供高效的图形渲染,确保用户界面的流畅性,尤其在处理大量数据或复杂动画时表现优异。 3. **事件驱动**:该模块支持事件驱动编程,开发者可以通过...

    使用windows api演示动画的例子(288KB)

    标题中的“使用windows api演示动画的例子”表明这是一个利用Windows API(Application Programming Interface)来实现动画效果的编程示例。Windows API是微软操作系统提供的一系列函数和接口,供开发者使用,以便与...

    Android Studio实现小车简单运动动画

    一、题目 1、参考课堂示例Ex10_1,通过绘制直线、矩形(填充与非填充)、多边形、圆和文本,绘制一个如附图1所示的简易式样的小车(注:图中的标注是...说明:实际动画效果,自行创意设计,可以更复杂一些,并且还可以

    VC模仿酷狗7(Kugou7) UI界面源码,有动画效果

     VC模仿酷狗7(Kugou7) UI界面源码,有动画效果,原创作者:邓学彬(泪闯天涯)  源码说明:内含VC++源码、易语言源码各一份.包含所有图片源码(使用Fireworks编辑)  开发环境:VC版--VS2005、Gdiplus;易语言版--...

    V2EX社区小程序.rar

    这涉及到对WXML和WXSS的理解,以及如何利用微信提供的动画和过渡效果。 6. **数据缓存与离线访问**: 为了提高用户体验,小程序通常会缓存部分数据,以便在离线状态下也能查看之前加载过的内容。微信小程序提供了...

    Ex_ui界面支持库2018.05.26版本

    Ex_ui界面支持库2018.05.26版本可能包括了如按钮、输入框、滑块、进度条、下拉菜单等常见控件,同时也可能提供了自定义主题、动态效果和动画的支持。 在使用Ex_ui界面支持库时,开发者首先需要确保他们的开发环境与...

    vc制作具有声音效果的动画桌面精灵_创建一个隐藏窗口创建不规则窗体CreateRectRgn.zip

    动画效果可以通过定时器(SetTimer)实现,定时更新窗口的位置、大小或透明度,以产生移动或变换的效果。在消息处理函数中响应WM_TIMER消息,执行相应的动画逻辑。 总结,通过上述步骤,我们可以使用Visual C++创建...

    VC模仿酷狗7(Kugou7) UI界面源码,有动画效果.rar

    VC模仿酷狗7(Kugou7) UI界面源码,有动画效果,原创作者:邓学彬(泪闯天涯) 源码说明:内含VC 源码、易语言源码各一份.包含所有图片源码(使用Fireworks编辑) 开发环境:VC版--VS2005、Gdiplus;易语言版--易语言5,...

    Ex_DirectUI4.1.zipEx_DirectUI4.1.zip

    在Windows系统中,DirectUI允许程序员使用DirectX技术来构建UI元素,而不是传统的GDI(图形设备接口)或GDI+,从而实现更流畅的动画效果和更高的性能。 DirectUI的核心在于它的组件化和可定制性,它支持自定义控件...

    Ex_Ui半透明登录界面

    5. **框架和库**: 使用像ex_ui这样的库可以大大简化开发过程,因为它们通常预封装了常见UI元素和动画效果,提供了统一的样式和API,使得开发者能快速实现半透明效果和其他高级功能。 6. **动画效果**: 半透明登录...

Global site tag (gtag.js) - Google Analytics