ExtJS简单的动画效果

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

在进行
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

});