控件支持动画效果

DSL中的部分控件是可以添加动画的，如：容器类、按钮、标签等。

支持控件动画的type:

• “translate”//移动
• “scale”//伸缩
• “rotate”//旋转
• “alpha”//渐隐

每个type类型支持以下style：

• “accelerate”//加速
• “decelerate”//减速
• “bounce”//反弹

通过type与style结合使用，达到移动加速、移动减速、移动反弹、伸缩加速、伸缩减速、伸缩反弹、旋转加速、旋转减速、旋转反弹、渐隐加速、渐隐减速、渐隐反弹的效果，对同一个控件动画效果可以叠加使用如达到渐隐与移动加速的效果。

示例

<div id="viewPage0">
    <input id="button0" value="移动加速" onclick="translate_acc()" type="button"/>
    <input id="button1" value="移动减速" onclick="translate_dece()" type="button"/>
    <input id="button2" value="移动反弹" onclick="translate_bounce()" type="button"/>
    <input id="button3" value="渐隐伸缩减速" onclick="scale_alpha()" type="button"/>
    <input id="button4" value="渐隐移动旋转" onclick="translate_bounce()" type="button"/>
</div>

functionstart(sender, args) {
    //移动加速效果
    varanimations0 = {
        type : "translate", //移动类型,画面转换位置移动动画效果
        duration : 3000, //毫秒，默认1000
        fromX : 300, //int类型，leftMargin的大小
        toX : 10, //int类型，leftMargin的大小
        fromY : 500, //int类型，topMargin的大小
        toY : 50, //int类型，topMargin的大小
        repeatCount : "3", //int类型，重复的次数
        style : "accelerate"//加速
    };
    $id("button0").animate(animations0);
    //移动减速效果
    varanimations1 = {
        type : "translate", //移动类型,画面转换位置移动动画效果
        duration : 3000, //毫秒，默认1000
        fromX : 300, //int类型，leftMargin的大小
        toX : 10, //int类型，leftMargin的大小
        fromY : 500, //int类型，topMargin的大小
        toY : 50, //int类型，topMargin的大小
        repeatCount : "3", //int类型，重复的次数
        style : "decelerate"//加速
    };
    $id("button1").animate(animations1);
    //移动反弹效果
    varanimations2 = {
        type : "translate", //移动类型,画面转换位置移动动画效果
        duration : 3000, //毫秒，默认1000
        fromX : 300, //int类型，leftMargin的大小
        toX : 10, //int类型，leftMargin的大小
        fromY : 500, //int类型，topMargin的大小
        toY : 50, //int类型，topMargin的大小
        repeatCount : "3", //int类型，重复的次数
        style : "bounce"//反弹
    };
    $id("button2").animate(animations2);
    //渐隐+伸缩减速效果
    varanimations3 = [{
        type : "alpha", //渐隐类型
        duration : 3000, //毫秒，默认1000
        fromAlpha : 0.3, //float类型，0-1，0为全透，1为完全不透
        toAlpha : 1, //float类型，0-1，0为全透，1为完全不透
        repeatCount : 2//int类型，重复的次数
    }, {
        type : "scale", //渐变尺寸伸缩动画效果
        duration : 3000,
        fromWidth : "fill",
        toWidth : "fill",
        fromHeight : "0",
        toHeight : "68",
        pivotX : "0",
        pivotY : "0",
        style : "decelerate"//减速
    }];
    $id("button3").animate(animations3);
    //渐隐+移动旋转效果
    varanimations4 = [{
        type : "translate", //移动类型
        duration : 3000, //毫秒，默认1000
        fromX : 100, //int类型，leftMargin的大小
        toX : 280, //int类型，leftMargin的大小
        fromY : 10, //int类型，topMargin的大小
        toY : 500, //int类型，topMargin的大小
        repeatCount : "3", //int类型，重复的次数
        style : "bounce"
    }, {
        type : "alpha", //渐隐类型
        duration : 3000, //毫秒，默认1000
        fromAlpha : 0.3, //float类型，0-1，0为全透，1为完全不透
        toAlpha : 1, //float类型，0-1，0为全透，1为完全不透
        repeatCount : 0//int类型，重复的次数
    }];
    $id("button4").animate(animations4);
}