当前位置: 代码迷 >> JavaScript >> Extjs卡通效果(自定义动画)
  详细解决方案

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

热度:157   发布时间:2012-06-20 20:37:21.0
Extjs动画效果(自定义动画)

Ext Core 通过预置的动画功能,可以让轻松实现动画功能。通过自定义动画配置,可实现更多的动画效果。动画完成后,可通过回调函数实现后续处理

Ext Core 动画 8 个定位点的值与描述

值 描述

tl 左上角

t 顶边中心

tr 右上角

l 左边中心

r 右边中心

bl 左下角

b 底边中心

br 右下角

下面开始介绍 Ext Core 预置的 12 个动画功能。

slideIn/slideOut:元素的滑进或滑出效果。默认 slideIn 是从顶部滑进的,而 slideOut 是从底部滑出的,可通过修改第 1 个参数设置滑进或滑出位置。其使用方法请看下面代码。

var el = Ext.get('elId');

//从顶部滑进

el.slideIn();

//从底部滑出

el.slideOut();

//从左边滑进

el.slideIn('l',{

easing: 'easeOut',

duration: .5

});

puff:元素慢慢向四周扩大并逐渐消失。当效果完成后,元素将隐藏(visibility 属性为hidden),不过元素原来所占位置将继续存在。如果需要删除元素,请设置 remove 属性为true。其使用方法请看下面代码。

var el = Ext.get('elId');

//默认方式

el.puff();

//自定义方式,元素消失后删除元素

el.puff({

easing: 'easeOut',

duration: .5,

remove: true,

useDisplay: false

})

switchOff:元素闪烁一下,然后往中心折叠(类似关掉电视)。当效果完成后,元素将隐藏(visibility 属性为 hidden),不过元素原来所占位置将继续存在。如果需要删除元素,请设置remove 属性为 true。其使用方法请看下面代码。

var el = Ext.get('elId');

//默认方式

el.switchOff();

//自定义方式,元素消失后删除元素

el.switchOff({

easing: 'easeOut',

duration: .5,

remove: true,

useDisplay: false

});

highlight:利用设置的颜色高亮显示元素,然后逐渐消隐回原有颜色。默认是设置元素背景颜色,可通过设置 attr 属性设置高亮显示方式。如果没有初始颜色,可以使用 endColor 属性设置消隐后的颜色。其使用方法请看下面代码。

var el = Ext.get('elId');

//默认方式

el.highlight();

//自定义方式

el.highlight('0f0f0f',{

easing: 'easeOut',

attr: 'color'

duration: .5,

endColor: 'abcdef'

});

frame:从元素边界开始以水波扩散的方式提示用户。其使用方法请看下面代码。

var el = Ext.get('elId');

//默认方式

el.frame();

//自定义方式

el.frame('0f0f0f',{

duration: .5,

});

pause:在队列中的动画开始之前产生一个停顿。其使用方法请看下面代码。

el.pause(1); //停顿 1 秒

fadeIn/fadeout:实现渐变效果。fadeIn 方法从透明渐变到不透明。fadeOut 方法从不透明渐变到透明。通过 endOpacity 属性可设置渐变结束后的不透明度。要注意在 IE 中可能要设置useDisplay 属性为 true。其使用方法请看下面代码。

var el = Ext.get('elId');

el.fadeIn();

el.fadeOut();

//自定义方式

el.fadeIn({

endpacity: 1,

easing: 'easeOut',

duration: .5

});

scale:将元素的尺寸从原有尺寸过渡到设置的尺寸。其使用方法请看下面代码。

var el = Ext.get('elId');

el.scale(100,200);

//自定义方式

el.fadeIn(100,200,{

easing: 'easeOut',

duration: .5

});

shift:元素渐变到新的位置、新的尺寸和不透明度。该方法至少需要位置、尺寸和不透明度其中一项设置,不然元素不会被改变。其使用方法请看下面代码。

var el = Ext.get('elId');

el.shift({

width:100, //元素的新宽度

height: 100, //元素的新高度

x: 10 , //元素的新 x 坐标

y: 10 , //元素的新 y 坐标

opacity: .8, //元素的新不透明度

easing: 'easeOut',

duration: .5

});

//以上属性 width、height、x、y、opacity 至少必须有一项

ghost:当元素渐隐时,元素同时滑出。可通过第 1 个参数设置滑出位置。其使用方法请看下面代码。

var el = Ext.get('elId');

el.ghost();

//自定义方式,从左边滑出

el.ghost('l',{

easing: 'easeOut',

duration: .5,

remove:false,

userDisplay:fase

});

animate:通过该方法可自定义复杂的动画效果。其使用方法请看下面代码。

var el = Ext.get('elId');

el.animate(

{

borderWith:{to : 3,from:0},

opacity: {to: .5, from:1}

height: {to 100 , from:el.getHeight()},

widht: {to 200 , from:el.getwidth()},

top:{by:-100,unit: 'px'}

},

1,//动画长度,单位为秒,该参数可选

null, //回调函数,该参数可选

'easeOut',//渐变方式,该参数可选

'run' //动画类型

);

在定义中,borderWidth、opactiy 等属性可以为元素的任何样式属性。动画类型包括以下几个类型:

run:默认类型。

color:动画渐变背景、文本或边界颜色。

motion:在渐变过程中使用 Bezier 曲线作为运动轨迹。

scroll:已垂直或水平滚动方式运动。

  相关解决方案