Extjs学习总结之05动画函数

05动画函数fx && element

 

首先是fx.js

Ext.onReady(function(){
 //appluStyles是Ext.Element的方法用于定义指定元素的样式
    var style = Ext.get("a1").applyStyles({
     position:"absolute",
     top:200,
     left:200,
     backgroundColor:"red",
     width:100,
     height:100
    });
    //10秒之后将div从右边中央滑入
    style.slideIn("r",{
     duration:10
    });
    //滑出
    style.slideOut("t",{
     easing:'easeOut',
     duration:5,
     remove:false,
     useDisplay:false
    });
    
    //根据设定的颜色高亮现实element对象 然后逐渐为原始颜色
    style.highlight("0000ff",{//起始颜色
     attr:'background-color',//我们改变的是背景色
     duration:2,//动画的持续时间
     endColor:"ff0000"//持续的颜色
    });
    
    /* frame 展示一个展开的波纹 伴随着渐隐的边框以突出现实element对象
     *  color：波纹的颜色
     *  count: 波纹的个数
     *  options: 选项配置
     */
    style.frame("ff0000",3,{
     duration:3
    });
    
    //将元素从透明渐变为不透明
    style.fadeIn({
     endOpacity:1, //可以是0到1之前的任务值
     duration:4
    });
    
    //将元素从不透明渐变为透明
    style.fadeOut({
     endOpacity:0,
     duration:4,
     remove:false,
     useDisplay:false
    });
    
    //以动画展示元素从开始的高度/宽度转换到结束的高度/宽度。
    style.scale(100,100,{
     duration:2
    });
    
    //以动画展示元素任意组合属性的改变如元素的尺寸，位置坐标和透明度
    style.shift({
     width:100, //动画终止之后的宽度
     height:100,//动画终止之后的高度
     x:0,//动画终止之后的X坐标
     y:0,//动画终止之后的Y坐标
     opacity: 5,//动画终止之后的透明度 0-1
     duration: 5//动画持续的时间（5s）
    });
    
    //将元素从视图滑出并且伴随着渐隐
    style.ghost('b',{
     easing:'easeOut',
     duration:.5,
     remove:false,
     useDisplay:false
    });
    
    
})

因为动画是有过程的，所以我只是截其一个状态：

 

接下来是element.js

Ext.onReady(function(){
 //appluStyles是Ext.Element的方法用于定义指定元素的样式
    var style = Ext.get("e1").applyStyles({
     position:"absolute",
     top:200,
     left:200,
     backgroundColor:"red",
     width:100,
     height:100
    });
    //设置元素的宽度 
    style.setWidth(500,true);
    
    //设置元素的高度
    style.setHeight(500,true);
    
    //同时设置元素的宽度和高度并设置是否以动画显示
    style.setSize(500,500,true);
    
    //设置元素的位置和大小
    style.setBounds(0,0,500,500,true);
    
    //style.show(true)显示元素
    //style.hide(true)隐藏元素
})

这里主要讲解的是fx和element对象的相关动画函数，没有截图。