首页 教程 API文档

widget动画

2015-09-11 15:55:09

属性


使用频率
所属UI模块 widget
成员类型 公有成员函数

描述


animation方法用于执行配置时候指定名称的动画函数,通常情况下,该方法用于设计widget组件时候才会被用到,而非外部直接调用.

在设计widget动画时候,不建议直接使用widget本身的方法来做动画过度,而使用widget的DOM的方法来做动画过度,这可以极大的提高性能.

widget默认支持的animation的成员函数有


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 动画函数所需要接受到的参数,通常用于传递动画的最终值

返回值


this对象

相关例子


例子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)