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>

<title>CartoonExt</title>

</head>

<body>

</div>

<BR>

效果列表

<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>

</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 CSSproperty (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简单的动画效果

相关文章