32.ExtJS简单的动画效果

时间：2023-02-19 19:15:53

转自：http://blog.sina.com.cn/s/blog_74684ec501015lhq.html

说明：这篇文章的大部分内容来源于网上，经过自己实现其效果后，整理如下：

在进行 Javascript 开发，有时会有一些动画效果的实现需要，这往往浪费了开发人员不必要的精力。而 Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效，减少了我们自己手写代码的复杂度。

下面我给出一个简单的实例代码，其中囊括了大部分的 Ext 动画效果：

（注意导入js和css文件的目录，图片自己设置）

CartoonExt.js

var WIDTH = 300; // 图片宽

var HEIGHT = 300; // 图片高

/**

* 刷新

*/

function reset() {

// 以 Ext 获得指定元素，并指定此元素左边距、上方边距、右边距、下方边距

Ext. get ( 'picture' ).highlight().setBounds(10, 10, WIDTH + 10, HEIGHT + 10);

}

/**

* 逐渐放大

*/

function enlarge() {

reset();

// 在指定时间内移动到指定位置

Ext. get ( 'picture' ).setBounds(150, 80, WIDTH + 50, WIDTH + 80, { // 指定的位置

duration : 1.0 //duration:Number  事件完成时间（以秒为单位）

});

}

/**

* 连续动画

*/

function play() {

Ext. get ( 'picture' ).highlight().fadeOut().fadeIn().pause(2).switchOff().puff();

// IE 下不支持 switchOn() 方法，这是一个 Ext 的 bug

}

/**

* 淡出

*/

function fadeout() {

// 设定最后不透明度为 0.0( 完全透明 ), 持续时间为 1.0 ，方式为 easeNone

Ext. get ( 'picture' ).setOpacity (0.0, {

duration : 1.0,

easing : 'easeNone' //easing:String  行为方法 默认值是 :easeOut

});

}

/**

* 淡入

*/

function fadein() {

Ext. get ( 'picture' ).setOpacity (1.0, {

duration : 1.0,

easing : 'easeNone'

});

}

function execution() {

reset();

var easingMethod = document.getElementById( 'easing' ).value;

Ext. get ( 'picture' ).setLocation(150, 150, {

duration : 1.0,

easing : easingMethod

});

}

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

CartoonExt.html

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >

< title > CartoonExt </ title >

< script type = "text/javascript" src = "../js/ext-base.js" ></ script >

< script type = "text/javascript" src = "../js/ext-all.js" ></ script >

< script type = "text/javascript" src = "../js/CartoonExt.js" ></ script >

</ head >

< body >

< div style = "width: 300px; height: 300px;" >

<!-- 被移动的元素 -->

< img id = "picture" src = "../images/test_1.jpg" >

</ div >

< div style = "text-align: center;" >

< input type = "button" value = " 刷新 " onclick = "reset()" >

< input type = "button" value = " 逐渐放大 " onclick = "enlarge();" >

< input type = "button" value = " 淡出 " onclick = "fadeout();" >

< input type = "button" value = " 淡入 " onclick = "fadein();" >

< input type = "button" value = " 连续动画 " onclick = "play();" >

< 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 = "execution();" >

</ div >

</ body >

</ html >
----------------------------------------------------------------------------------------------------------------

部分参数如下：
fadeIn ( [Object options] ) : Ext.Element 渐显 options 参数有以下属性
callback:Function    完成后的回叫方法
scope:Object         目标
easing:String        行为方法 默认值是:easeOut, 可选值如下

字段值

说明

easeNone

匀速

easeIn

开始慢且加速

easeOut

开始快且减速

easeBoth:

开始慢且减速

easeInStrong

开始慢且加速,t 的四次方

easeOutStrong

开始快且减速,t 的四次方

easeBothStrong

开始慢且减速,t 的四次方

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
});

阅读全文
版权声明：本文为博主原创文章，未经博主允许不得转载。 举报
  • 本文已收录于以下专栏：
目前您尚未登录，请 登录 或 注册 后进行评论
 
 

相关文章推荐

Extjs动画效果(自定义动画)

Ext Core 通过预置的动画功能，可以让轻松实现动画功能。通过自定义动画

说明：这篇文章的大部分内容来源于网上，经过自己实现其效果后，整理如下：

在进行 Javascript 开发，有时会有一些动画效果的实现需要，这往往浪费了开发人员不必要的精力。而 Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效，减少了我们自己手写代码的复杂度。

下面我给出一个简单的实例代码，其中囊括了大部分的 Ext 动画效果：

（注意导入js和css文件的目录，图片自己设置）

CartoonExt.js

var WIDTH = 300; // 图片宽

var HEIGHT = 300; // 图片高

/**

* 刷新

*/

function reset() {

// 以 Ext 获得指定元素，并指定此元素左边距、上方边距、右边距、下方边距

Ext. get ( 'picture' ).highlight().setBounds(10, 10, WIDTH + 10, HEIGHT + 10);

}

/**

* 逐渐放大

*/

function enlarge() {

reset();

// 在指定时间内移动到指定位置

Ext. get ( 'picture' ).setBounds(150, 80, WIDTH + 50, WIDTH + 80, { // 指定的位置

duration : 1.0 //duration:Number  事件完成时间（以秒为单位）

});

}

/**

* 连续动画

*/

function play() {

Ext. get ( 'picture' ).highlight().fadeOut().fadeIn().pause(2).switchOff().puff();

// IE 下不支持 switchOn() 方法，这是一个 Ext 的 bug

}

/**

* 淡出

*/

