CSSS! 变形动画函数 morph() 使用方法

编程 · 发表于 2012-7-2 11:38:38

在CSSS!脚本中，使用 ltEle.start-animation() 启动动画以后，
在执行动画的 animation-step! 事件内，可选使用 morph() 函数来实现动画变形效果。

语法：

morph("ease-function-name", start-value, end-value )

复制代码

ease-function-name 指定一种动画效果的名称，
而每一种动画效果，都会从一个指定的CSS初始属性值 start-value 过渡变化到 en-value;

可选的 ease-function-name 有以下几种：

"bounce-in"
"bounce-out"
"bounce-in-out"

"back-in"
"back-out"
"back-in-out"

"elastic-in"
"elastic-out"
"elastic-in-out"

"circ-in"
"circ-out"
"circ-in-out"

"expo-in"
"expo-out"
"expo-in-out"

"sine-in"
"sine-out"
"sine-in-out"

"quint-in"
"quint-out"
"quint-in-out"

"quart-in"
"quart-out"
"quart-in-out"

"cubic-in"
"cubic-out"
"cubic-in-out"

"quad-in"
"quad-out"
"quad-in-out"

下面是一个简单的示例：

import win.ui;
/*DSG{{*/
winform = ..win.form( text="HTMLayout 变形动画函数 morph() 演示";bottom=399;parent=...;right=599;border="resizable" )
winform.add(
layoutWindow={ dr=1;dl=1;notify=1;right=580;left=10;dt=1;top=12;z=1;db=1;bottom=382;multiline=1;cls="edit" }
)
/*}}*/

import web.layout;
wbLayout = web.layout(winform.layoutWindow);

wbLayout.html =/***
<div id="myDiv" >请用鼠标点击这里</div>
***/

wbLayout.css = /**
#myDiv{
  width:200px;
  border:1px solid #DDD;
  background:#EEE;
  margin:10px;
  padding:5px;
  font:system;

  //鼠标点击事件
  active-on!:
self.start-animation( 0.4s )
  ;

  //动画事件
  animation-step!:
self::height = morph("cubic-out" //指定动画函数名
   , self.min-intrinsic-height() //指定变形初始值
   , 300px //指定变形完成后的值
)
  ;
}

**/

winform.show()
win.loopMessage();

编程 · 发表于 2012-9-15 22:30:04

CSS 中的 transition 也能实现类似过渡效果，用法更简洁一些
参考: aardio范例->HTMLayout->界面预览工具->transition 分类。

一个简单例子

{
width:100px;
height:100px;
}
div:hover
{
width:200px;
height:200px;
transition: width(linear,400ms)
height(linear,400ms);
}

复制代码

在 div:hover 状态中使用transition定义了变换效果，那么从其他状态切换到hover状态时将会应用该变换效果。

transition可以指定一个名多个值，多个值使用空格分格，每个值的格式如下：

CSS属性名( 状态变换函数,  动画持续时长, 动画间隔延时 )

CSS属性名( 渐入状态变换函数,  渐入动画持续时长, 渐入动画间隔延时,
渐出状态变换函数,  渐出动画持续时长, 渐出动画间隔延时 )

CSS属性名( 渐入该状态变换函数, 渐入动画持续时长,渐入动画间隔延时,
none)

CSS属性名( none,
渐出该状态变换函数, 渐出动画持续时长,渐出动画间隔延时)

上面的间隔延时参数都可以省略，

下面是范例：

