使用频率 | 低 |
所属UI模块 | widget |
成员类型 | 公有成员函数 |
animation方法用于执行配置时候指定名称的动画函数,通常情况下,该方法用于设计widget组件时候才会被用到,而非外部直接调用.
animation名称 | 成员函数名称 | 描述 |
width | width | 执行width函数时候触发,最终参数为减去盒型大小的宽度数字 |
height | height | 执行height函数时候触发,最终参数为减去盒型大小的高度数字 |
visible | visible | 执行visible,hide,show函数时候触发,回调参数为最终visible的状态 |
remove | remove | 执行remove时候并且没有传递任何参数,widget被移除时候触发 |
Object animation(String type,Function callback,Any data);
名称 | 类型 | 描述 |
type | String | 需要指定的动画的类型的名称,该名称是在创建widget的时候animation配置中的键名 |
callback | Function | 当动画执行完毕的时候执行的回调函数,通常情况下该函数用于放置最终值的修改的代码 |
data | Any | 动画函数所需要接受到的参数,通常用于传递动画的最终值 |
//创建widget,加上animation配置
var widget = Std.ui("widget",{
renderTo:"body",
width:100,
height:100,
css:{
background:"red"
},
animation:{
width:function(callback,width){
this[0].animate({
to:{
width:width - this.boxSize.width
}
},200,callback)
},
height:function(callback,height){
this[0].animate({
to:{
height:height - this.boxSize.height
}
},200,callback)
},
}
});
//此时渲染之后,widget的大小是 100 * 100,但是使用width与height方法的时候,就会呈现动画效果
widget.width(1000).height(500);
Std.animation("fad-in-out",function(callback,visible){
var domElement = Std.dom(this);
if(visible === true){
domElement.opacity(0).show().animate({
to:{
opacity:1
}
},300,callback);
}else{
domElement.animate({
to:{
opacity:0
}
},300,callback);
}
});
//创建widget,加上animation配置
var widget = Std.ui("widget",{
renderTo:"body",
width:100,
height:100,
css:{
background:"red"
},
animation:{
width:function(callback,width){
this[0].animate({
to:{
width:width - this.boxSize.width
}
},200,callback)
},
height:function(callback,height){
this[0].animate({
to:{
height:height - this.boxSize.height
}
},200,callback)
},
visible:"fad-in-out"
}
});
//此时渲染之后,隐藏widget,visible方法会按照animation配置中的visible执行动画
widget.visible(false)