ExtJs之Ext.Fx类,让界面动起来

 

 

       界面具有动画效果最后归结为元素的动画效果。Extjs 定义了若干个方法用于完成元素动画的实现，一些是内置的，一些需要程序员自己编程。简单说，动态修改元素的样式是实现动态效果最直接最常见的方法，所以，这其中并无奥妙可言，看清楚了事实的真相，只要具备足够丰富的想象力，任何人都可以做出叹为观止的动画。

 

       虽然动画效果应用于Ext.Element 对象，却并不定义在Ext.Element 类中，而是定义在另一个类Ext.Fx 中。这让我非常疑惑，仔细查看了Ext.Element的源代码，愣是没发现Ext.Fx的身影，最终，在Ext.Fx 中看到了玄机，该类的最后一个语句告诉了我们事情的原委：Ext.apply(Ext.Element.prototype, Ext.Fx);，看看他的解释：Ext.Fx is automatically applied to Element so that all basic effects are available directly via the Element API（Ext.Fx 自动应用于Element 对象，所有的基本效果直接通过Element 调用）。

 

 

Ext.Fx 类

 

 

       正如前面所说，Extjs的动画大部分定义在Ext.Fx 中，尽管如此，Ext.Element 类也定义了部分动画函数。我们先来看看Ext.Fx 类中的重要方法。

 

1、slideIn ( [String anchor], [Object options] )：

功能：滑入效果

 

参数：

anchor：推出的方向，定义了8 种不同的方向，值不区别大小写，可选。

 

 

 

值     说明
-----  -----------------------------
tl     左上角
t      顶部中央
tr     右上角
l      左边中央
r      右边中央
bl     左下角
b      底部中央
br     右下角

 

options：选项配置，比较典型的是duration属性，用于定义动画持续的时间，可选。

以下是默认配置：

 

 

slideIn('t', {
easing: 'easeOut',
duration: .5
});

 示例：在10秒钟之内将div从右边中央滑入

 

html文件代码如下:

 

<div id="a1"> slideIn </div>

 js文件代码如下:

 

 

Ext.onReady(function(){
Ext.get("a1").applyStyles({position: "absolute", top: 200, left: 200, backgroundColor:
"red", width: 100, height: 100}).slideIn("r", {duration: 10});
})

 applyStyles 是Ext.Element 的方法，用于定义指定元素的样式。

 

 

 

 

2、slideOut ( [String anchor], [Object options] )：滑出效果，作动画隐藏。参数及用法同

上。以下是该方法的默认配置：

 

 

el.slideOut('t', {
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});

 

 

 

3、highlight ( [String color], [Object options] )：根据设置的颜色高亮显示Element 对象，

然后渐隐为原始颜色。默认情况，高亮显示的背景颜色为黄色。

参数：

color：起始颜色

options：选项配置

常见的配置选项及默认值

 

el.highlight("ffff9c", {
    attr: "background-color", //可以是任何能够把值设置成颜色代码的 CSS 属性
    endColor: (current color) or "ffffff",
    easing: 'easeIn',
    duration: 1
});

 

一个能应用在项目中的典型例子是：

 

 

Ext.get("a2").applyStyles({
position: "absolute",
top: 200,
left: 300,
backgroundColor: "red",
width: 100,
height: 100}).highlight("0000ff"/*起始颜色*/,
{
attr: 'background-color', /*我们改变的是背景颜色*/
duration: 2,/*动画持续时间*/
endColor: "ff0000" /*结束颜色*/
}
);

       如果可以把attr 属性值改成color，我们发现颜色改变的不再是背景，而是文字颜色。endColor 的颜色值不能是形如red之类的英文单词，只能是16 进制表示。起始颜色为蓝色，终止颜色为红色，中间的渐变由Extjs自动完成，非常自然。

 

 

 

4、frame ( [String color], [Number count], [Object options] )：展示一个展开的波纹，伴随

着渐隐的边框以突出显示Element 对象。默认情况下展示的是一个淡蓝色的波纹。

参数：

color：波纹颜色

count：波纹的个数

options：选项配置

示例：三个红色的波纹并持续3 秒。

 

 

Ext.onReady(function() {
			Ext.get("a4").applyStyles({
						position : "absolute",
						top : 200,
						left : 400,
						backgroundColor : "red",
						width : 100,
						height : 100
					}).frame("ff0000", 3, { // 内个波纹
						duration : 3 //每个波纹持续的时间
					});

		});

 

 

 

5、fadeIn ( [Object options] )：将元素从透明渐变为不透明。结束时的透明度可以根据"endOpacity"选项来指定。

 

示例：

 

Ext.onReady(function() {
			Ext.get("a4").applyStyles({
						position : "absolute",
						top : 200,
						left : 500,
						backgroundColor : "red",
						width : 100,
						height : 100
					}).fadeIn({
						endOpacity : .75, // 可以是0 到1 之前的任意值（例如：.5）
						duration : 4 //在4秒钟之内将可见度由 0 渐变到 75%
					});
		});

 

 

 

