|
|
本帖最后由 look 于 2012-8-24 09:52 编辑
import win.ui;
/*DSG{{*/
var winform = ..win.form( right=789;bottom=523;parent=...;text="HTMLayout 自定义控件";border="none" )
winform.add( )
/*}}*/
import console;
import web.layout;
var wbLayout = web.layout(winform );
import web.layout.debug;
wbLayout.attachEventHandler( web.layout.debug );
wbLayout.html =/***
<body>
<div id="big" >变大移动</div>
<div id="small" >变小移动</div>
<div id="close" >关闭窗口</div>
</body>
***/
wbLayout.css = /**
body{
margin:0px;
font:system;
width:500px;
height:600px;
background-color:blue;
}
div{
color:#ffffff;
}
#big
{
active-on!:self.start-animation( 0.4s );
//动画事件
animation-step!:
$(body)::background-color= blue,
$(body)::width=morph("cubic-out", 150px, 500px ),
$(body)::height=morph("cubic-in-out", 150px, 500px ),
$(body)::transition=background-color(timing-function:linear, duration:0.7s, delay:0.2s);
}
#small
{
active-on!:self.start-animation( 0.4s );
//动画事件
animation-step!:
$(body)::background-color= red,
$(body)::width=morph("cubic-out", 500px, 150px ),
$(body)::height=morph("cubic-in-out", 500px, 150px ),
$(body)::transition=background-color(timing-function:linear, duration:0.7s, delay:0.2s);
}
**/
var body=wbLayout.queryEle("body")
body.onSize = function (ltEle) {
var rcEle=ltEle.getRect();
var rc=winform.getRect()
rc.bottom=rcEle.bottom+rc.top;
rc.right=rcEle.right+rc.left;
winform.setRect(rc)
}
body.attachEventHandler();
var closeEle=wbLayout.getEle("close");
closeEle.onMouseClick = function (ltTarget,ltEle,reason,behaviorParams) {
winform.close()
}
closeEle.attachEventHandler();
var changeBiger=wbLayout.getEle("big");
changeBiger.onMouseClick = function (ltTarget,ltEle,reason,behaviorParams) {
}
changeBiger.attachEventHandler();
var changeSmaller=wbLayout.getEle("small");
changeSmaller.onMouseClick = function (ltTarget,ltEle,reason,behaviorParams) {
}
changeSmaller.attachEventHandler();
winform.show()
win.loopMessage();
想实现动画过渡移动主窗体,并变形,还是分不清CSS属性中transition的渐变和CSSS!用morph函数实现动画的用法,以上尝试代码,出错,请指点
变形前
变形后:
变形后
|
|
发表于 2012-8-24 09:49:41