import win.ui;
/*DSG{{*/
var winform = ..win.form(text="transition 变换效果";right=599;bottom=399)
winform.add()
/*}}*/
import web.layout;
var wbLayout = web.layout( winform )
wbLayout.html = /**
<html>
<head>
<style>
div.container
{
flow:horizontal-flow;
width:*;
height:*;
}
div.cell
{
width:*;
overflow:hidden;
}
div.cell:nth-child(4n)
{
clear:left; /* four in the row; */
}
div.test
{
background-color: gold;
color: black;
width:100px;
padding:4px;
margin:4px;
white-space:nowrap;
overflow:hidden;
}
div.test:hover
{
background-color: red;
width:200px;
}
div.test:hover[ease="linear"] { transition: width(linear,0.5s) background-color(linear,0.5s,0.5s); }
div.test:hover[ease="quad-in"] { transition: width(quad-in,0.5s) background-color(quad-in,0.5s,0.5s); }
div.test:hover[ease="quad-out"] { transition: width(quad-out,0.5s) background-color(quad-out,0.5s,0.5s); }
div.test:hover[ease="quad-in-out"] { transition: width(quad-in-out,0.5s) background-color(quad-in-out,0.5s,0.5s); }
div.test:hover[ease="cubic-in"] { transition: width(cubic-in,0.5s) background-color(cubic-in,0.5s,0.5s); }
div.test:hover[ease="cubic-out"] { transition: width(cubic-out,0.5s) background-color(cubic-out,0.5s,0.5s); }
div.test:hover[ease="cubic-in-out"] { transition: width(cubic-in-out,0.5s)background-color(cubic-in-out,0.5s,0.5s); }
div.test:hover[ease="quart-in"] { transition: width(quart-in,0.5s) background-color(quart-in,0.5s,0.5s); }
div.test:hover[ease="quart-out"] { transition: width(quart-out,0.5s) background-color(quart-out,0.5s,0.5s); }
div.test:hover[ease="quart-in-out"] { transition: width(quart-in-out,0.5s) background-color(quart-in-out,0.5s,0.5s); }
div.test:hover[ease="quint-in"] { transition: width(quint-in,0.5s) background-color(quint-in,0.5s,0.5s); }
div.test:hover[ease="quint-out"] { transition: width(quint-out,0.5s) background-color(quint-out,0.5s,0.5s); }
div.test:hover[ease="quint-in-out"] { transition: width(quint-in-out,0.5s) background-color(quint-in-out,0.5s,0.5s); }
div.test:hover[ease="sine-in"] { transition: width(sine-in,0.5s) background-color(sine-in,0.5s,0.5s); }
div.test:hover[ease="sine-out"] { transition: width(sine-out,0.5s) background-color(sine-out,0.5s,0.5s); }
div.test:hover[ease="sine-in-out"] { transition: width(sine-in-out,0.5s) background-color(sine-in-out,0.5s,0.5s); }
div.test:hover[ease="expo-in"] { transition: width(expo-in,0.5s) background-color(expo-in,0.5s,0.5s); }
div.test:hover[ease="expo-out"] { transition: width(expo-out,0.5s) background-color(expo-out,0.5s,0.5s); }
div.test:hover[ease="expo-in-out"] { transition: width(expo-in-out,0.5s) background-color(expo-in-out,0.5s,0.5s); }
div.test:hover[ease="circ-in"] { transition: width(circ-in,0.5s) background-color(circ-in,0.5s,0.5s); }
div.test:hover[ease="circ-out"] { transition: width(circ-out,0.5s) background-color(circ-out,0.5s,0.5s); }
div.test:hover[ease="circ-in-out"] { transition: width(circ-in-out,0.5s) background-color(circ-in-out,0.5s,0.5s); }
div.test:hover[ease="elastic-in"] { transition: width(elastic-in,0.5s) background-color(elastic-in,0.5s,0.5s); }
div.test:hover[ease="elastic-out"] { transition: width(elastic-out,0.5s) background-color(elastic-out,0.5s,0.5s); }
div.test:hover[ease="elastic-in-out"] { transition: width(elastic-in-out,0.5s) background-color(elastic-in-out,0.5s,0.5s); }
div.test:hover[ease="back-in"] { transition: width(back-in,0.5s) background-color(back-in,0.5s,0.5s); }
div.test:hover[ease="back-out"] { transition: width(back-out,0.5s) background-color(back-out,0.5s,0.5s); }
div.test:hover[ease="back-in-out"] { transition: width(back-in-out,0.5s) background-color(back-in-out,0.5s,0.5s); }
div.test:hover[ease="bounce-in"] { transition: width(bounce-in,0.5s) background-color(bounce-in,0.5s,0.5s); }
div.test:hover[ease="bounce-out"] { transition: width(bounce-out,0.5s) background-color(bounce-out,0.5s,0.5s); }
div.test:hover[ease="bounce-in-out"] { transition: width(bounce-in-out ,0.5s) background-color(bounce-in-out ,0.5s,0.5s); }
</style>
</head>
<body>
<h1>transition 变换效果</h1>
<div .container>
<div .cell><div .test ease="linear" >linear</div></div>
<div .cell><div .test ease="quad-in" >quad-in</div></div>
<div .cell><div .test ease="quad-out" >quad-out</div></div>
<div .cell><div .test ease="quad-in-out" >quad-in-out</div></div>
<div .cell><div .test ease="cubic-in" >cubic-in</div></div>
<div .cell><div .test ease="cubic-out" >cubic-out</div></div>
<div .cell><div .test ease="cubic-in-out" >cubic-in-out</div></div>
<div .cell><div .test ease="quart-in" >quart-in</div></div>
<div .cell><div .test ease="quart-out" #test >quart-out</div></div>
<div .cell><div .test ease="quart-in-out" >quart-in-out</div></div>
<div .cell><div .test ease="quint-in" >quint-in</div></div>
<div .cell><div .test ease="quint-out" >quint-out</div></div>
<div .cell><div .test ease="quint-in-out" >quint-in-out</div></div>
<div .cell><div .test ease="sine-in" >sine-in</div></div>
<div .cell><div .test ease="sine-out" >sine-out</div></div>
<div .cell><div .test ease="sine-in-out" >sine-in-out</div></div>
<div .cell><div .test ease="expo-in" >expo-in</div></div>
<div .cell><div .test ease="expo-out" >expo-out</div></div>
<div .cell><div .test ease="expo-in-out" >expo-in-out</div></div>
<div .cell><div .test ease="circ-in" >circ-in</div></div>
<div .cell><div .test ease="circ-out" >circ-out</div></div>
<div .cell><div .test ease="circ-in-out" >circ-in-out</div></div>
<div .cell><div .test ease="elastic-in" >elastic-in</div></div>
<div .cell><div .test ease="elastic-out" >elastic-out</div></div>
<div .cell><div .test ease="elastic-in-out">elastic-in-out</div></div>
<div .cell><div .test ease="back-in" >back-in</div></div>
<div .cell><div .test ease="back-out" >back-out</div></div>
<div .cell><div .test ease="back-in-out" >back-in-out</div></div>
<div .cell><div .test ease="bounce-in" >bounce-in</div></div>
<div .cell><div .test ease="bounce-out" >bounce-out</div></div>
<div .cell><div .test ease="bounce-in-out" >bounce-in-out </div></div>
</div>
</body>
</html>
**/
winform.show()
win.loopMessage();

复制代码

还可以使用 transition: blend; 用来实现渐入渐出的混合效果。
或者使用 transition:sound( in: url(sound1.wav) ,out: url(sound2.wav) ) 用来指定切换状态的音响效果，其中out部分可省略。

		自动登录	找回密码
密码			注册会员