6、fadeOut ( [Object options] )：将元素从不透明渐变为透明。结束时的透明度可以根据"endOpacity"选项来指定。

示例：

 

 

Ext.onReady(function() {
			Ext.get("a4").applyStyles({
						position : "absolute",
						top : 200,
						left : 600,
						backgroundColor : "red",
						width : 100,
						height : 100
					}).fadeOut({
						endOpacity : 0, // 可以是0 到1 之前的任意值（例如：.5）
						duration : 4,
						remove : false,
						useDisplay : false
					});
		});

 

 

 

7、scale ( Number width, Number height, [Object options] )：以动画展示元素从开始的高度/宽度转换到结束的高度/宽度。

参数：

width：结束宽度，如果为undefined则保持原始宽度

height：结束高度，如果为undefined为保持原始高度

示例：

 

 

Ext.onReady(function() {
			Ext.get("a4").applyStyles({
						position : "absolute",
						top : 200,
						left : 700,
						backgroundColor : "red",
						width : 10,
						height : 10
					}).scale(100, 100, {
						duration : 2
					});
		});

 

 

 

8、shift ( Object options )：以动画展示元素任意组合属性的改变，如元素的尺寸、位置坐标和（或）透明度。如果以上属性中的任意一个没有在配置选项对象中指定则该属性不会发生改变。为了使该特效生效，则必须在配置选项对象中设置至少一个新的尺寸、位置坐标或透明度属性。

下面是一个比较有实用性的示例：

 

 

Ext.onReady(function() {
			Ext.get("a4").applyStyles({
						position : "absolute",
						top : 200,
						left : 800,
						backgroundColor : "red",
						width : 10,
						height : 10
					}).shift({
				width : 100,// 动画终止之后的宽度
				height : 100,// 动画终止之后的高度
				x : 0,// 动画终止之后的x坐标
				y : 0,// 动画终止之后的y坐标
				opacity : .5, // 动画终止之后的透明度，0-1之间的任意值
				duration : 5 // 动画持续的时间(5秒)
				});
		});

 

 

9.ghost ( [String anchor], [Object options] )：将元素从视图滑出并伴随着渐隐。作为可

选参数传入的定位锚点将被设置为滑出特效的结束点。

参数：

anchor：同slideIn

示例：

Ext.onReady(function() {
			Ext.get("a4").applyStyles({
						position : "absolute",
						top : 200,
						left : 900,
						backgroundColor : "red",
						width : 100,
						height : 100
					}).ghost('b', {
						easing : 'easeOut',
						duration : .5,
						remove : false,
						useDisplay : false
					});
		});

 

Ext.Element 类中的动画函数

 

1、setWidth ( Number width, Boolean/Object animate)：设置元素宽度

参数：

width：新宽度；

animate：是否以动画方式设置新的宽度，为true 时有动画效果。也可以配置动画参数。

示例：

Ext.onReady(function() {
			Ext.onReady(function() {
						Ext.get("e1").applyStyles({
									position : "absolute",
									left : 300,
									top : 100,
									width : 200,
									height : 200,
									backgroundColor : "red"
								}).setWidth(500, true);
					})
		});

元素e1是一个div元素（<div id="e1">setWidth</div>），初始宽度为200px，通过setWidth()方法宽度设置为500px，并且以动画方式将div拉宽。 

 

2、setHeight ( Number height, Boolean/Object animate)：设置高度，意义和使用同上。

 

3、setSize ( Number width, Number height, Boolean/Object animate)：同时设置元素的宽度和高度，并设置是否以动画显示。

参数：

width：新的宽度

height：新的高度

animate：是否带有动画效果，或者配置动画参数

示例：

Ext.onReady(function() {
			Ext.onReady(function() {
						Ext.get("a4").applyStyles({
									position : "absolute",
									left : 300,
									top : 100,
									width : 200,
									height : 200,
									backgroundColor : "red"
								}).setSize(500, 500, true);
					})
		});

div的初始大小为100*100,通过setSize()将大小变成500*500,并以动画显示。 

 

4、setBounds ( Number x, Number y, Number width, Number height, Boolean/Object animate)：设置元素的位置和大小。

参数：

x：新的左上角x 坐标

y：新的左上角y坐标

width：新的宽度

height：新的高度

animate：是否以动画显示，或者配置动画参数

示例：

Ext.onReady(function() {
			Ext.get("a4").applyStyles({
						position : "absolute",
						left : 100,
						top : 100,
						width : 100,
						height : 100,
						backgroundColor : "blue"
					}).setBounds(0, 0, 500, 500, true);
		});

 将 div元素的位置从100*100 变到0*0，并将大小从100*100变化到500*500。

 

5、show ( Boolean/Object animate)：显示元素。

 

6、hide ( Boolean/Object animate)：隐藏元素。