function fadeout() {

// 设定最后不透明度为 0.0( 完全透明 ), 持续时间为 1.0 ，方式为 easeNone

Ext. get ( 'picture' ).setOpacity (0.0, {

duration : 1.0,

easing : 'easeNone' //easing:String  行为方法 默认值是 :easeOut

});

}

/**

* 淡入

*/

function fadein() {

Ext. get ( 'picture' ).setOpacity (1.0, {

duration : 1.0,

easing : 'easeNone'

});

}

function execution() {

reset();

var easingMethod = document.getElementById( 'easing' ).value;

Ext. get ( 'picture' ).setLocation(150, 150, {

duration : 1.0,

easing : easingMethod

});

}

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

CartoonExt.html

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >

< title > CartoonExt </ title >

< script type = "text/javascript" src = "../js/ext-base.js" ></ script >

< script type = "text/javascript" src = "../js/ext-all.js" ></ script >

< script type = "text/javascript" src = "../js/CartoonExt.js" ></ script >

</ head >

< body >

< div style = "width: 300px; height: 300px;" >

<!-- 被移动的元素 -->

< img id = "picture" src = "../images/test_1.jpg" >

</ div >

< div style = "text-align: center;" >

< input type = "button" value = " 刷新 " onclick = "reset()" >

< input type = "button" value = " 逐渐放大 " onclick = "enlarge();" >

< input type = "button" value = " 淡出 " onclick = "fadeout();" >

< input type = "button" value = " 淡入 " onclick = "fadein();" >

< input type = "button" value = " 连续动画 " onclick = "play();" >

< 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 = "execution();" >

</ div >

</ body >

</ html >
----------------------------------------------------------------------------------------------------------------

部分参数如下：
fadeIn ( [Object options] ) : Ext.Element 渐显 options 参数有以下属性
callback:Function    完成后的回叫方法
scope:Object         目标
easing:String        行为方法 默认值是:easeOut, 可选值如下

字段值

说明

easeNone

匀速

easeIn

开始慢且加速

easeOut

开始快且减速

easeBoth:

开始慢且减速

easeInStrong

开始慢且加速,t 的四次方

easeOutStrong

开始快且减速,t 的四次方

easeBothStrong

开始慢且减速,t 的四次方

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
});

 
 

32.ExtJS简单的动画效果的更多相关文章

  1. ExtJS简单的动画效果2（ext js淡入淡出特效）

    Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...

  2. ExtJS简单的动画效果（ext js淡入淡出特效）

    1.html页面:Application HTML file - index.html <html> <head> <title>ExtJs fadeIn() an ...

  3. 【从无到有】教你使用animation做简单的动画效果

    今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...

  4. 用Direct2D和DWM来做简单的动画效果2

    原文:用Direct2D和DWM来做简单的动画效果2 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detai ...

  5. 用Direct2D和DWM来做简单的动画效果

    原文:用Direct2D和DWM来做简单的动画效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detail ...

  6. tableView简单的动画效果

    tableView 中一些动画效果通常都是实现willDisplayCell的方法来展示出一些动画的效果 (1).带有3D效果的小型动态展示 -(void)tableView:(UITableView ...

  7. jquery 最简单的动画效果

    <p style="border: 1px solid red"> 我会慢慢变大 </p> <a>dianji</a> <sc ...

  8. NSLayoutConstraint 布局，配合简单的动画效果

    demo地址 :链接: http://pan.baidu.com/s/1c00ipDQ 密码: mi4c 1 @interface ViewController () @property (nonat ...

  9. css制作简单loading动画效果【css3 loading加载动画】

    曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...

随机推荐

  1. 从idea上通过路径去导入项目

    这里我用git来演示导入. 首先确定你要导入项目的路径.(我这里用码云路径图片做演示) 1.选择 2.填写

  2. Ios 消息推送

    手把手教你做iOS推送 http://www.cocoachina.com/industry/20130321/5862.html http://www.cnblogs.com/cdts_change ...

  3. &lbrack;LintCode&rsqb; Left Pad 左填充

    You know what, left pad is javascript package and referenced by React: Github link One day his autho ...

  4. 共享IP云主机（VPS）玩转wdcp

    目前国内有不少性能还不错的共享IP VPS,但因为没有独立IP,所以环境配置起来会比较麻烦. 因为本人自己现在用的就是共享IP的vps,所以把一些配置方法分享一下,供大家参考. 首先是系统的选择,根据 ...

  5. CSS实现倒影-------Day80

    发现这个功能的时候非常开心,结果不想居然是个残次品,让我不禁想起了"天龙八部"上段誉的六脉神剑,在这个浏览器上能够.在还有一个上就无论了啊,时灵时不灵的,只是有总比没有要来的好,一 ...

  6. Mahout推荐算法ItemBased

    Mahout推荐的ItemBased 一.   算法原理 (一)    基本的 下面的例子,参见图评分矩阵:表现user,归类为item. 图(1) 该算法的原理: 1.  计算Item之间的相似度. ...

  7. Flex和Java通信报错

    1.错误描述 11-30 18:15:52 ERROR [localhost-startStop-1] org.springframework.web.servlet.FrameworkServlet ...

  8. ResDrawableImgUtil【根据图片名称获取resID值或者Bitmap对象】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 根据图片名称获取项目的res/drawable-xxdhpi中相应资源的ID值以及bitmap值的封装类. 效果图 代码分析 根据图 ...

  9. js特殊符号（转）

    HTML有许多特殊的字符,您对此有多少了解?平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说“笑脸”,比如说“版权号”.要是你用时忘记了这 ...

  10. Nginx 缓存深入理解

    100课陶辉 proxy_cache_methods 指令主要是根据请求方法指定是否使用缓存 Syntax: proxy_cache_methods GET | HEAD | POST ...; De ...

相关文章