aardio 范例: 控件 reduce 方法实现字符动画

import win.ui;
/*DSG{{*/
var winform = win.form(text="控件 reduce 方法实现字符动画";right=759;bottom=469;bgcolor=0xFFFFFF)
winform.add(
button={cls="button";text="显示动画";left=49;top=191;right=208;bottom=230;z=2};
static={cls="static";left=47;top=66;right=700;bottom=152;transparent=1;z=1}
)
/*}}*/

winform.show();

import web.form;
var wb = web.form(winform.static)
wb.html = /**
<!doctype html>
<html>
<head>
  <style>
    body {font-size: 20px;}
    .red {
        color: red;
        font-size: 20px;
        font-family:  Arial, sans-serif;
    }
   </style>
</head><body>Advanced Application Rapid Development Studio 桌面软件快速开发工具 
**/

winform.button.oncommand = function(id,event){

    /*
    窗口以及所有控件都支持使用 reduce 方法创建动画，
    将 disabledText 属性 赋值为字符数组所创建的动画内部就是调用控件的 reduce 方法。
    */
    winform.static.reduce(
        [
            '<span class="red">A</span>dvanced <span class="red">A</span>pplication <span class="red">R</span>apid <span class="red">D</span>evelopment Stud<span class="red">io</span>',
            '<span class="red">A</span>dvanced <span class="red">A</span>pplication <span class="red">R</span>apid <span class="red">D</span>evelopment Stud<span class="red">io</span>',
            '<span class="red">A</span>dvanced <span class="red">A</span>pplication <span class="red">R</span>apid <span class="red">D</span>evelopment Stud<span class="red">io</span>',
            '<span class="red">A</span>dvanced <span class="red">A</span>pplication <span class="red">R</span>apid <span class="red">D</span>evelopment Stud<span class="red">io</span>', 
            '<span class="red">A</span>dvanc <span class="red">A</span>pplicat <span class="red">R</span>api <span class="red">D</span>evelopm Stud<span class="red">io</span>',
            '<span class="red">A</span>dva <span class="red">A</span>ppli <span class="red">R</span>ap <span class="red">D</span>evel Stud<span class="red">io</span>',
            '<span class="red">A</span>d <span class="red">A</span>pp <span class="red">R</span>a Stud<span class="red">io</span>',
            '<span class="red">A</span> <span class="red">A</span> <span class="red">R</span> Stud<span class="red">io</span>',
            '<span class="red">AARD</span> <span class="red">io</span>', 
            'aardio'
        ],
        function(value,index,length,currentTime){
            if(value){
                wb.body.innerHTML = value;

                /*
                value 当前数组元素值
                index 当前数组索引
                length 数组总长度
                currentTime 本轮动画已持续的毫秒数
                */

                var duration = 2000;
                var x = currentTime/duration;
                var change = 1+length*(x * x * x * x); 
                var delay = (duration / length) / change; 

                return delay; //返回当前帧延时间隔
            }

            //动画结束时参数 value 为 null，如果返回非零数值则重校开始动画（currentTime 重置为 0）
            //return 1; 
        }  
    )   
}

win.loopMessage();
Markdown 格式