转自：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 = " 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({
[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 = " 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({
[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
});