widget动画

例子1:

//创建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);

        

例子2:

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)